PDA

View Full Version : CSS IE Bug: absolute positioned div disappears


mutaweb
02-15-2007, 04:50 PM
Hello everybody,
this is my first post. Excuse me for my bad English and any other mistake regarding netiquette and forums.
I have been googling around for a solution for more than one hour, but I didn't come up with anything useful. I've tried the holly hack and other fixes but to no avail.

This is my situation: an absolutely positioned <div id="lingue"> contains the language selection toolbar for my site. The positioning is relative to a <div id="wrap">. A very common situation indeed. You can see it here (http://www.aroundtheworldinalotofdays.com/).
My page:
<div id="wrap">
<div id="testa"></div>
<div id="lingue" class="piccolo" align="left">
<img src="img/england.gif" alt="english" align="bottom"/><a href="http://www.aroundtheworldinalotofdays.com"><span style="margin:0 5px;">english</span></a>
<img src="img/italia.gif" alt="italiano" align="bottom"/><a href="index.php"><span style="margin:0 5px;">italiano</span></a>
</div>
[...]
</div>

My CSS:
#wrap {
width:785px;
margin:0px auto; /*center hack*/
text-align: center;
position: relative;
}
#lingue {
position: absolute;
left: 161px;
top: 102px;
width: 250px;
height: 10px;
}

FireFox shows the language div correctly.
IE6 and IE7 don't show the div at all. Well, the interesting part is in that you might see the div at times, but most of the times it doesn't show.
It was very impressing for me to watch the language flags appear and disappear while hitting the F5 key on IE.
I have absolutely no clue on what this could be and this is why I am asking you for help. I have only found out that setting width:100% to the wrap div fixes the problem (but it screws my layout).
I have a feeling that this behaviour is a consequence of something very silly mistake in my layout. Please help!

Thank in advance,
MutaWeb.

Excavator
02-15-2007, 05:03 PM
Hello mutaweb,
IE7 and FF2 both show your #lingue div for me. There is a lot of errors on this page, the validator shows 62. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.aroundtheworldinalotofdays.com%2F)
Fixing these can only help.

mutaweb
02-16-2007, 10:31 AM
Hello Excavator,
Thanks for your time. You were right about the html errors. I fixed them, but the problem is still there.
The language div doesn't always show in IE6 - hit refresh key to see the magic. Don't know about IE7, ignore my previous post about IE7.
Anybody has a clue on what's going on here?
Cheers,
MutaWeb.

koyama
02-17-2007, 12:44 AM
Can you fix the link? No database connection. I would like to see your page.

mutaweb
02-19-2007, 04:52 PM
It was down for manteinance for a few days. Now it is working again.
MutaWeb

koyama
02-20-2007, 03:26 AM
You are affected by an IE bug where an absolutely positioned element may disappear when they it is adjacent to a float.

Take a look at this article:
IE/Win: floats and disappearing absolutely positioned divs (http://www.brunildo.org/test/IE_raf3.html)

As of IE7 it seems that this bug has only been partially fixed.

To solve your problem, you may try to put in a dummy separator div:

<div id="wrap">
<div id="testa"></div>
<div id="lingue" class="piccolo" align="left">
<img src="img/england.gif" alt="english" align="bottom"/><a href="http://www.aroundtheworldinalotofdays.com"><span style="margin:0 5px;">english</span></a>
<img src="img/italia.gif" alt="italiano" align="bottom"/><a href="index.php"><span style="margin:0 5px;">italiano</span></a>
</div>
<div></div>
[...]
</div>

mutaweb
02-20-2007, 11:08 AM
Thank you very much koyama.
The dummy div trick solved the problem.
The problem falls in the "Example 1" category of the article koyama pointed out.
Cheers,
MutaWeb