CODEWITHSUNDEEP
csslayout
TurtleMaster
TurtleMaster

Reputation: 121

CSS layout changes in Internet explorer

My problem: I just coded a website that is styled just fine in chrome and firefox. However in internet explorer(9) it breaks. the gray header background is supposed to be pushed up to the right of the logo block, and the buttons are supposed to be in the dark grey area. I posted my code. I'm no expert at css, any tips would be greatly appreciated. (the second image is displaying the desired result) enter image description here

the html: Website 

</head>
<body>

<div class="wrap_overall">

    <div class="header">
        <a href="http://localhost">
            <img class="logo" src="http://localhost/images/logo.png" width="175" height="24" alt="weblogo" />
        </a>        
    </div>

    <div class="headerbg"></div>

    <!-- nav top highlight -->
    <div style="background-color:#6c6c6c;margin:9px0px0px;height:1px;width:1020px;z-index:1;"></div>
    <!-- nav bar -->
    <div style="background-color:#5a5a5a;height:53px;width:1020px;z-index:1;"></div>
    <!-- nav bottom frame -->
    <div style="background-color:#d4e6b6;height:13px;width:1020px;z-index:1;border-top:4px solid #9de629; margin:0px 0px 10px;"></div>

    <div class="nav_main">
    <ul>
        <li> <a href="http://localhost/button1">
                <img src="http://localhost/images/button1.png" width="63" height="18" alt="button1" />
            </a> </li>

        <li> <a href="http://localhost/index.php?page=button2">
                <img src="http://localhost/images/button2.png" width="59" height="18" alt="button2" />
            </a> </li>

        <li> <a href="http://localhost/index.php?page=button3">
                <img src="http://localhost/images/button3.png" width="62" height="18" alt="button3" />
            </a> </li>

        <li> <a href="http://localhost/index.php?page=button4">
                <img src="http://localhost/images/button4.png" width="41" height="18" alt="button4" />
            </a> </li>

        <li> <a href="http://localhost/index.php?page=button5">
                <img src="http://localhost/images/button5.png" width="73" height="18" alt="button5" />  
            </a> </li>
    </ul>
    </div>


</div>

</body>
</html>

the css:

.logo
{
    padding:60px 20px 50px 20px;
}

body
{
    background-color:#282828;
    color:#FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}

body a, img{  border-style:none; color:#9de629; text-decoration:none;}
body a:visited {color:#9de629;}
body a:hover{ color:#FFFFFF; text-decoration:underline;}

.wrap_overall
{
    position:relative;
    width: 1020px;  
    margin:0px auto;
}

.header
{
    width:216px;
    height:148px;
    margin:0px 0px;
    padding:0px 0px;
    background-color:#252525;
    float:left;
    display:inline;
}

.headerbg
{
    margin:0px 0px 0px;
    padding:0px 0px;
    width:1020px;
    height:148px;
    background-color:#c7c7c7;

}

.nav_main/*holds the buttons*/
{

    margin:0px 0px 1px 0px;
    padding:0px 0px 0px 0px;
    position:absolute;
    top:148px;
    left:363px;
    z-index:2;
    overflow: hidden;
}

.nav_main ul 
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    overflow: hidden;
}

.nav_main ul li
{
    margin:0px 0px 0px 0px;
    display: inline;
    float: left;
}

.nav_main ul li a
{
    outline: none;
    border:none;
    margin:0px 0px 0px 0px;
    margin-right:-10px;
    height:54px;
    width:125px;
    color:#FFFFFF;
    background-image:url(../images/button.png);
    text-align:center;
    display:table-cell;
    vertical-align:middle;


}

.nav_main ul li a:hover  
{
    background-image:url(../images/buttonlight.png);
}

Upvotes: 0

Views: 493

Answers (1)

Mike H.
Mike H.

Reputation: 1751

Your problem is positioning and scoping. your nav_main content should be within the scope of it's container. currently you are attempting to position many different element independently but make them look "attached", which is basicly impossible.

I'll offer you an example:

<div id="header">
<div id="nav-bar">
    <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
    </ul>
</div>
</div>

This is a more appropriate layout for your header area. Example CSS may follow this logic:

#header { background-color: grey; width: 40% height: 200px; position: relative; top: 0;     right: 0; }   // top and right values depend on wrapper container
#nav-bar { background-color: darkgrey; width: 100%; height: 40px; position: relative; bottom: 0; left: 0; }
#nav-bar ul { position: absolute; bottom: 0; right: 0; }

/* Style your #nav-bar ul li stuff here */

Semantics lesson edit: try to avoid using inline styles as much as you can :)

To Clarify

In IE8 and below, positioning of elements was not on par with the standard of the good browsers, so with your stuff all scoped improperly and the use of absolute positioning, you're bound to get these problems.

Upvotes: 1

Related Questions