Forum Moderators: not2easy
It is properly centered in IE but not in Firefox.
(IE)
in body{} style
text-align:center;
brought the div called #bodywrap to center
and since it's absolute i had to do -half_width the left margin.
but for (Firefox)
I noticed, it's not treating the div as text,
so the div is margined to the left off the screen.
I need the #bodywrap to be position:absolute;
because of all the layers that are inherited to it.
could somebody please help how to place this div centered
both in IE and Firefox? keeping the position:absolute;
Normally, to position something center, it basically floats. You currently have:
#bodywrap{
margin-left:-393px;
position:absolute;
z-index:1;
height: 595px;
}
However, to esily accomplish cross-browser centering, it should read:
# bodywrap{
margin: 0 auto;
padding: 0;
width: 786px; /* I took this from your table width. A width is necessary whether px, % or em */
text-align: left; /* IE Hack */
height: 595px;
}
Further, inner elements are generally "floated" within this container. Additional, things like align="left" are not acceptable in XHTML and could cause a problem. You should use a style, e.g. style="text-align: left;">. I suggest you validate your page. Go here: [jigsaw.w3.org...] for CSS (I ran it, no errors) and here: [validator.w3.org...] for HTML (I ran it and it has 76 errors). And put you </head> tag aboe the <body> tag. I do not mean to sound critical, but you have some CSS before the </head> and some after, before the <body> tag.
Last, IMHO, absolute positioning can be a pain and z-index is not really necessary if everything is at the same level.
Otherwise, the design looks nice.
Marshall
#bodywrap{
margin-left:-393px;
position:absolute;
left: 50%;
height: 595px;
}
You can read about a similar problem, and the same solution here:
[webmasterworld.com...]
the reason why i need the container to be absolute is that
all the other layers' top and left coordinates are set up
with respect to the container layer. which in my case #bodywrap
is there a way to center an absolute layer both in IE and FF?
i've managed to do it in IE however i couldn't do it in Firefox.
