Safari adds huge empty space

Question

I am having some problems with Safari.

While all browsers display the pages fine, Safari adds a huge white area above the main ContentPlaceholder as shown in the images below. This happens on every page so I guess the problem is in the master page but I can't figure out how to fix it.
There is also a small problem with some extra padding above the menu (same happens in Chrome)

I'd appreciate any help. thanks in advance.

All browsers

Safari

Here is my master page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
    <div class="header">
        <div class="title">
            <h1>
                My ASP.NET Application
            </h1>
        </div>
        <div class="loginDisplay">
            <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                <AnonymousTemplate>
                    ................
                </AnonymousTemplate>

                <LoggedInTemplate>
                    ................
                </LoggedInTemplate>
            </asp:LoginView>
        </div>
        <div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    ................
                </Items>
            </asp:Menu>
        </div>
    </div>
    <div class="leftMenu">
        <asp:ContentPlaceHolder ID="LeftMenuContent" runat="server"/>
    </div>
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>

    <div class="clear">
    </div>
</div>
<div class="footer">

</div>
</form>

And here is the source code and CSS: http://jsfiddle.net/V5aCa/6/

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

It is because you are using display:table safari treats this differently to other browsers

have a look at this question:

Safari 5.1 breaks CSS table cell spacing

or try using border-box:

CSS does the width include the padding?

Your space above the navigation appears because of the skip nav anchor, if you position this absolutely or float it your space should disappear

edited May 23 '17 at 12:12

Community

1
1

answered Feb 04 '13 at 11:29

Pete

57,112
28
117
166

Thanks! display:block fixed it. – Tsarl Feb 04 '13 at 11:38
http://jsfiddle.net/V5aCa/7/ position absolute has got rid of the gap? I added an id of Test to the link – Pete Feb 04 '13 at 11:55
1

Fixed it by using this CSS code: img[alt='Skip Navigation Links'] { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} – Tsarl Feb 04 '13 at 12:46

score 0 · Answer 2 · answered Feb 04 '13 at 11:29

0

Try resetting the Margin and Padding of the browser.

body {
      margin: 0px;
     padding: 0px;
}

that should force safari to start from your set values rather than build up on its default.

answered Feb 04 '13 at 11:29

user2039454

11

2

That's already in the CSS. And actually twice! First in the reset and then in defaults. – Oleg Feb 04 '13 at 11:30

Safari adds huge empty space

2 Answers2