Fixed position header in FireFox

[janetb]

Have the following code giving me what I need in IE6 and IE7, but Firefox won't center the header. If I take out the fixed position part, it centers, but the client wants it fixed. I'm not a pro, so I'd appreciate a little help before I bang my head against the wall... Any takers - many thanks?

[code]html,body {
padding:0;
height:100%;
background:#DAD2DA;
font: normal 14px Comic Sans MS;
margin: 0 auto;
}
html>body #wrap
{
height:100%;
margin: 0 auto;
border-left:solid 1px #336699;
border-right:solid 1px #336699;
border-top:solid 1px #336699;
}
#wrap
{ margin: 0 auto;
}
#header
{
margin: 0 auto !important;
position:fixed;
background-image: url(http://mydomain/banner.jpg);
width:760px;
height:130px;
z-index:10;
border-top:solid 1px #336699;
border-left:solid 1px #336699;
border-right:solid 1px #336699;
}
html>body #header
{
margin: 0 auto !important;
position:fixed;
background-image: url(http://mydomain/banner.jpg);
width:760px;
height:130px;
z-index:10;
}
html>body #header-content
{
position:relative;
float:left;
margin: 105px 0px 0px 340px;
}
#header-content
{
position:relative;
float:left;
margin: 105px 0px 0px 170px;
}
html>body #content-wrap
{...yada yada[/code]

[rangana]

Why do you have html>body in your CSS declaration.

Try deleting it.

One thing, this code:

Code: Select all

html>body #header-content
{
position:relative;
float:left;
margin: 105px 0px 0px 340px;
}
#header-content
{
position:relative;
float:left;
margin: 105px 0px 0px 170px;
}


I suppose they are the same, observe that you have set two different margins on a single div. It might cause the conflict.

..and if nothing works, could you provide a link for your page....

[janetb]

hiya rangana,
Thanks for the reply. I changed the code to the following, but it still didn't do anything about centering in Firefox with fixed position. Any other ideas? (the reason for the underscored margin is for IE6)

[code]html,body
{
padding:0;
height:100%;
background:#DAD2DA;
font: normal 14px Comic Sans MS;
margin: 0 auto;
}
#wrap
{
height:100%;
margin: 0 auto;
border-left:solid 1px #336699;
border-right:solid 1px #336699;
border-top:solid 1px #336699;
}

#header
{
margin:0 auto;
position:fixed;
background-image: url(http://www84.mahec.net/images/banner.jpg);
width:760px;
height:130px;
z-index:10;
border-top:solid 1px #336699;
border-left:solid 1px #336699;
border-right:solid 1px #336699;
z-index:10;
}
#header-content
{
position:relative;
float:left;
margin: 105px 0px 0px 340px;
_margin: 105px 0px 0px 170px;
}[/code]

[rangana]

Could you also wrap the html.

[janetb]

Rangana,
What do you mean "wrap" the html?
Janet

[rangana]

My apologies, I did'nt mean to get you confused.
"wrap" means, put your HTML code too..inside the

[ code ][ / code ]

in this forum.