IE7 form input buttons go 3D when styled with background image

I've noticed that IE7 seems to automatically make form buttons 3-dimensional if a background image is applied through CSS (or allows the background color to bleed through if specified). We would like to use our own graduated bg image for styling and so would like IE not to do this.

Interestingly, if you only specify a background color with no background image, it will allow flat, 2D buttons with no extra bevels/borders.  

How can we set a background image without the button going 3D?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
 
.yellowButton {
	height: 20px;
	background-image: url(/images/ui/test_bkg.jpg);
	background-color: #000000;
	border: 1px solid #EFAC2B;
	color: #CA5200;
	font-weight: bold;
	cursor: pointer;
}
</style>
<body>
<form>
<input type="button" value="Test Button" class="yellowButton" />&nbsp;<input type="submit" value="Submit" class="yellowButton" />
</form>
</body>
</html>

Open in new window

test-bkg.jpg
Sailing_12PirateAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rikus_TrentCommented:
I personally don't see 3D button style with your code and test image. It does appear that the black background does come through as a 1px border around your image though. For some reason IE is leaving 1px gap or padding around your image.

As a work around your could set your background color to match the image or set it to Transparent.

As far as the 3D style goes, perhaps shutting of the visual styles in IE->Tools->Internet Options->Advanced->enable visual styles on buttons and controls will help?
Sailing_12PirateAuthor Commented:
Yes, if a background color is specified, IE shows the background color in the space where the bevel-border would be. If you comment out the background-color: #000000 line in the CSS, you should see the 3D effect I'm referring to.

I'd like neither - just the background image and the border I'm specifying in my CSS, eliminating the additional 1px border that does not belong there.

Setting a background color to match will not work for us because we eventually want to use a gradient image for the background, and changing IE settings is not something I can do on our visitor's browsers.

This is something that should be able to be completely controlled through CSS, like in Firefox - it continues to amaze me how developer-unfriendly, presumptuous, and downright arrogant IE is as a platform.  
dgilfillanCommented:
Hi I've searched high and low for an answer to this and I mean high and low! - I understand exactly what your problem is and the only solution I have found is to:

1) Set your background color to be the same as the border your want (remember it shouldnt matter what the background color is as it will be filled ENTIRELY by gradient image) - so for yourself it would be:

.yellowButton {
        height: 20px;
        background-image: url(/images/ui/test_bkg.jpg);
        background-color: #EFAC2B;
        border: 1px solid #EFAC2B;
        color: #CA5200;
        font-weight: bold;
        cursor: pointer;
}

1) Include conditional styles for IE that effectively make the border transparent- you can do this either by including a conditional stylesheet (<!--[if IE]><link rel="stylesheet" type="text/css" href="all-ie.css" /><![endif]-->) or by using the CSS hack for IE6 (* html) and IE7 (*+html)

e.g.

*+html .yellowButton, * html .yellowButton
{
    border:1px transparent solid !important;
}

Do not set the border width to 0px, just change the color to transparent.

I'm not sure how clear I have been but this has sorted the problem for me - any questions let me know.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.