Hello,
This is my first post. I've read the policies, searched the archives and
google'd, so I hope no one gets upset if this is a duplicate. I've
created a trivial example of my problem:
CSS:
#outer
{
: 10px;
: 10px;
: 1px solid blue;
}
#outer div
{
: 99%;
: left;
top: 5px;
bottom: 5px;
}
{
: 1px solid blue;
}
#outer label
{
: left;
}
#outer input
{
: right;
: 49%;
}
.clear
{
: both;
}
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>Enter the title of your XHTML document here</title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id="outer">
<div>
<label id="lf1" for="f1">A very long label
indeed: </label>
<input id="f1"></input>
</div>
<div>
<label id="lf2" for="f2">A very long label
indeed: </label>
<input id="f2"></input>
</div>
<div>
<label id="lf3" for="f3">A very long label
indeed: </label>
<input id="f3"></input>
</div>
<br class="clear" />
</div>
</body>
</html>
The problem is that with IE6/XP the first float element is placed above
the containing div. The div correctly expands and encloses the remaining
two floats. FireFox shows the div enclosing all three floats. If I place
an empty element, such as <p /> above the first float IE will display it
correctly. Is this a known bug or do I not understand "float theory"
correctly.
Thanks
Steven Kilby
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
