CODEWITHSUNDEEP
htmlcssinternet-explorer
SkeetJon
SkeetJon

Reputation: 1491

CSS header div won't align to the left in IE, but works in Chrome and Firefox

I have the following asp.net page with a fixed header at the top with width 100%. The underlying content is centrally aligned and scrolls under the header.

This works perfectly when save as afile an opened in Firefox and Chrome, but will not work in IE9. In IE9 the header aligns everything to the left ?

See JSFiddle

Full page with css

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <style>

    #header {
        margin: 0;
        padding-top: 5px;
        height: 25px;
        width: 100%;
        background-color: orange; /*#E1E1E0;*/
        position: fixed;
        z-index: 1000;
    }

    .header_link {
        float: right;
        margin-top: 3px;
        margin-right: 15px;
        cursor: pointer;
        color: #284E98 !important;
        font-size: small;
    }


    .content {
        width: 900px;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: red; /* added to show problem */
    }   

    </style>



    <div id="header">
        <a href="./About.aspx" class="header_link" onclick="return hs.htmlExpand(this, { objectType: 'ajax' })">About</a>       
        <a href="./Default.aspx" class="header_link">Home</a>
    </div>

    <div class="content">
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>  
    </div>

    </form>
</body>
</html>

Upvotes: 0

Views: 734

Answers (1)

Spudley
Spudley

Reputation: 168755

You need to have a <!DOCTYPE> at the top of all HTML pages.

Without it, IE will drop into Quirks mode, which will cause all kinds of CSS errors.

Add a valid doctype to your page. If you're not sure which doctype to use, the best one would be the HTML5 doctype:

<!DOCTYPE html>

Simple as that.

Hope that helps.

Upvotes: 4

Related Questions