...

View Full Version : Different browser behaviours with absolute positioning and the p tag



deiter
02-24-2011, 05:00 AM
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 completly 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 publicised 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

[code]
<!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>
[\code]

venegal
02-24-2011, 10:01 AM
All browsers use default stylesheets that you can override with your custom stylesheets. Usually <p> elements have a default 1em top and bottom margin, and that's what you are seeing there. IE7 (why are you still using that?) apparently doesn't, and that's why it looks different there.

The usual way to deal with those differences is to load up a reset stylesheet (just google that and you will find plenty of information) before adding any custom styles, so you can start with a clean slate in all browsers. After resetting all default styles, you will have to define them manually, though, so, for instance, <p> will still have a bottom margin, or <strong> will still show bold text.

This is obviously a CSS problem. I moved the thread.

Arbitrator
02-24-2011, 11:35 AM
It's worth noting that the renderings are the same between Firefox 4 Beta 11 and Internet Explorer 9 Release Candidate (1); they both exhibit the mentioned "Mozilla/Chrome" rendering.

The mentioned issue can be ameliorated by simply adding #TitlePos p, #StatementPos p { margin: 0; } to your style sheet.

deiter
02-24-2011, 10:57 PM
OK thanks guys that explains it. I confirmed that adding { margin: 0; } fixes the problem and they all get rendered the same way now, with the desired layout.

Thanks and sorry for posting in the wrong forum!

P.S> I'm using IE 8.0, not IE 7.0... Doh!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum