IE display fix for the launchpad.net site

["Philippe Verdy" <verdy_p@xxxxxxxxxx>]

Philippe Verdy wrote:
> Envoyé : samedi 27 octobre 2007 19:08
> À : 'Christian Robottom Reis'
> Cc : launchpad-users@xxxxxxxxxxxxxxxxxxx
> Objet : RE: Welcome. some problems with Launchpads (OOPS-664C1133...)
> 
> I wrote:
> > After looking at the code, this seems related to a bug in the website
> CSS
> > stylesheet:
> >
> > http://launchpad.net/+icing/rev3/style.css
> > line 70:
> >
> > #maincontent {
> >   ...
> >   display:inline;
> >   float:left;
> >   position:relative;
> > }
> >
> > A "display:inline" element cannot float left... This should be
> > "display:block". And if it is floating, it can't be positioned at
> relative
> > position. There's some contradiction, and the result is unpredictable,
> as
> > one of these properties must be ignored (normally the last option wins,
> > but
> > this is not guaranteed).
> >
> > Changing it to "display:block" should solve the problem.

There's another problem in the stylesheet:
The whole content area is followed by <div class="clear"></div> whose
purpose is normally to skip the area used by floating a floating element:

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

However you have overconstrained it by forcing it a height of 0, and even
requesting to hide everything that appears below this height! IE computes a
default height for the clear by looking at elements that are floating in the
margins, and getting their maximum height to compute the height to skip. But
then "height:0" removes this computed value.

This is not correct behaviour of IE according to CSS specs, because the
cleared element should only have a computed height of 0 for the in-flow
content, but still not cancel the height of floating elements within the
in-flow-content, that remain detached, just positioned (anchrored) according
to the starting position of the block where they are attached, and that
should still affect the way the inline elements are placed: IE constrains
the height of the element containing a cleared element, and if the cleared
element has "overflow:hidden" even instructs the current element to have
everything below the current vertical position to be clipped (even if the
height of the container element is not affected).

The current block where this skip appears has is height computed by ignoring
the floating elements, it just uses the computed height of the current flow,
which should then be terminated by a non-null height clear to produce the
designed effect of skipping the floating elements.

As the result this completely hides the floating element: the flow contains
nothing else than floating elements, and so its computed height becomes 0
(and it will not overflow, as instructed)

Remove the "height:0" constraint here. Its purpose is to style <br/>
elements that should be replaced by <div class"clear"></div> without the
other unnecessary kludge for Opera (class="clearfix") which does not work
correctly as well, as it depends on the rare support of the "content:" style
and of the ":after" pseudo-selector and of the "display:inline-table" (all
of them not supported for now in IE) in:

.clearfix:after { /* use class="clearfix" whenever floats should be enclosed
*/
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {display: inline-table;}
/* Work around float bug in MSIE for Windows, while hiding from MSIE for Mac
\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}

As a general rule, avoid <br/> to clear after floating elements. Just use:
<div class="clear"></div>

And write:

.clear {
  display:block;
  clear:both;
}

This is MUCH enough for all browsers.
If you want to style <br> with clear (in case it still appears) without them
to have a minimum vertical height, make its default vertical height (1em)
conditional:

.clear, .visualClear,
br[clear=all]	{ display:block;clear:both; }
br[clear=left]	{ display:block;clear:left; }
br[clear=right]	{ display:block;clear:right; }
br { display:block;clear:none;height:1em; }

You don't need any ".clearfix" kludge... so remove this unnecessary part at
the beginning of your "style.css" file:

[quote]

/* === Stuff browsers should do but don't === */

.clearfix:after { /* use class="clearfix" whenever floats should be enclosed
*/
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {display: inline-table;}
/* Work around float bug in MSIE for Windows, while hiding from MSIE for Mac
\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hiding from MSIE for Mac */
.visualClear {display: block; clear: both;} /* XXX Remove this */

[/quote]