Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I ran into this bug today and was intrigued. I'm not entirely sure (but confident enough to post) that this isn't an example of something that's already been discussed, but I've set up a minimal test case to dissect, etc. Here's the url:
http://eingko.net/examples/ie7_bugtest01.html
Here's the scenario: There are two consecutive DIVs followed by an HR, the first DIV is floated to the right, the second DIV is positioned absolutely, and the HR is set to "clear: both". When viewed in Internet Explorer 5, 6, and 7 (ironically, the Macintosh version works properly), the first DIV is not visible; Opera, Safari, and Firefox all render the invisible element (and they should).
If ANY one criterion is changed (as aforementioned), everything works perfectly. Thoughts, anyone? -
Sounds like the peekaboo bug, maybe?
-
It can't be the peekaboo bug, I thought so too at first. The peekaboo bug is fixed in IE7, but this one isn't. The trigger for this bug is similar to the peekaboo bug, but it's actually different because this one requires an absolutely positioned element to be triggered whereas the peekaboo bug doesn't.
-
Wow that's weird, but what else should we expect from IE? I played around with it for a few minutes, and I noticed that if you place a <br /> before the <hr /> it takes care of the problem (in IE6 at least), but I'm not sure of how to fix it with CSS.
-
I ran some more tests, and it looks like it doesn't have to be DIVs it can be paragraphs and headings as well (block-level elements, basically).
-
HI, just changed #b position:absolute to float:left and looks the same in IE and FF, here it is:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Internet Explorer Bug Test</title>
<style type="text/css">
hr {
clear:both;
}
#a {
float: right;
}
#b {
float: left;
}
</style>
</head>
<body>
<div id="a">test</div>
<div id="b">test</div>
<hr />
</body>
</html> -
Well, if you change #b to:
float:left
or
position:relative
If you change #a to:
float:right
Or if you even change the source order so that the HR comes before #b it fixes it. I know how to resolve it, I just don't understand why it even happens.
1 to 7 of 7