Here is a weird problem I faced today.
Taken this code:
code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test</title>
<style type="text/css">
#show p{
display:block;
position:relative;
background-color:#bef;
margin:0px;
padding:0px;
border:1px solid black;
/*height:.1em;*/
}
#show span.float{
float:left;
}
#show img{
border:1px solid red;
float:right;
}
</style>
</head>
<body>
<div id="show">
<p>
<span class="float">This is a text. This is a text. This is a text. This is a text. This is a text.</span>
<img src="." width="50" height="50" />
</p>
<p>
<span class="float">This is a text. This is a text. This is a text. This is a text. This is a text.</span>
<img src="." width="50" height="50" />
</p>
</div>
</body>
</html>
(Notice the commented block in the style zone.)
According to the specs, if I make the img and the span floating, they shouldn't count on the computed size of the parent p element, right? So the p elemen must be one pixel height, right?
So... fact is that this behavior is only seen in... ie6!!
Opera 7 and mozilla 1.2.1 DOES count the size of the floating elements when computing p size!
WORST: when I uncomment the commented style line,(notice the 0.1em that is ridiculous...) ie suddendly compute p size like opera and mozilla!
BUT whith a 1 pixel gap on the right!
THAT really bugs me...
If anyone have explanations/hack/aso for me, I will be glad to ear from you!
Tnx,
omera