- This topic is empty.
-
AuthorPosts
-
August 16, 2012 at 1:54 pm #39403jimbwayneParticipant
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;
}August 16, 2012 at 1:59 pm #108077Paulie_DMemberA link would be the easiest way to help you so we can inspect in with developer tools.
August 16, 2012 at 2:03 pm #108078jimbwayneParticipantAugust 16, 2012 at 2:40 pm #108064Paulie_DMemberI don’t think transparent backgrounds are well supported by IE.
You might want to consider a small repeating png instead.
August 16, 2012 at 3:17 pm #108066jimbwayneParticipantThanks 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!
August 16, 2012 at 4:39 pm #108051jimbwayneParticipantThanks 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; -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.