Another IE7 CSS problem

[kazzyOK]

Dear experts,

I am scratching my head having an issue with IE7. I recently deployed a website for my friend and received some feed backs from other people regarding the site not working with IE7.

Orlando Recycled Materials - Recycled Concrete Aggregate, Asphalt, Stone, Top Soil

Before deployment, I checked with IE6 and Firefox. Obviously I did not test with IE7!
Basically only on IE7, texts flow over a picture and tried these methods:

<br class="clear" />
{ clear:both; }

and did not work. Could anyone give me some pointers, please?


Best regards,

KazzyOK

[OpticBurst.com]

I use IE8 and see no problem.. Also tested in Firefox and looks the same.

[kazzyOK]

Thank you OpticBurst.com!

That means this problem is only for IE7, then.....

[OpticBurst.com]

I would assume the problem is just IE7.

I haven't tried Opera or Safari. I would not really worry about them yet. Most users use IE and Firefox.

[kazzyOK]

Basic structure of the site is like this:

<div #main>
<div #header>
<div .content>
<img> // this is the crusher picture -------------------------------
<div class="clear"></div>
</div> // end of .content
</div> // end of #header>
<div #middle>
<div .indent>
<div .column1> // this is where those texts are -----------------
</div> // end of .column1
</div> // end of .indent
</div> // end of #middle
</div> // end of #main

So some how, #middle clashes into #header....

[weegillis]

Just throwing this one out there...

<div>
<div>
html here
</div>
<div class="clear"></div>
</div>

Notice the clearing div is in the lower layer. The added structure required for this method makes clearfix a viable alternative.

[kazzyOK]

Thanks weegillis!

But having another "clear" class there did not help....

[spiderbait]

Hi there,

I've got a fix for you. It's just a simple one I worked out for myself which works in your particular situation, however the source of the problem may be a particular IE7 bug for which a global fix is available.

But at least this one works for the immediate problem as far as I can tell.

Add this to the head of your documents:

<!--[if IE 7]>
<style type="text/css">
#header_tall #main #middle {margin-top:213px;
}
</style>
<![endif]-->

That should do it. I hope it helps.

FYI, I selected 213px because that's the height of your picture. But you can obviously change that margin to get the margin and appearance you have in other browsers.

[weegillis]

Originally Posted by kazzyOK

But having another "clear" class there did not help....

Actually, I included it here to demonstrate the additional markup required to contain the clearing div. Clearfix is better contained, and uses less markup.

One thing about IE and floats: position:relative property applied to the selector with the float property makes all kinds of problems go away, including the phantom width problem.

You might be able to remove the float from the header by giving the header a fixed height and relative position, then absolutely position the two float items, logo and RSS.

[weegillis]

Originally Posted by kazzyOK

I am scratching my head having an issue with IE7.

This is showing to be quite stable in IE, FF Chrome and Opera

(index.html)
line 21, 36, 43 & 45 : remove clearing divs

Leave the one at line 70.


add below #main in _style

/* add */
#main,
#header { position: relative; }

/* org
#middle { width:100%; }
*/
/* rev */
#middle { width:100%; position:relative; padding-top:190px }

The other browsers seem to ignore the top padding without any hacking. Perhaps somebody can help explain this finding?

This might be overkill...

/* org
#header_tall { background:url(images/header_tall.gif) top repeat-x; }
*/

/* rev */
#header_tall { 
 background: transparent url(images/header_tall.gif) repeat-x 50% 0%;
 position: relative;
}

Absolutely positioned elements within this block will not affect document flow.