I'm having a rather confusing problem that I can't quite figure out with IE 6. My divs in IE 6 aren't lining up correctly and nothing seems to make them work in IE 6. The worst part is that they work perfectly in Firefox and IE 7.
Here is the problem in IE 6:
<a href="http://img145.imageshack.us/img145/6860/crazyie6erroraw7.png"><img src="http://img145.imageshack.us/img145/6860/crazyie6erroraw7.png" width="250"></a>
Here are screenshots of it displaying correctly in IE 7 and Firefox:
<a href="http://img227.imageshack.us/img227/3273/firefoxek1.png"><img src="http://img227.imageshack.us/img227/3273/firefoxek1.png" width="250"></a>
<a href="http://img440.imageshack.us/img440/7156/ie7fb3.png"><img src="http://img440.imageshack.us/img440/7156/ie7fb3.png" width="250"></a>
Here is the code that I'm using:
<b>HTML</b>
- Code: Select all
<DOCTYPE>
<html>
<head>
<title>Design</title>
<link>
</head>
<body>
<div class="sidebar_align">
<table><tr><td><div class="sidebar_top"></div></td></tr>
<tr><td><div class="sidebar">
<center><div class="sidebar_inner_top"></div>
<div class="sidebar_inner"></div>
<div class="sidebar_inner_bottom"></div></center></div></td></tr>
<tr><td><div class="sidebar_bottom"></div></td></tr></table>
<div class="spacer_sidebar"></div>
<div class="sidebar_top"></div><div class="sidebar">
<center><div class="sidebar_inner_top"></div>
<div class="sidebar_inner"></div>
<div class="sidebar_inner_bottom"></div></center>
</div><div class="sidebar_bottom"></div></div>
<div>
<div class="main_top"></div><div class="main">
<center><div class="main_inner_top"></div>
<div class="main_inner"></div>
<div class="main_inner_bottom"></div></center>
</div><div class="main_bottom"></div>
</div>
</body>
</html>
You'll notice that the first div grouping is inside a table. I did this because this technique has worked in the past to get around IE 6's crappy rendering. It doesn't work for whatever reason in this case. <b>NOTE: Removing the doctype makes IE 7 mess up like IE 6... Firefox is still fine though.</b>
<b>CSS</b>
- Code: Select all
/* General styling */
body
{
margin:0px;
padding:0px;
}
a
{
text-decoration:none;
}
/* sidebar styling */
.sidebar_align
{
float:left;
position:absolute;
top:10px;
left:10px;
}
.sidebar_top
{
background-image:url("images/sidebar_top.png");
height:5px;
width:300px;
background-repeat:no-repeat;
}
.sidebar
{
background-position:top;
background-color:#d8451a;
width:300px;
height:267px;
}
.sidebar_bottom
{
background-image:url("images/sidebar_bottom.png");
height:5px;
width:300px;
background-repeat:no-repeat;
}
.sidebar_inner_top
{
background-image:url("images/sidebar_inner_top.png");
background-repeat:no-repeat;
width:290px;
height:5px;
}
.sidebar_inner
{
background-color:White;
width:290px;
height:257px;
}
.sidebar_inner_bottom
{
background-image:url("images/sidebar_inner_bottom.png");
background-repeat:no-repeat;
width:290px;
height:5px;
}
.spacer_sidebar
{
height:10px;
width:300px;
}
/* main */
.content_container
{
padding-left:10px;
}
.main_top
{
background-image:url("images/main_top.png");
background-repeat:no-repeat;
width:650px;
height:5px;
}
.main
{
background-color:#d8451a;
width:650px;
height:553px;
}
.main_bottom
{
background-image:url("images/main_bottom.png");
background-repeat:no-repeat;
width:650px;
height:5px;
}
.main_inner_top
{
background-image:url("images/main_inner_top.png");
background-repeat:no-repeat;
width:640px;
height:5px;
}
.main_inner
{
background-color:White;
width:640px;
height:543px;
}
.main_inner_bottom
{
background-image:url("images/main_inner_bottom.png");
background-repeat:no-repeat;
width:640px;
height:5px;
}
Thanks for the help!
Follow me on Twitter: 
