Forum Moderators: not2easy
I've seen very little on this subject and what I have seen is truly disheartening. Like most old school designers, I've been using tables to format layout since I started in the mid-90's and have had relative success in doing so. Now, it just seems to make sense for me to make the transition into style based layouts. Having said that, I should also add that I've done my research, read the tutorials, bought the books and examined about a bazillion lines of source code to test against this problem and all to no avail... So here it is:
The Site / Stylesheet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Web Standards Make Me Choke</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background: #FFFFFF url(../images/bg_global.gif)
repeat-y 50% 0;
margin: 0;
}
#container {
width: 760px;
margin: 0 auto;
}
#banner {
background-color: #FF0000;
}
#content {
float: left;
width: 560px;
background-color: #FFFF00;
}
#sidebar-a {
float: right;
width: 200px;
background-color: #00FF00;
}
#footer {
clear: both;
background-color: #CC66FF;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="banner">
banner
</div>
<div id="sidebar-a">
sidebar-a
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Look familiar? It's basically a simplified Inknoise "Layout-o-matic" design with the Faux Column idea (ref: Dan Cederholm at A List Apart) I'm using just for this question. It should also be noted that bg_global.gif is an 800px image with a centered 760 box delineated as "content area" in the image, 20px from either edge of the image.
Now, in NS/Moz it looks great at any resolution, but in IE (I'm in v6 right now), it creates a problem at varied resolutions. The content div's are 1 pixel too far to the left of the background image and leave 1 pixel too little on the right side, thus overlapping the background image edge on the left, and showing too much on the right.
So, I grab the corner of my browser window and slowly shrink the browser size, and there it is! At odd/even browser resolutions, the div's either correct to match the background or stretch back to 1 px out of center again.
This is so perplexing to me because I can't seem to find much beyond the very occasional comment somewhere on the web that says to "make your content width even-numbered to correct the alignment". Maybe my skoolin' is rusty but I thought 200, 560 and 760 all were even numbers?
If anyone can help me solve this problem, it'd be much appreciated. I'm just so sick and tired of half-assed tutorials, one liner explanations and, well, cross-browser issues in general. Also, my apologies on the length of the post but I wanted to be EXTREMELY concise here.
Thanks in advance!
I emailed Dan Cederholm and he straightened me out. Apparently it's an IE6 bug. What needs to be done is to edit the background image by 1 pixel shy. My answer was to chop 1px off the left side of the bg_global and set the total container width to 799 - that seemed to do it. Very odd indeed.
Anyway, thanks to any who viewed. I'm only posting this for posterity in case anyone else has the same problem.
Cheers!
-gen
Thanks for that, it's one for the bookmarks
Suzy
I can't even stress how much I hate coding cross-browser. I anxiously await the day when browsers are built on a single programming standard defined by one source...
But I guess that's what they call pipe dreams.
