firefox2.0 anchor-backgrounposition

Question

Hi i have css file for my anchor links defined below .this works fine for IE7 but when open the page in firefox the button image goes longer. I googled as that firefox has background position bug but no matched solution. How to a fix for this issue? thanks

The css file is below

/* button settings */ a.RadForm_CustomSkins, a.RadForm_CustomSkins span { background-image: url('FormDecorator/ButtonSprites.gif'); background-repeat:no-repeat; cursor:hand; cursor:pointer; display:inline-block; }

a.RadForm_CustomSkins.rfdInputDisabled:hover { background-position: 0% 0%; }

a.RadForm_CustomSkins .rfdInner, a.RadForm_CustomSkins.rfdInputDisabled:hover .rfdInner { margin-right: 11px; margin-left: 11px; background-position: 0 -21px; color: #ffffff; font-size:11px; }

a.RadForm_CustomSkins.rfdInputDisabled:hover .rfdOuter { background-position: right 0%; }

a.RadForm_CustomSkins:hover { background-position: 0 -42px; }

a.RadForm_CustomSkins:hover .rfdInner { background-position: 0 -63px; color: #ffffff; }

a.RadForm_CustomSkins:hover .rfdOuter { background-position: right -42px; } /* end of button settings */

/* clicked button styles */ a.RadForm_CustomSkins.rfdClicked { background-image: url('FormDecorator/ButtonSprites.gif'); background-position: 0 -84px; background-repeat: no-repeat; }

a.RadForm_CustomSkins.rfdClicked span { background-image: url('FormDecorator/ButtonSprites.gif'); }

a.RadForm_CustomSkins.rfdClicked .rfdInner { background-position: 0 -105px; background-repeat: repeat-x; color: #ffffff; }

a.RadForm_CustomSkins.rfdClicked .rfdOuter { background-position: right -84px; background-repeat: no-repeat; } /* end of clicked button styles */

/* do NOT change these settings, otherwise the skinned buttons will be broken when used within a decoration zone */ a.rfdSkinnedButton.RadForm_CustomSkins { -moz-user-select: none !important; outline: none !important; text-decoration: none !important; cursor: default !important; text-align: center !important; background-color: transparent !important; border: 0 !important; display: inline-block !important; background-position: 0% 0%; }

and the rendered html as button is

    <a id="_rfdSkinnedctl00_signOut" class="rfdSkinnedButton RadForm_CustomSkins" href="javascript:void(0)" style="width: 80px;">
<span class="rfdOuter">
<span class="rfdInner">Çıkış</span>
</span>
</a>
<input id="ctl00_signOut" class="rfdRealButton" type="submit" value="Çıkış" name="ctl00$signOut" _rfddecoratedid="_rfdSkinnedctl00_signOut"/>

Answer 1

If I understand the problem correctly, it is that the width of the button appears differently in IE and Firefox. Here are some things you can try:

1. Explicitly set the width of the button.

2. Use max-width to limit the width of the button in Firefox (IE7 doesn't understand this property unless you declare "XHTML 1.0 Strict" in your DTD).

3. Have a look to see if any divs/tables/other elements are affecting the size of your button.

4. Check to see if margin/border/padding properties are having an affect.

5. Start a clean page and build the problem up from scratch to see if you can recreate the issue. (You have quite a lot going on in your example above, and you perhaps need to distill your thoughts.)