I have used background image and css border to a button. It looks good in Firefox but IE does not show it correctly. The top border is not aligned with left, right borders in IE. How to correct it in IE? Below links for your reference.
Screen shot IE
Selector
Screen shot Firefox
views:
9289answers:
6
+4
A:
This http://particletree.com/features/rediscovering-the-button-element/ might help you if it's just the button that is acting weird, but it looks like the text on the tabs is also bold in firefox, and not in IE - so you might have another css part that messes things up.
To check your styles in Firefox use the firebug extension: http://getfirebug.com/ To check them in IE use the Internet Explorer Developer Toolbar: http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Simon Groenewolt
2008-12-24 12:29:16
Or get IE8 - It has many of the same features as FF/FB
StingyJack
2008-12-24 12:59:34
Ah, good to know. (I'm mostly developing on osx, so my IE knowledge is not the most up-to-date)
Simon Groenewolt
2008-12-24 13:38:21
A:
Does it look right if you set the windoes theme to "classic" (so the task bar looks more like windows 2000, rather than the cartoony look with the green start button and blue task bar)?
If so, try adding this to the of the document:
<meta http-equiv="msthemecompatible" content="no">
This will tell IE to not force it's theme on your content, so it can instead use your CSS.
Also, see: http://msdn.microsoft.com/en-us/library/bb773175(VS.85).aspx#html
pkaeding
2008-12-24 12:51:19
A:
I'll bet it looks really odd in safari. =)
It looks like FF/IE have the different fonts available to them. Check here with each browser to see if the font you are using is available in both browsers.
Try also nesting the button in another control and then putting the border around the wrapping control.
If you really really want consistent look, then make it "JUST" an image button. The text "Login" and no border, etc.
StingyJack
2008-12-24 13:01:42
Please check the attached style class(Selector) and the IE image(Screen shot IE). The top border is not aligned with left, right borders in IE
Shivanand
2008-12-26 08:58:29
I did. You are setting the border for a button. Wrap the button in a div and set the border on the div.
StingyJack
2008-12-26 15:28:37
A:
Assuming you are using a doctype the following should get it done
CSS:
#conText input.button
{
padding:5px;
background: url("/images/button.png");
color:#000;
font-weight:bold;
border:none;
}
HTML
<input type="button" Value="Button" class="button" />
Bruno43
2008-12-24 13:44:02
Please check the attached style class(Selector) and the IE image(Screen shot IE). The top boder is not aligned with left, right borders in IE.
Shivanand
2008-12-26 08:56:31
A:
I'm receiving an error getting at your files Shiv, could you post your code (at minimum the relevant code) so we can nail this down for you :) ?
Also check out a few other browsers (Chrome, Safari, and Opera for example)... if it works fine in all these as well as FFX then it is a IE CSS issue. Which version IE are you running as well??
Thanks!