Home/ Questions/Q 9245999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T09:23:29+00:00

I am having some problems with Safari. While all browsers display the pages fine,

  • 0

I am having some problems with Safari.

  1. 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.

  2. 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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0