Transparent Background on Nav Menu Not Working in IE

[jimbwayne]

First time poster here. Advance apologies if this is a rudimentary fix, but I did my research and couldn’t find the appropriate solution on the boards. I do sense there is probably a quick solution to this, though. Here goes.

My nav menu div has a transparent background and sits atop the page background image. Here’s how it correctly looks in Chrome:

http://screencast.com/t/bk8eFaAks

In all versions of IE, it looks like that white background from the logo bar above extends down and sits behind my menu. I’ve tried various tips from other posts, including removing the “background: transparent;” property altogether. No dice, though.

Any ideas? What am I missing?

CSS is below. Thanks, all!

Jim

#menu_wrapper

{

padding: 0;

width: 980px;

height: 66px;

text-align: left;

}



#menu_wrapper .nav ul, #menu_wrapper div .nav{

list-style: none;

padding-top: 0px;

margin-left: 0px;

float: left;

font-size: 14px;

font-weight: bold;

width: 100%;

text-transform: uppercase;

}



#menu_wrapper .nav ul li, #menu_wrapper div .nav li

{

display: inline;

width: 170px;

float :left;

margin: 0 0 0 0;

}



#menu_wrapper .nav ul li a, #menu_wrapper div .nav li a

{

display: block;

padding: 5px 20px 1px 20px;

height: 20px;

margin-left: 10px;

color: #fff;

text-shadow: 1px 1px 1px #000;

background: transparent;

}



#menu_wrapper .nav ul li a span, #menu_wrapper div .nav li a span

{

display: block;

font-size: 11px;

color :#96A1A6;

font-weight: normal;

text-transform: lowercase;

}

[Paulie_D]

A link would be the easiest way to help you so we can inspect in with developer tools.

[jimbwayne]

Duh, sorry. Meant to include it:

http://illuminostics.com

Thanks!

[Paulie_D]

I don’t think transparent backgrounds are well supported by IE.

You might want to consider a small repeating png instead.

[jimbwayne]

Thanks Paulie. I laid in a transparent png as the background and am still getting the same result in IE. Also tried a solid gray background as the background, which is up there now, and even that is not coming through in IE. Looks correct in all other browsers though. This tells me the issue may be with some other div? Here’s the CSS for the top bar:

#top_bg

{

width: 100%;

height: 50px;

background: #fff;

border-top: 1px solid #fbe201;

-webkit-box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;

-moz-box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;

box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;

z-index: 999;

position: absolute;

margin: auto;

text-align: center;

}



#top_bar

{

width: 960px;

height: 66px;

margin:0 auto;

text-align: left;

}



#menu_wrapper

{

width: 960px;

height: 106px;

text-align: left;

float: left;

}



#menu_wrapper .nav ul, #menu_wrapper div .nav{

list-style: none;

padding-top: 0px;

margin-left: 0px;

float: left;

text-align: left;

font-size: 14px;

font-weight: bold;

width: 100%;

text-transform: uppercase;

background: #333;

}



#menu_wrapper .nav ul li, #menu_wrapper div .nav li

{

display: inline;

width: 180px;

float :left;

text-align: left;

margin: 0 0 0 0;

}

Thanks!

[jimbwayne]

Thanks Jamy, that worked for IE. But now I’m having an issue with getting the nav bar extend to the full width of my background image. If you are able to view http://illuminostics.com in any IE, you’ll see what I mean.

Here’s what that div now looks like with your fix. It seems the padding here isn’t being picked up in IE. Is there a special fix I need for the filter?

Thanks again.

#menu_wrapper .nav ul, #menu_wrapper div .nav{

list-style: none;

padding-left: 10px;

float: left;

text-align: left;

font-size: 14px;

font-weight: bold;

width: 1200px;

text-transform: uppercase;

background-color: transparent;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#333333);

zoom: 1;

[Author]

Posts