...

View Full Version : Browser differences displaying text using absolute position



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>

quartzy
02-24-2011, 06:14 PM
Firstly, I believe that you should use lowercase for css. Unless you use camel code like .mainContent
Secondly have you added margin: 0; padding: 0; to your divs.

teedoff
02-24-2011, 06:48 PM
Didn't you already post this same exact question just a day or so ago? lol Which I think someone gave you an answer.

deiter
02-24-2011, 10:08 PM
Indeed you are right! I received an email admonishing me for posting in the wrong forum. There was no indication that a useful response had been left though, so I figured it had just been removed so I re-posted.

The solution can be found in the original thread (http://www.codingforums.com/showthread.php?p=1058105).

Sorry for all the confusion... How to annoy the entire forum with just one problem!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum