CODEWITHSUNDEEP
cssxhtmlcss-floatsprite
Craig
Craig

Reputation: 1345

CSS Sprite Button With float:left... Not centering inside a table in Firefox

Amazing...something I have gotten to work in IE and NOT Firefox! Quite the turn of events, eh?

Anyway, here's the problem. Check out the following page in both IE and Firefox:

http://www.lolstrategies.com/test/button_sample.html

I'm using this file to put together the button.

enter image description here (http://www.lolstrategies.com/test/composite__V153767378_.png)

Obviously this button is centered in only IE.. what gives?! I'm using a span for the background that is under the text and another for the tip and then floating them together with float: left as you can see by viewing the source.

So, what can I do to get this span centered in Firefox?

Thanks in advance.. please let me know if there you have any questions about this that I can help answer!

Upvotes: 0

Views: 343

Answers (2)

Artyom
Artyom

Reputation: 1599

Your span.buttonLarge contains two uncleared floated block-level elements, hence no centering. In order to fix this, you could apply display: inline-block and margin: 0 auto to it.

P.S. You don't have a DOCTYPE specified, that's why your current solution works in IE - it is rendering it in Quirks mode.

Upvotes: 2

Fad
Fad

Reputation: 9858

Remove float: left; from .primaryLargeButtonSpan and .primaryLargeButtonEnd

after that change display: block; to display: inline; from .spriteButton span.button_label OR change it to display: inline-block; and then, set the background property to url("./composite__V153767378_.png") no-repeat scroll left -76px transparent;

You might notice some "defect" in the ending image though...

Upvotes: 1

Related Questions