By wrb123 on

I have an image which I am displaying in my primary links navigation bar across the top of my site. It shows up fine in FF3, but not at all in IE7. Note the line "background:url(icons/menu.png) no-repeat;" in the following code, which is the image i am displaying. I also tried using .gif but it did not work either. It's a 75x25px image I created in Paint.NET. Any idea how I can get this to show in IE? Thanks, Bill

(Framework Theme) style.css:

ul.links li {
background: none;
margin: 0 10px 0 0;
padding: 0;
}

#nav {
border-bottom: 1px solid #000066; /* was b4d7f0 (same for next line */
border-top: 1px solid #000066;
font-size: 1em;
margin: 0 0 10px;
}

#nav ul.primary-links {
padding-left: 90px; /* wasnt here before */
padding-top: 5px; /* wasnt here before */
padding-bottom: 5px; /* wasnt here before */
background-position: center left; /* wasnt here before */
background:url(icons/artists-menu.png) no-repeat; /* background: #ffffff; */ /* was #d4e7f3 */
float: center;
font-weight: 700;
/* padding: 5px; */
}

#nav ul.primary-links li {
margin: 0;
padding: 0;
}

#nav ul.primary-links li a:link {
margin: 0 10px 0 0;
padding: 5px 0;
color: #ff0033;
}

#nav ul.primary-links li a:visited {
margin: 0 10px 0 0;
padding: 5px 0;
color: red;
}

#nav ul.primary-links li a:hover, #nav ul.primary-links li a:active {
text-decoration: underline;
}

⋅ Categories: Drupal 6.x

Comments

adrinux’s picture

adrinux commented

Hard to say without a live url to see, but try setting an explicit height on #nav ul.primary-links

Adrian Simmons
adrinux@gmail.com

Adrian Simmons
adrinux@anaath.at

wrb123’s picture

wrb123 commented

Could you show how to do that with css code? Sorry, I don't know css very well and especially not with all these different sections of code. Thank you!

gbrussel’s picture

gbrussel commented 
#nav ul.primary-links {
padding-left: 90px; /* wasnt here before */
padding-top: 5px; /* wasnt here before */
padding-bottom: 5px; /* wasnt here before */
background-position: center left; /* wasnt here before */
background:url(icons/artists-menu.png) no-repeat; /* background: #ffffff; */ /* was #d4e7f3 */
float: center;
font-weight: 700;
/* padding: 5px; */
}

to

#nav ul.primary-links {
padding-left: 90px; /* wasnt here before */
padding-top: 5px; /* wasnt here before */
padding-bottom: 5px; /* wasnt here before */
background-position: center left; /* wasnt here before */
background:url(icons/artists-menu.png) no-repeat; /* background: #ffffff; */ /* was #d4e7f3 */
float: center;
font-weight: 700;
min-height: 25px; /* wasnt here before */
/* padding: 5px; */
}
wrb123’s picture

wrb123 commented

thank you for the suggestion, but unfortunately it didn't work. i have even tried with jpg, png, and gif and i have tried changing the image from 75x25px to 60x20px just to make sure it would fit. still shows in FF3 but not IE7. ill keep trying!

Jeff Burnz’s picture

Jeff Burnz commented

float: center; is invalid CSS, its either left, right or none.

mostly impossible to diagnose without a link.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.