jasonc Posted November 15, 2010 Share Posted November 15, 2010 wanting background image only on bottom menu section but i can not seem to get the image to show behind all of the menu items. <div class="header"> <ul> <li class="firstmenuitem"><a href="#">Welcome</a></li> <li><a href="#">About us</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> <li><a href="#">Menu 7</a></li> <li><a href="#">Menu 8</a></li> </ul> <br style="clear: both; line-height: 8px;"> <ul class="RoundMenuBox"> <li class="customerfirst"><a href="#">Menu 9</a></li> <li><a href="#">Menu 10</a></li> </ul> <br style="clear: both;"> </div> CSS .header { margin: 0 auto; text-align: center; padding: 10px 10px 5px 10px; position: relative; font-size: 12px; } .header ul { display: block; text-align: center; width: 100%; list-style: none; padding: 0; height :12px; } .header li { padding: 0 8px 0 10px; color: #000; display: inline; position: relative; top: 30%; border-left: 2px solid #319cfe; } li.firstmenuitem { border-left: 0px; } li.customerfirst { border-left: 0px; } .RoundMenuBox { background:url(../images/RoundMenuBox.gif) no-repeat center center; } I have attached both the image i am using and my original photoshop file. can anyone see why the image is not showing correctly ? wanting the text to be center center of the image Link to comment https://forums.phpfreaks.com/topic/218724-css-background-image-not-behind-all-text/ Share on other sites More sharing options...
jasonc Posted November 15, 2010 Author Share Posted November 15, 2010 I have opted to use this method instead of images but now have different views in IE than what is correctly showing in Firefox. also i wish for the bottom menu to be in the centre like the top menu, but can not seem to get this right even using a centered div .header { margin: 0 auto; text-align: center; padding: 10px 10px 5px 10px; position: relative; font-size: 12px; } .header ul { display: block; text-align: center; width: 100%; list-style: none; padding: 0; height :12px; } .header li { padding: 0 8px 0 10px; color: #000; display: inline; position: relative; top: 30%; border-left: 2px solid #319cfe; } li.firstmenuitem { border-left: 0px; } li.customerfirst { border-left: 0px; } .RoundMenuBox { position: relative; background: #4B8EC3; margin: 0px 5px; width: 400px; color: #ffffff; } .rtopcolour1, .rbottomcolour1{ display: block; background: #ffffff; } .rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background: #4B8EC3; line-height: 1px;} <div class="header"> <ul> <li class="firstmenuitem"><a href="#">Welcome</a></li> <li><a href="#">About us</a></li> <li><a href="#">Vehicles</a></li> <li><a href="#">Services</a></li> <li><a href="#">Quote Me</a></li> <li><a href="#">Bookings</a></li> <li><a href="#">Accounts</a></li> <li><a href="#">Accounts LOG OUT</a></li> </ul> <br style="clear: both; line-height: 8px;"> <ul><div class="RoundMenuBox"><div class="rtopcolour1"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div><li class="customerfirst"><a href="#">Change password or email address</a></li><li><a href="#">Manage Passengers Details</a></li><div class="rbottomcolour1"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div></div></ul> <br style="clear: both;"> </div> i have attached images of IE and Firefox views this is what doctype i have set.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> .. .. Link to comment https://forums.phpfreaks.com/topic/218724-css-background-image-not-behind-all-text/#findComment-1134447 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.