This only happens with IE 6.0, 5.5 and earlier. The operating system doesn't matter. The problem is that the sidebar gets displayed at the bottom of the page content. I can't see an issue with a missing tag... is it possibly an unresolved javascript conflict of some sort?? I can't duplicate the problem on my machine. On my Windows XP machine, I currently have four browsers installed on my local machine -- use FireFox mostly, but I also check the page design in IE (7.0), Safari and Opera. So, using browsershots.org's service, I can see that some content is not centered as I intended. An example address that this occurs with is: http://betterwindowssoftware.com/category-Games and Entertainment::Arcade.html The web page DOCTYPE is HTML 4.0 transitional - loose. The whole CSS is here. Here is most of the relevant CSS for the various page parts: [SIZE=2]body { font-family: Microsoft Sans Serif,Tahoma,Arial,Helvetica,sans-serif; width: 100%; margin: 0 auto; background: #f5edec url(images/vista_body_bg.gif) repeat-y center top; } #headingdiv { margin: 0px; padding: 0px 0px; width: 100%; height: 75px; color: #FFF; background: #E8E9E9 url(images/vista_heading.jpg) top left repeat-x } #headingdiv b { color: black; } #headingdiv a { font-weight: bold; color: #33A; } #headingdiv img { position: relative; top: 10px; } #header { width: 100%; padding: 0px 0px 0px 0px; } #wpage { margin-top: 7px; width: 1000px; margin: auto auto } #content { float: left; margin-left: 15px; width: 715px; padding-right: 32px; } #content div { padding-right: 0px; } #sidebar { color: #8B938B; float: left; margin-top: 12px; width: 214px; margin-left: 0px; } #sidebar p { margin: 0px 0px 7px 0px; padding: 0px 8px; font-size: 115%; } #sidebar menu { list-style: none; margin: 0px; padding: 4px 0.3em; } #sidebar li { list-style: none; padding:2px 0.3em 4px 5px; margin-left: 6px; margin-right: 6px; margin-top: 2px; margin-bottom: 4px; border-top: 1px solid #adb6c9; border-left: 1px solid #adb6c9; border-bottom: 1px solid #666b78; border-right: 1px solid #666b78; background-color: #eaedf6; font-size: 108%;} #sidebar ul { list-style: none; margin: 0px 4px; padding: 4px 4px; border-top: 1px #4b505c solid; } a { text-decoration: none; color:#0066CD; } a:hover { text-decoration: underline; color:#0066CD; } .module2 { color: #EFE; background: url(images/vista_sub_body_bg2.gif) top left repeat-y; } #sidebar h1 { letter-spacing: 1.8px; margin: 0px 0px 12px 0px; padding: 4px 10px; color: #d5d6f2; font-size: 140%; font-weight: bold; background: url(images/vista_sub_h_bg.gif) top left repeat-y; } #sidebar small { font-size: 95%; padding-left: 0px; } #sidebar br { margin: 0px 0px 0px 0px; } #sidebar h3 { letter-spacing: 1.3px; margin: 0px; padding: 4px 10px; color: #d8fbec; font-size: 115%; font-weight: bold; background: url(images/vista_sub_h_bg.gif) top left repeat-y; } #sidebar img { border: none; } #sidebar b { color: #4B534B } #full { width: 1000px; background: #000; margin: auto auto; border-bottom: solid 1px #e3e4e8; padding: 0px 0px 0px 0px; }[/SIZE] Code (markup): Thank you to anybody in advance who can help.
OT: You know you can download a stand alone version of IE 6 so you can test your designs with that, here is a link. http://browsers.evolt.org/download.php?/ie/32bit/standalone/ie6eolas_nt.zip
Thanks so much for that link! I downloaded the IE 6 and it runs fine locally... nicely within the zip folder. It worked for what I needed. The only problem that I found was unrelated to my original issue, so I'll just ignore the fact that it won't set cookies (as long as I don't need to test that functionality, it's great to have). It makes it so much easier to test the changes locally. If it wasn't for browsershots.org's service I wouldn't have seen this quirk... To explain the glitch it has something to do with floating divs that have a margin property set. Hmmmmph... it adds up to less than 1000px for me, but for whatever reason, trimming a few pixels from the #content left/right margins fixes the issue. PS: I certainly didn't think that your post was off topic.