IE7 Bug breaks my page

HTML & CSS
1

Hi,

On this site, http://www.hardpackvt.com, I have an IE7 bug that drives the photos in my right floated div down under the text on the inside pages like this one: http://www.hardpackvt.com/storage.html . Any ideas as to why this is happening?

Thanks,

luciano

2

Try adding a width to .oneColFixCtrHdr #mainContent


.oneColFixCtrHdr #mainContent {
  width: 100%;
}

I would probably go further, and change things to this:


.oneColFixCtrHdr #mainContent {
  width: 780px;
  overflow: hidden;
}

and remove the float on that div.

3

Hi, remove the height, and remove clear/float on it, and add overflow:hidden;


.oneColFixCtrHdr #mainContent{float:none;height:auto;clear:none;overflow:hidden;}

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))

4

Hi all,

Thanks for the help. Problem solved, I think…:wink:

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?

5

It didn’t break the site for me :).

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 :).

6

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.

luciano

7

If you take float/clear out then YES the background will disappear

THat’s why I gave you overflow:hidden; :slight_smile:

8

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.

luciano

9

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.