Hey guys, I was recently updating an existing html/css site, all went well until I tested in IE7 and realized the images used for the menu did not show. The images are currently PNGs, but it's the same with JPGs, other PNG image show fine on the site, only the menu images are not showing up. I looked on Google for ages but none of the solutions worked for me and I'm not a CSS ninja by any means...can someone see anything obvious that could cause this? Site: http://josephs-restaurant.com/ As I said I only made updates to that site and haven't changed any of the core menu functionality, so I'm guessing the problem was there before. HTML: <div id="nav"> <ul> <li class="home"><a class="active" href="index.html"></a></li> <li class="restaurant"><a href="restaurant.html"></a></li> <li class="catering"><a href="catering.html"></a></li> <li class="retail"><a href="retail.html"></a></li> <li class="testimonials"><a href="testimonials.html"></a></li> <li class="vacancies"><a href="vacancies.html"></a></li> <li class="contact"><a href="contact.html"></a></li> </ul> </div> Code (markup): CSS: #nav { width: 100%; height: 50px; margin: 0 auto; } #nav ul { list-style-type: none; } #nav ul li { display: inline; text-align: center; margin:0 5px; } #nav ul li a { text-decoration: none; color: #ffffa5; font: bold 1.3em Arial, Helvetica, sans-serif; padding: 10px 11px 12px 13px; } #nav ul .home a { background: url(http://josephs-restaurant.com/images/home_btn.png) no-repeat; width: 60px; height: 55px; padding:0 45px 35px 13px;} #nav ul .restaurant a { background: url(images/restaurant_btn.png) no-repeat; padding:0 82px 35px 13px;} #nav ul .catering a { background: url(images/catering_btn.png) no-repeat; padding:0 67px 35px 13px;} #nav ul .retail a { background: url(images/retail_btn.png) no-repeat; padding:0 68px 35px 13px;} #nav ul .gallery a { background: url(images/gallery_btn.png) no-repeat; padding:0 56px 35px 13px;} #nav ul .testimonials a { background: url(images/testimonials_btn.png) no-repeat; padding:0 93px 35px 13px;} #nav ul .christmas a { background: url(images/christmas_btn.png) no-repeat; padding:0 76px 35px 13px;} #nav ul .vacancies a { background: url(images/vacancies_btn.png) no-repeat; padding:0 74px 35px 13px;} #nav ul .contact a { background: url(images/contact_btn.png) no-repeat; padding:0 62px 35px 13px;} Code (markup): Thanks, Greg
I added some floating, deleted dimensions and padding for the first element and add some margins. I've tested it onto my computer. It works nicely with ie7 standalone. <!--[if IE 7]> <style> li a{ margin-left:5px; margin-right:5px; } #nav ul .home a { background: url(images/home_btn.png) no-repeat; padding:0 0px 2px 2px; float:left; } #nav ul .restaurant a { background: url(images/restaurant_btn.png) no-repeat; padding:0 82px 35px 13px;float:left;} #nav ul .catering a { background: url(images/catering_btn.png) no-repeat; padding:0 67px 35px 13px;float:left;} #nav ul .retail a { background: url(images/retail_btn.png) no-repeat; padding:0 68px 35px 13px;float:left;} #nav ul .gallery a { background: url(images/gallery_btn.png) no-repeat; padding:0 56px 35px 13px;float:left;} #nav ul .testimonials a { background: url(images/testimonials_btn.png) no-repeat; padding:0 93px 35px 13px;float:left;} #nav ul .christmas a { background: url(images/christmas_btn.png) no-repeat; padding:0 76px 35px 13px;float:left;} #nav ul .vacancies a { background: url(images/vacancies_btn.png) no-repeat; padding:0 74px 35px 13px;float:left;} #nav ul .contact a { background: url(images/contact_btn.png) no-repeat; padding:0 62px 35px 13px;float:left;} </style> <![endif]--> Code (markup):
hope you still getting messages from this thread. I've <div id="exitus"> Content </div> Code (markup): and the css: #exitus { background-image: url(/images/bg-exitus.png);background-repeat:no-repeat;} Code (markup): and it doesn't display the bg any help