Remove Gradient Backgrounds from Boxes

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.

https://www.johnchapman.name

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="https://www.johnchapman.name/wp-content/themes/motion/js/unitpngfix.js"></script>
<![endif]-->

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.

No – it applies to anything that is less than or equal to IE7. That’s what the `lte’ means.

Either way, I am using IE8…

Removed all the CSS if statments and the code they contained to test, still had the gradients.

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.

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.

https://www.johnchapman.name/wp-content/ie.png < A screenshot of what I am seeing.

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;

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.

Perhaps the problem lies within the display config of the first PC?

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 ??

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.