Some parts in the page display abnormal under IE 7 but OK under firefox. how to corrcet it? and what’s the reason for those abnormal displays under IE .
I think much of your issue just stems from needlessly overcomplicated and wasteful HTML – but I say that to just about every post here on Sitepoint. CSS is only as good as the markup it’s applied to, and your markup has easily twice as many div and five times as many classes assigned in it as necessary.
Though it’s hard to say what the proper markup would be with the page missing much of it’s content… like I’m assuming you’d have a h1 or h2 somewhere before those h3? Makes no sense for those to be H3 otherwise.
You aren’t doing ANYTHING there which warrants the presence of DIV – AT ALL. Like… nothing… and all those “navbutton” and “navhead” – wasted pointless code… if they all get the same class, they don’t need a class, use the PARENT as the hook.
… and I’m not even sure I’d need the spans anymore. With all those endless “div for nothing” I’m not even sure where to start trying to figure out where/how IE7 is messing up.
Though if those out-of-place elements are absolute positioned, throw a haslayout trigger (zoom:1 good as always) on their parent. That MAY fix it.
I didn’t get time to look deeply at the misplaced divs but its most likely as Jason said the lack of haslayout in those endless nested divs that don’t really need to be there.
If you have a div wrapper that holds complicated content then the chances are that it will need haslayout in ie6 (and quite often ie7). It’s just another reason why it is important that you don’t just add unneceesary mark up. Adding zoom: 1.0 is the easiest way to trigger haslayout but don’t overuse it either.
A quick fix may be just to add a right margin to the left column instead.
#left{margin:0 10px 0 0;}
However a re-write of that section would be advised along the lines of what Jason was saying above
The misplaced element in your footer is that in IE floats must always come first before the content that needs to wrap and your end corner would need to be at the beginning of the line.
However I would have put your anchors in a list and used the ul for the right background corner image and the parent div for the left corner image instead of those two floats.
I didn’t see that you had added the code above anyway so the IE8 problem must be an original flaw in the design.
I think you need to re-think what you are doing as it doesn’t look like a viable layout. If you want three columns then they need to be 3 columns and not individual elements here and there. The columns would also need to be the same width all the way down.
You can’t really have overlaps like you have without creating a rigid and inflexible layout. What happens if the boxes are longer or shorter than shown? They won’t fit in that context unless you are always going to keep the same height.
Just create 3 columns at the appropriate width and then stack the content inside without floating. This will be much more robust and usable than what you are attempting here.
