CSS layout changes in Internet explorer
- by user1784103
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)
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);
}
