Header Alignment Problems with IE6 & IE7

You need to select an IE specific style sheet with conditional comments, explained by Esmi at that link.

Supporting IE 6 and 7 can be a pain in the whatever. Good luck. Use IE TEster under windows to test IE versions. On a Mac, use VMware to run Windows.

Thanks for the info, I’ll forge into conditional comments if that’s the only way to make this work. BTW, I’m using VMware for testing and do really like it.

Sometimes CCs are the only way to make IE6 and 7 play right. I ended up with minimal CCs for some of my sites – basically just a few IDs in the IE specific style sheet – but they were necessary to get the layout looking right.

But you might be able to tweak existing CSS, or find a theme that is already XHMTL compliant and advertises the fact that it displays right in IE.

IE Tester works well under VMWare, but don’t use Microsofts new Superpreview IE tester; it destroyed my VMWare XP image.

Also, you might want to use this meta tag to force IE compatibility mode for IE8 users:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Not sure if it was the best decision, but instead of diving into conditional comments, I’ve stripped out the header image which was floating on top of the background image (and needed to be lined up perfectly, which was part of the problem). As you can see, at this point, things are consistent across all browsers, however, I need to figure out how to position the top of the “bgwide.png” repeating image (transparent light blue) to start below the nav. All attempts to do this have simply moved the entire nav and sidebar down. Any other ideas on this approach? Thanks!

It’s good if you can get things to work without CCs. Maybe nest the content container as another div with the background image in it? Don’t know.

I got creative on it and didn’t need to use CCs. Ended up removing the header as well as the original/modified kubrickbgwide function that displayed the kubrickbgwide image from the top of the page (even on top of the background). To recreate the “kubrickbgwide effect” (if I can call it that), I set that image as a background for “narrowcolumn”, which I’m using for all the pages. This then required that I change the margins on the post text, comment box, and other things, but now it’s happy across all browsers. Well almost. This site uses a lot of transparent pngs and I’m noticed that while the “HITS- IE6 PNGFix” does make the pngs look transparent, ANY links/anchortext that sit on top of a png simply are not clickable. When I deactivate the plugin, the links work (at the expense of transparency.

IE6 has lots of trouble with pngs. Maybe there’s a way to get them to work woth code and not the plugin?: https://24ways.org/2007/supersleight-transparent-png-in-ie6

Thanks for the tip, looks like the “non-clickable” elements is an issue regardless of code vs. plugin iepngfix. You can’t have everything!