Why position: relative renders differently in IE6 and FF?

In reference to this page:

http://www.celebration.org/cgi-bin/p...hineconfig.txt

I have it setup so that a "content" div contains the form and
everything overlayed on the image. This div is positioned relatively
within the parent div (which houses the background image).

In IE6, things look the way I'd like them to look. The "content" div
is centered on the screen. However, in FF the form is way to the left.
It seems FF is calculating it's position relative to the outermost div
as opposed to it's immediate parent.

Am I missing something here?

Thanks,
-A

alfred.taylor (AT) gmail (DOT) com wrote:

I have it setup so that a "content" div contains the form and
everything overlayed on the image. This div is positioned relatively
within the parent div (which houses the background image).

In IE6, things look the way I'd like them to look. The "content" div
is centered on the screen. However, in FF the form is way to the left.
It seems FF is calculating it's position relative to the outermost div
as opposed to it's immediate parent.

FF is doing what you asked. div#content is placed exactly where it

should be relative to div#background.
If you wish to center div#content, use an appropriate method:
margin-left: auto;
margin-right: auto;

BTW you are using XHTML syntax in a HTML 4.01 Strict DTD.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)