heya

i have a css hover button:

 <a href="#" id="tour"></a>
#tour{
    display:block;
    width:150px;
    height: 42px;
    margin: 0;
    padding: 0px 0px 0px 0px;
    background-position: -150px 0;
    background-image: url(tour.png);
    }

#tour: hover{
    background-position: 0 0;
    }

This is contained in a div with the property "text-align: center", but it doesn't center in firefox, although it does in IE. If I change the display property to inline it centers nicely, but the height and width constraints are lost...

thanks

have you set a width for the parent div?

Do you only have one link that's going to be using that ID ?? If not, you're going to run into trouble because ID's MUST be unique - you cannot re-use them on the same page. If you must re-use the rules, use a class instead.

Put the text-align: center property on the <li> or <a> rather than the div. IE tends to be VERY sloppy in the way it applies CSS - thanks to it's non-standard compliant nature.

ye, there is only 1 link using the ID.

LadynRed thanks for the suggestion! I just tried it, but it still doesn't work . I think it must have something to do with the display property, because if I set it to inline it centers nicely (but loses its size)...

any other ideas?

Not unless we can see all the code - css and html.