...

View Full Version : FireFox bug with positioning within a centered container



fimjox
06-13-2010, 08:11 AM
CSS specifies that if you use an absolute position within a container that has relative positioning that the absolute position is actually relative to the 0,0 position in the parent container.

FF uses the absolute position to the 0,0 corner of the screen, not the 0,0 in the container it is in.

I made a real simple test page that shows how FF is screwing up (works in IE & Chrome).
It puts a red square offset within a black square that is centered on the screen.

This is the super simple site: (works in IE, Chrome, but not FF)
http://ledthings.com/am/test.html

This is the simple source:
<html>
<head><title></title>
</head>
<body>
<center>
<table bgcolor="black" width="400" style="position:relative;">
<tr><td height="400">
<table width="50" bgcolor="red" style="position:absolute; top:50px; left:50px"><tr><td height="50">
</td></tr></table>
</td></tr></table>
</center>
</body>
</html>

Somebody please

_Aerospace_Eng_
06-13-2010, 08:26 AM
It works if the element that is position:relative; is also a block-level element. A table is not by default. By the way tables are NOT for page layout. Read the link in my sig about it.


style="position:relative;display:block;"

fimjox
06-13-2010, 10:08 PM
Thank you. Sucks about tables not working cross-browser
I thought for sure I tried this before, guess not correctly

This code works:
<html>
<head><title></title>
</head>
<body>
<center>
<div style="position:relative; background-color:Black; width:400px; height:400px;">
<div style="position:absolute; top:50px; left:50px; background-color:Red; width:50px; height:50px;" />
</div>
</center>
</body>
</html>

_Aerospace_Eng_
06-13-2010, 10:44 PM
Don't use <center>, it is deprecated. To center a block level element use margin:auto;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum