Position:absolute box dissapears in IE due to preceding float: any alternative fixes?

HTML & CSS
1

this IE 6 and 7 bug http://www.xantec.com.my/xblog/?p=88 where something that’s positioned absolutely which follows on from something floated, disappears… the suggested fix is to put an empty div between the floated and positioned absolutely elements. are there any other ways to fix this does anyone know? any ways that don’t involve adding an empty new html element?

thanks.

2

It depends on the situation but occasionally adding clear:both to the absolute element cures the bug (although it is actually meaningless to add clear:both to an absolute element). I’d need to see the live example to test out though.

The fullproof solution is to move the absolute element to the end of the current context and all is ok.

I documented the solution for IE6 about 7 years ago and updated it here:

3

hi Paul,

> It depends on the situation but occasionally adding clear:both to the absolute element cures the bug

didn’t work in this case unfortunately. worth a go though for sure.

> I’d need to see the live example to test out though.

right, ok:
rolfXesbutXchers.co.uk/test-ie-pos-prob.html (sorry, remove the two X’s).
it’s the #tagline under the logo which disappears in IE.

this is an older version of the above test-ie-pos-prob.html page:
rolfXesbutXchers.co.uk/contact (again, remove the two X’s)
i forget what’s been changed in detail, but the place where the problem is is basically the same i think: there’s a floated left element followed by an absolutely positioned element, and in that older version the absolutely positioned element appears fine.

thanks

4

Hi,

The only solutions is to either move the absolute element to the end of the current context (to the end of the parent Content) or to add a div between them as already mentioned.

Or alternatively change the way tagline is positioned like so.


#tagline
{
    font-size: .9em;
    font-weight: normal;
    float:left;
    margin:48px 0    0 -272px;
    overflow:visible;
    width:0;
    white-space:nowrap;
}

That should have exactly the same effect with any luck and won’t need to touch the html.

5

hi Paul,

well, a css solution certainly seems preferable to an html one. i shall give that a go. thanks very much for looking at that :slight_smile: