asked on

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

Rikus_Trent

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_12

ASKER

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.

ASKER CERTIFIED SOLUTION

dgilfillan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial