CSS Style results in blurred text in Internet Explorer

Hello -

I am having problem with a CSS defined button on Internet Explorer. What I am doing is creating a 'button' with a cascading style sheet. This basicly involves making the text bold, changing the background color and putting an outline around the image. The outline is thicker on the left and top, and onMouseOver it moves the thicker outline to the bottom and right, giving it a depressed button feel to it.

So, I have a table on my page as well, and within one cell of that table I have the button. I declare the table cell, and then a DIV section with class='uploadbutton' followed by the text and an end div, end table structure, and eventually end the page (the HTML is validated through http://validator.w3.org/ ).

The button looks fine on netscape, but on internet explorer it comes across looking blurry. I have screen shots below to show what I mean. I tried declaring the class in the table structure as well, and that didn't work either.

Is the problem in my style sheet? My declaration of an instance of the uploadbutton class? I don't get it.

Any advice would be very appreciated. I'm not sure if showing the style sheet definitions would be usefull, but I'd be happy to include it if it would.

Thanks!



Image within Internet Explorer


Image within Netscape

yeah, I'd need to see the buttons part of your stylesheet

The following code is snipped from my linked stylesheet and contains the definition of the uploadbutton element. I'll be honest, the suggestion for this method of 'button' came from a website, don't really remember where. I'm not exactly a style sheet pro - but I was under the impression that I had them pretty well down, and nothing looks wrong to me in the definitions - however, I am not promising its all good.

.uploadbutton {
margin: 1em 0;
width: 17em;
font-family: verdana,arial,sans-serif;
font-size: 70%;
font-weight: bold;
}
.uploadbutton a:link,
.uploadbutton a:visited,
.uploadbutton a:hover {
text-align: center;
background-color: #ACC1D6;
color: #000000;
text-decoration: none;
}
.uploadbutton a:link,
.uploadbutton a:visited {
border-top: 1px solid #cecece;
border-bottom: 2px solid #4a4a4a;
border-left: 1px solid #cecece;
border-right: 2px solid #4a4a4a;
}
.uploadbutton a:hover {
border-bottom: 1px solid #cecece;
border-top: 2px solid #4a4a4a;
border-right: 1px solid #cecece;
border-left: 2px solid #4a4a4a;
}

I suspect this has to do with IE rendering borders, padding, and margins differently than netscape (the 'box model' is what IE uses)

Try not changing border widths, it could be shifting your text with IE. You can try other effects like change of color/shading. I have a color changing pseudo-button sidebar on my website in my signature.

Okay - I changed a few things and now it looks fine ... though I suppose from now on I should only chang one thing at a time so that I know what the fix actually was.

Looks fine on both now, so thanks for the assistance!

.uploadbutton.a {
display: block;
width: 100%;
}


Thats what did it - it was stretching the text over the whole div element.

Or at least thats what I think did it, I should probably put it back and find out, but I'm not gonna! haha.

Thanks again!