Claude Needham wrote:
In tracing down a css issue I decomposed the html to the code below.
In IE6, IE8, Safari (pc), & Firefox 3.6.8 the page displays just fine.
In IE7, nothing shows. (ie7 in ietester program)
If the position: relative is removed from div1 the page works.
Or, if the float left is removed from div2 the page works.
Or, if either the clear or width is removed from div3 the page works.
There is something about this exact html/css combination that causes
the problem.
In fact, if one adds any element at all in div1 prior to div2 the page
will work.
Since this is a unique combination of elements and easily avoided, I
can finish my project no problem.
But, before filing this away under the heading of "unique oddities to
avoid in the future"
I wanted to check with others to see if there was a deeper
understanding to be gleaned or
a "best practices" type of lesson to be learned.
Regards,
Claude Needham
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title></title>
</head>
<body>
<div id="div1" style="position: relative;">
<div id="div2" style="float: left;">
<h1>Test Page</h1>
<p>At pro alii vidit utroque.</p>
<p>Vix in feugiat percipitur.</p>
</div>
<div id="div3" style="width: 50%; clear: left;">
<p>At pro alii vidit utroque.</p>
<p>Vix in feugiat percipitur.</p>
</div>
</div>
</body>
</html>
Interesting but not unusual. I would say that it is this bug with a
relatively positioned parent and floated child.
<http://www.satzansatz.de/cssd/rpfloat.html>
So this works,
*:first-child+html #div1 {
min-height:1%; /* IE7 hasLayout trigger */
}
but certain margins go missing. Another possible workaround is this.
#div3 {
width: 50%;
clear: left;
}
/* IE7 fix */
*:first-child+html #div3 {
width: auto;
margin-right:50%;
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
