I’ve posted to this forum twice before about a particular site I’m working on and the troubles I’m having with IE6/7. Last time, some suggested that I start over from scratch and, in a way, I did: Activities For Kids
My markup now validates as much as it can (the validator is unhappy with wordpress on a couple points, but I’m willing to live with that and I don’t think it’s having a major impact).
All of my problems seem to reflect the kind of thing that is fixed with hasLayout, but I’ve tried applying it to several classes and I’ve seen no reaction so far. I plan to continue trying out classes, but perhaps I’m taking the wrong approach. Any advice would be appreciated.
Hmm, the site is not perfect in Firefox either, things being a bit bunched up. Really, the lesson here is to test the site in each browser as you build it, step by step, so that you can spot issues and deal with them as they arise.
The first thing to address is the header section. The layout for that needs to be re-thought. Using z-indexes like that is asking for trouble. You should be able to place those elements together without needing to layer them.
Should I methodically remove the z-index from the CSS, testing along the way, to see if that fixes the problem? I myself wondered about it’s use, as I did not modify the theme in any way that requires layering.
EDIT: There were 4 instances of z-index in my main CSS. I commented the out and saw no difference.
Ah yes, sorry: as there’s not position set on those elements, the z-index does nothing.
The first thing I would do is remove height: 100px on the #access div. If anything, it might be better to set a height on the header itself.
I now see that I crossed the streams on how the divs in the header were intended to be used. Switching the height from the access to the header solved the problem of the whitespace below the nav, however I’m still having trouble getting the header image (anchor with a background-image) and the search box (a WP widget area with a search box dropped into it) to play nicely.
And of course nothing has changed with the sidebars.
EDIT:
I’ve further untangled the mess I made of the header and now the header image sits next to the search box. I still have an abnormality in IE6 where the searchbox’s height is increased, creating a whitespace under the header image. I think that playing with the height of divs that are apart of the template but extraneous to my purpose (I know that’s cringe-worthy for some) will fix that.
Everything from the navbar up now works perfectly in IE thanks to that little pointer. Do you have any suggestions on where I might start with getting the sidebars back in order?
(I intended to add this as an edit to my previous post, woops.)