Also, on the images in the right column, you set a bottom margin of 10px or so, and IE won’t recognize that unless you have a hard clearing element in the HTML (so if you want that, then remove the overflow:hidden; I just gave you, and put a clearing div before “#mainContent” closes
Ralphs won’t work :). (Sorry to say. It needs the clear/float/height removed (the height may not need to be removed but it couldn’t hurt))
Giving the width to the #mainContent div was the answer. Removing the float for that div broke the site in Firefox. Maybe it was the way I did it. Never underestimate my clumsiness with code. Turns out, though, that it works with float left in.
Anyone tell me why this is an issue in IE7? Sometimes I think IE7 is the next IE6 but that’s just my experience.
Hope you all have a great weekend. It’s been amazingly cold here in Southern Vermont this weekend. Struggling to keep warm.
Thanks for your amazing help and your wonderful community.
All the best,
luciano
PS If it still looks bad in your browsers, let me know. BTW, what do you guys like for browser testing?
I just took out all 3 (clear/float/height) because all 3 were not needed.
This was an issue in IE7 because if the parent of a comlicated structure (to IE7 this was because floats etc) it needs haslayout often otherwise you will get random float drops along with other weird absurdities that can happen :).
FF2+
Opera 9+ (or whatever you can get)
Safari 3+
IE6+ (IEtester for that)
Chrome
Konqueror
etc.
Basically get as many modern browsers as you can :).
Well, if I take the float:left/clear:left out of #mainContent, the first thing that happens is that my green background disappears in Firefox. If I take the floats out of #mainRight and #mainRight-inside then everything goes haywire. This is in Firefox 3.6.
OK, I see. But after removing the float from #mainContent and inserting overflow:hidden you have to remove the float from the #header h2. Then it works. I see that now.
I didn’t have to remove the float from the header :). You and I must be doing something slightly different. The code I posted was all I needed for consistant results :). All is fixed so it doesn’t matter.