Title: Remove Gradient Backgrounds from Boxes
Last modified: August 19, 2016

---

# Remove Gradient Backgrounds from Boxes

 *  Resolved [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * (@chapmanjw)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/)
 * When I use this theme in FireFox, the boxed black background (widgets, posts,
   links, etc) displays as a solid box. On IE, the background becomes a gradient
   that goes from the solid color to opaque. What in the theme is making IE do that?
   I would like to have the solid image background rather than the gradient.

Viewing 14 replies - 1 through 14 (of 14 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515495)
 * There are thousands of WordPress themes – which means that many people won’t 
   be familiar with your particular theme. So a link to your site where people can
   see the theme might result in more responses.
 *  Thread Starter [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * (@chapmanjw)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515503)
 * [http://www.johnchapman.name](http://www.johnchapman.name)
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515512)
 * I assume you have IE7 as I can;t see any problems in IE8.
 * My guess is that it’s this block in header.php:
 *     ```
       <!--[if lt IE 7]>
       <style type="text/css" media="screen">
       #top #topmenu li a.rss {background:none; padding-left:0;} #nav li ul {display:none;} #nav li {background:none;} #header #headerbanner {padding:10px 10px 0 10px;} #header #headerbanner a:hover {background:none; color:#fff;} .sticky {padding:0; margin-bottom:35px; background:none;} .postmetatop .categs {background:none; padding-left:0;} .postmetatop .date span {background:none; padding-left:0;} .postcontent a:hover {background:none; color:#fff;} .postmetabottom {padding:10px 10px 0 10px;} .postmetabottom .tags {background:none; padding-left:0;} .postmetabottom .readmore span {background:none; padding-left:0;} #navigation a:hover {background:none; color:#fff;} #sidebar ul ul li {margin-bottom:10px;} #sidebar ul ul li a {display:inline; padding:5px 0;} #sidebar ul ul li a:hover {display:inline; background:none; color:#fff;} #footer ul li {padding:5px; background:none;} #footer ul ul li {background:none; padding-left:0; margin:5px 0;} #footer li a {display:inline; padding:5px 0;} #footer li a:hover {display:inline; background:none; color:#fff;} #credits a:hover {background:none; color:#fff;}
       </style>
       <script type="text/javascript" src="http://www.johnchapman.name/wp-content/themes/motion/js/unitpngfix.js"></script>
       <![endif]-->
       ```
   
 *  Thread Starter [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * (@chapmanjw)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515514)
 * I am using IE8. And that section of code only applies to IE6. In IE6, 7, and 
   8 (I’ve tried on all), all of the elements with the blacktrans.png image as the
   background show up as a gradient rather than a solid box. This doesn’t happen
   on FF or Safari and I cannot figure out how to make IE stop doing it. The preview
   of the Motion template on the WP site also does it.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515519)
 * No – it applies to anything that is less than or equal to IE7. That’s what the`
   lte’ means.
 *  Thread Starter [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * (@chapmanjw)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515525)
 * Either way, I am using IE8…
 *  Thread Starter [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * (@chapmanjw)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515526)
 * Removed all the CSS if statments and the code they contained to test, still had
   the gradients.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515528)
 * Strictly speaking, you’re not on this theme. `<meta http-equiv="X-UA-Compatible"
   content="IE=8" />` in the header is forcing IE8 into Compatibility Mode which
   emulates IE7. However the emulation isn’t 100% successful and I’ve known of a
   few cases where the display in IE8/Compatibility Mode was different to (true)
   IE7.
 * I’m seeing **exactly** the same display in Firefox 3.6.3 and IE8/Compatibility
   Mode – which is why I asked if you were using IE7. As it stands I’m not sure 
   why you’re seeing very different displays.
 *  Thread Starter [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * (@chapmanjw)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515532)
 * Tried without the <meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> tag and
   samething.
 * Just a note: <meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> tells IE 8 
   to disable compatibility mode and not offer the option to the user. Setting it
   to IE=7 forces compatibility mode.
 * [http://www.johnchapman.name/wp-content/ie.png](http://www.johnchapman.name/wp-content/ie.png)
   < A screenshot of what I am seeing.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515534)
 * You’re quite right about the X-UA-Compatible header. My bad.
 * I’m seeing exactly the same set of nav links at the top of the page in FF3. What
   you have in those “tabs” is a 1 x 1 semi-transparent png (whitetrans.png). On
   hover, the background image changes to blacktrans.png which, as the name suggests,
   turns the tab darker.
 * If you’re seeing solid black boxes in FF, then for some reason, your FF isn’t
   handling transparent pngs properly – an effect (bug?) most commonly seen with
   older versions of IE. if you want to switch the theme to use solid colors, you
   could start by editing:
 *     ```
       #top #topmenu li {
       background:url("images/whitetrans.png");
       float:left;
       line-height:1.5em;
       margin:0 0.4em 0.4em 0;
       padding:0 0.8em 0.2em;
       }
       ```
   
 * in style.css and changing `background:url("images/whitetrans.png");` to something
   like `background:#1A1711;`
 *  Thread Starter [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * (@chapmanjw)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515542)
 * My end goal is to keep the transparency. I just cannot figure out why IE is turning
   that transparency into a gradient.
 * I am on a different PC now and it is not doing the gradient thing in IE. Tried
   clearing the cache and reseting IE to default settings, still getting the gradient
   on the first PC.
 * When I set the background to a color, it is solid, no gradient. When I set it
   back to repeat that 1×1 image, it makes it a gradient on the first PC. This is
   very odd.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515579)
 * Perhaps the problem lies within the display config of the first PC?
 *  Thread Starter [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * (@chapmanjw)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515635)
 * Well, it appears that only this one PC is doing it. I have checked 7 separate
   machines. So, I’m not going to worry about it. Thanks for the help 😀
 *  Thread Starter [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * (@chapmanjw)
 * [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515651)
 * I did finally figure out what caused it. Having Kontera (text link advertising)
   on the site was causing the issue. I removed Kontera and its back to the way 
   it should be.

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Remove Gradient Backgrounds from Boxes’ is closed to new replies.

 * 14 replies
 * 2 participants
 * Last reply from: [chapmanjw](https://wordpress.org/support/users/chapmanjw/)
 * Last activity: [16 years ago](https://wordpress.org/support/topic/remove-gradient-backgrounds-from-boxes/#post-1515651)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics