troubleshooting Question

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

Avatar of Sailing_12
Sailing_12 asked on
3 Comments1 Solution6278 ViewsLast Modified:
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" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
.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;
<input type="button" value="Test Button" class="yellowButton" />&nbsp;<input type="submit" value="Submit" class="yellowButton" />

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros