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 Quote Link to comment 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> .. .. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.