PDA

View Full Version : IE: Div only appears when I rollover a link



The Iconoclast
Nov 17th, 2006, 10:47 PM
Image of the bug: http://www.theicono.com/storage/sadbug2.gif
Actual bug on my site: http://theicono.com/ (Only in IE)

Everything returns to normal if I rollover the 'Continue Reading...' link or any of the links in the Recent posts div.

Unusually, it almost-becomes-normal (http://www.theicono.com/storage/sadbug3.gif) (except for the space below the div and the striped BG) if I add blockquote { display: none; } I am using IE 6.0.2, Windows XP SP2

Thanks in advance.

EDIT: You may need to clear your cache and refresh to view the bug in IE. I've updated with a better screenshot.

_Aerospace_Eng_
Nov 17th, 2006, 11:06 PM
Sounds like you have a case o the IE Peekaboo bug. Read this: http://www.positioniseverything.net/explorer/peekaboo.html

The Iconoclast
Nov 18th, 2006, 12:35 AM
First off, thanks very much for the reply!

To be honest, I can't make heads or tails out of that explanation. I tried appending the following to my CSS:


/* Fixing the peekaboo */

div#wrapper
{
position: relative;
}

div#content
{
position: relative;
}

div#recent-list
{
position: relative;
}

div.entry
{
position: relative;
}

div#footer
{
position: relative;
}

div#sidebar
{
position: relative;
}

div.post
{
position: relative;
}

But to no avail. :(

_Aerospace_Eng_
Nov 18th, 2006, 12:40 AM
Don't do it to all of them at the same time. That often causes more problems. Do one element at a time. The idea is to add position:relative; to the div that isn't showing up not everything.

The Iconoclast
Nov 18th, 2006, 01:25 AM
I'm sorry man, but I'm stumped. I've tried adding position: relative; to my main divs one by one.

And then I've tried putting position: relative; to my recent-lists div trying the other divs one by one.

And then I tried height: 1%; on the #recent-list div, but none of this is having any effect.

I've used relative positioning in a lot of places in my site - do you think that this is somehow interfering with the position: relative workaround? If I changed them to negative margins, would that help?

_Aerospace_Eng_
Nov 18th, 2006, 02:21 AM
Change this

</div>
</div>
<div id="footer">
to this

</div>
<div class="clear">&nbsp;</div>
</div>
<div id="footer">
and add this to your CSS

.clear {
clear:both;
font-size:0;
line-height:0px;
}

The Iconoclast
Nov 18th, 2006, 03:05 AM
I have no idea how you came up with that... o_o (I'd be interested to know, but it's totally okay if you don't have the time)

But it worked! Thank you so much. I really appreciate the help - I visited 3 forums before this one hunting for the answer; you really know your stuff.

_Aerospace_Eng_
Nov 18th, 2006, 08:50 AM
Mainly trial and error but I've had a similar issue before. IE does funny things when you don't actually clear your floats.