Damian probably gave you your answer, but I'll also say that if you review the original documentation from http://www.positioniseverything.net/easyclearing.html for the code you're using, you'll see that they recommend conditional comments to trigger hasLayout. In your case, in the head of your document you should add:

<!--[if IE]>
<style type="text/css">
  #NameofContainingDiv:after {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */

Either way, the end goal is the same.

On Jan 23, 2009, at 5:15 AM, Damian Edwards wrote:

Most likely a lack of hasLayout triggers or layout context changes, or both.

For the coloured boxes, add overflow:hidden to the divs with classes catalougeMid and subscribeMid. This will force them into a new layout context and in turn expand the container to contain all elements. If you want it to apply to IE6 and IE7 only, use a selector hack:

* html .catalogueMid, * html .subscribeMid { overflow: hidden; } /* IE6 Only */ *:first-child+html .catalogueMid, *:first-child+html .subscribeMid { overflow: hidden; } /* IE7 Only */

I’d have to fire up a VM to look at the IE6 issue and it’s late J
Damian Edwards
Microsoft MVP | ASP/ASP.NET
Readify | Senior Consultant
M: 0448 545 868 | E: damian.edwa...@readify.net | C: damian.edwa...@readify.net | W: www.readify.net

From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Henrik Madsen
Sent: Friday, 23 January 2009 19:37
Subject: [WSG] CSS IE6/7 - what a surprise

HI all,
I'm hoping there's a simple solution to my two problems.
All looks fine in Mac browsers x5 and IE8b2 (according to netrenderer) but not in: IE6 - Mysterious margins are appearing between the header and the top menu and in both coloured boxes in the right hand column of the main content. IE6+7 - the coloured boxes are not 'expanding' to contain the content (in this case a floated image in both) I found this CSS as an alternative to a clearing div and it seems to fix things in other browsers - except those IE's:

#NameofContainingDiv:after {
                clear: both;
                content: ".";
                display: block;
                height: 0px;
                visibility: hidden;

Would anyone be able to have a look?
Here's the link:
Any other thoughts, comments, suggestions - always appreciated.


Henrik Madsen

List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org

Reply via email to