CSS layout changes in Internet explorer
Posted
by
user1784103
on Stack Overflow
See other posts from Stack Overflow
or by user1784103
Published on 2012-10-29T22:16:30Z
Indexed on
2012/10/29
23:01 UTC
Read the original article
Hit count: 271
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);
}
© Stack Overflow or respective owner
