deiter
02-24-2011, 04:59 PM
I'm trying to understand why the browsers IE, Mozilla & Chrome display absolute positioned text differently. In the example below I'm using absolute positioning to render two lines such that each is approximately centered horizontally and together, the two lines are approximately centered vertically as well.
There are two scenarios:
1) If you cut the code below and render in the browsers you'll find that all three browsers display it the same way, and as expected, so that's good.
2) Now if you wrap the text portions "BANNER TITLE" and "STATEMENT:" in paragraph tags like this <p>BANNER TITLE</p> and <p>STATEMENT:</p> you'll find that IE renders it the same way, but Mozilla & Chrome move the text well down the containing div and completely messes up the vertical format.
A couple of questions:
1) What is causing these differences between IE and Mozilla/Chrome in #2? Is it one of the well publicized IE css bugs? If so which one? It seems to me that IE is doing it right, but since two others do it the same way, that's likely incorrect. Why does Mozilla & Chrome move the text down?
2) What's the best way of dealing with the problem? I suppose I could just go with option option #1, but I'd really like to understand what's going on here. I was thinking that I could get 'round any IE bugs and have them at least all behave the same way by explicitly setting values for the p tags (that's what the commented ".StatementPos p" and ".TitlePos p" styles are for, but it made no difference; same result as #2 above.
Thanks
Deiter
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.banner
{
display: block;
position: absolute;
width: 163px;
height: 28px;
top: 0px;
left: 0px;
background:#FF0000;
}
.TitlePos
{
display: block;
position: absolute;
top:1px;
left:45px;
}
/*.TitlePos p
{
display: block;
position: absolute;
width: 163px;
height: 14px;
top:0px;
left:0px;
}*/
.BannerText
{
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
}
.StatementPos
{
display: block;
position: absolute;
top:12px;
left:50px;
}
/*.StatementPos p
{
display: block;
position: absolute;
height: 14px;
top:0px;
left:0px;
}*/
</style>
<title>Test</title>
</head>
<body>
<div class="banner BannerText">
<div class="TitlePos">
BANNER TITLE
</div>
<div class="StatementPos">
STATEMENT:
</div>
</div>
</body>
</html>
There are two scenarios:
1) If you cut the code below and render in the browsers you'll find that all three browsers display it the same way, and as expected, so that's good.
2) Now if you wrap the text portions "BANNER TITLE" and "STATEMENT:" in paragraph tags like this <p>BANNER TITLE</p> and <p>STATEMENT:</p> you'll find that IE renders it the same way, but Mozilla & Chrome move the text well down the containing div and completely messes up the vertical format.
A couple of questions:
1) What is causing these differences between IE and Mozilla/Chrome in #2? Is it one of the well publicized IE css bugs? If so which one? It seems to me that IE is doing it right, but since two others do it the same way, that's likely incorrect. Why does Mozilla & Chrome move the text down?
2) What's the best way of dealing with the problem? I suppose I could just go with option option #1, but I'd really like to understand what's going on here. I was thinking that I could get 'round any IE bugs and have them at least all behave the same way by explicitly setting values for the p tags (that's what the commented ".StatementPos p" and ".TitlePos p" styles are for, but it made no difference; same result as #2 above.
Thanks
Deiter
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.banner
{
display: block;
position: absolute;
width: 163px;
height: 28px;
top: 0px;
left: 0px;
background:#FF0000;
}
.TitlePos
{
display: block;
position: absolute;
top:1px;
left:45px;
}
/*.TitlePos p
{
display: block;
position: absolute;
width: 163px;
height: 14px;
top:0px;
left:0px;
}*/
.BannerText
{
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
}
.StatementPos
{
display: block;
position: absolute;
top:12px;
left:50px;
}
/*.StatementPos p
{
display: block;
position: absolute;
height: 14px;
top:0px;
left:0px;
}*/
</style>
<title>Test</title>
</head>
<body>
<div class="banner BannerText">
<div class="TitlePos">
BANNER TITLE
</div>
<div class="StatementPos">
STATEMENT:
</div>
</div>
</body>
</html>