Centering H2 on Firefox

Using Background Image

[hexdj]

I have the following CSS:

#home_page {text-align:right;}

#home_page h2 span {display: none;}

#home_page h2 {background: url(images/conductor.gif) top left no-repeat; width: 440px; height: 62px; margin-top: 80px;}

And my HTML looks like this:

<div id="home_page">
<p class="quote">
Yadi yadi yada, blah blah blah
</p>
<h2><span>Conductor Home</span></h2>
</div>

As you can probably tell I don't want the actual words "Conductor Home" in my H2 tag to be shown, instead I want the background image to be what people will see. The problem is that I want this to be centered, and IE seems to understand that, but for some reason firefox just keeps puting my #home_page id on the far left of my contents box.

Can someone give me a hand please?

THANKS!

[zackattack]

Hi hexdj

That is because your background value is set to top left, you need to change this to:

#home_page h2 {background: url(images/conductor.gif) top center no-repeat;

Extra:
Also you may find later you get stuck using background positioning rules if you dont start now by declaring the horizontal position first, then the vertical. This is fine when using key words but later if you use % or px on any future background CSS positioning you will find that the first value is always recognised as the horizontal rule. So I would get in the habit now and write it like this:

#home_page h2 {background: url(images/conductor.gif) center top no-repeat;

ZA

[antidote45]

Or...

You can keep the background specs as you have it and add this:

h2 {
margin: auto;
}

[JTKgy]

I'm wondering the same thing.
After reading many threads on this forum.
Many tend to think that Firefox does this because it
correctly does not apply "text-align" attributes to
child block-level elements.

But doesnt CSS specification says:
"Since 'text-align' inherits, all block-level elements inside the 'DIV' element with 'CLASS=center' will be centered."

[w3.org...]

[zackattack]

Hi hexdj

Not sure how wide your background image is, if it is the h2 width you specified then you could use margin:auto; however given that you are trying to positon a background image then it would make sense to use the background positioning properties

Many tend to think that Firefox does this because it
correctly does not apply "text-align" attributes to
child block-level elements.

Background does not inherit the properites from it's parent, FF in this case (and in most cases) is following standards:

Some style properties are not inherited from the parent element to the child element. Most often it is intuitive why this is not the case. E.g., the 'background' property does not inherit, but the parent element's background will shine through by default.

Link to specs [w3.org ]

ZA