Forum Moderators: not2easy
The use eg the following:
CSS:
#p123 {position: absolute; top: 100px; left: 50px;}
HTML
<span id="p123">13 November 2007</span>
For each element on the page the use a construction like this, so a lot of CSS elements.
In FF this is rendered as:
13
November
2007
In IE this is rendered as:
13 November 2007
For FF this means that the text partly overlaps with the line(s) below. Changing the font size doesn't help.
Does anybody here knows how an absolutely positioned SPAN should be rendered?
Thanks,
Arjan den Boer
I tested this code in IE7, Firefox 2 and Opera 9....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
#p123 {
position: absolute;
top: 100px;
left: 50px;
}
</style></head>
<body><div>
<span id="p123">13 November 2007</span>
</div></body>
</html>
If you say that Firefox presented it differently, then we would need to see the full code that produced the effect.:)
birdbrain
Thanks, you're right. I will check tonight at home what is different in the HTML of the mail from my example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testpage</title>
<meta content="text/html; CHARSET=iso-8859-1" http-equiv="Content-type" />
<style type="text/css">
<!--
span {padding:0px;position:absolute;}
.FT0 {font-family:"sans-serif"; font-size:13px;}
.PS1 {left:417px;top:117px;}
--></style>
</head>
<body>
<span class="FT0">
<span class="PS1">18 November 2007</span>
</span>
</body>
</html>
Because of the SPAN with class FT0, although the class can be omitted, problem occurs anyway, the inner span will exhibit the behavior described above. If the outer SPAN is removed it will display as expected in FF, same as in IE.
Is there any explanation for this?
[edited by: Xapti at 7:30 pm (utc) on Nov. 14, 2007]
So as far as I understand, if you don't have width (or right) set, the browser could put line breaks anywhere where it's possible - such as at (breakable) spaces - or only where specified (using <br>). The reason it shrinks only with another span wrapped around it, is because that containing span has zero-width. To accommodate a large object into a small one (or zero-width), it would need to make a line break at every possible spot. The reason IE doesn't do this may be some form of bug, or it may be a random "feature" (quirk).
The solution I mentioned could be implemented for your own machine (if you like using firefox) by using special style settings. A firefox extension like "Stylish" will do this.
[edited by: Xapti at 1:07 am (utc) on Nov. 16, 2007]
Arjan
