Roxanne Posted May 21, 2012 Share Posted May 21, 2012 I have a horizontal drop-down menu, but there is a problem with the padding in my main menu items. All of my main menu items have the proper padding except the last item, which has no padding. The easiest way to see this is when you mouse-over it, because it is set to change color on mouse-over. I have no idea what the problem is. Here is my code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><link href="http://fonts.googleapis.com/css?family=Pontano+Sans" rel="stylesheet" type="text/css"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body{ padding:0px; background: #000000; font-size: 12px; color: white; font-family: 'Pontano Sans', sans-serif; } #menu-bar, #menu-bar ul, #menu-bar li{font-family: 'Pontano Sans', sans-serif; font-size:18px; text-indent:0; padding:0; margin:0; } #menu-bar li{ white-space:nowrap; list-style: none; position: relative; float: left; /* this makes the lists to appear horizontally */ height: 50px; text-align: center; background-color: #000000; line-height: 50px; padding: 0 25px 5px 25px; } #menu-bar li:last-child {padding:0; } #menu-bar li li, #menu-bar li li:last-child{ width:100%; text-align: left; padding-left:25px; padding-right:0px; } #menu-bar li a{ display:block; /*added by dsonesuk */ text-decoration:none; color: white; } #menu-bar li:hover{ background-color:#000000; } #menu-bar ul ul{ position:absolute; /*added by dsonesuk */ width:225px; /*added by dsonesuk */ top:50px;/*amended by dsonesuk */ visibility:hidden; } #menu-bar ul li:hover ul{ visibility:visible; background-color:#000000; } #menu-bar ul ul ul{ top:0px;} /*reset position for all sublevels below sublevel 1*/ #menu-bar ul ul li a {display:block; width:100%; height:100%; line-height:50px; float:none; } /*for every new sublevel add preffix ul (ul li:hover li ul = sublevel 1, ul ul li.hover li ul= sublevel 2 and so on. the .sfhover is for ie6 which should be identical to prev example but with replacement of ':hover' with '.sfhover' instead )*/#menu-bar ul ul,#menu-bar ul li:hover li ul, /*sublevel 1*/#menu-bar ul ul li:hover li ul /*sublevel 2*/{left:-999999em;} /*xxxxxxxxxxxxx set hover xxxxxxxxxxxxx*/#menu-bar ul li:hover,#menu-bar ul li ul{z-index:99;} /*prevents overlap from neighbouring images and borders*/ #menu-bar ul li:hover, #menu-bar ul ul li a:hover, #menu-bar ul ul li:hover {background-color:#979797;} /*for every new sublevel add prefix ul (ul li:hover ul = sublevel 1, ul ul li:hover ul= sublevel 2 and so on. the .sfhover is for ie6 which should be identical to prev example but with replacement of ':hover' with '.sfhover' instead, THESE MUST BE DONE SEPARATE as below and not grouped together )*/ /*sublevel 1*/#menu-bar ul li:hover ul{left:0px;} /*sublevel 2*/ #menu-bar ul ul li:hover ul {left:0;margin-left: 250px;} /*sublevel 3*/#menu-bar ul ul ul li:hover ul {left:0;margin-left: 250px;}</style><title>Columbus Dayton Springfield Ohio Roxanne Davis Photography</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="Roxanne Davis Photography" name="TITLE"><meta content="Roxanne Davis Photography offers professional photography services of the highest quality. Please visit my website for many examples of my work, such as wedding photos, senior pictures, pet portraits, bands which I have done photography for, scenic and wildlife photos & more, some of which are available for purchase. You will also find information on how to contact me if you wish to hire me. Based in Springfield, Ohio." name="DESCRIPTION"><meta content="reflections photography, Springfield Ohio photos photo sharing nature scenic wildlife BLOOD print gallery galleries landscape Yellowstone national park mountain waterfall animal buffalo bison coyote elk mammoth hot spring canyon river picture Kiwamu Kaede Fu-ki music photography reflection reflections photographer Roxanne Davis professional photographer photograph portfolio image wedding portrait senior nature scenic wildlife concert live show band Queensryche D'espairsRay DespairsRay BLOOD DuelJewel Soundevice Japanese rock music jrock j-rock profile jhouserock animals musician Hizumi Zero Karyu Tsukasa Geoff Tate Michael Wilton Whip Eddie Jackson Scott Rockenfield Mike Stone Hayato Shun Natsuki Yuya Baru Val" name="KEYWORDS"><meta content="roxanne@roxannedavisphotography.com" name="OWNER"><meta content="Roxanne Davis" name="AUTHOR"><meta http-equiv="EXPIRES"><meta http-equiv="CHARSET" content="ISO-8859-1"><meta http-equiv="CONTENT-LANGUAGE" content="English"><meta http-equiv="VW96.OBJECT TYPE" content="photography"><meta content="General" name="RATING"><meta content="index,follow" name="ROBOTS"><meta content="2 weeks" name="REVISIT-AFTER"><meta name="msvalidate.01" content="F77A34C56B1B9FF04A3403FA25AA137F"><meta name="verify-v1" content="LNnPNDdYip13EDc4fADK2KOeAFIBogzrFaTVxVcGF5A="><font size="2" color="#e0e0e0" face="Verdana"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></font></head><body bgcolor="#000000" vlink="#e0e0e0" text="#e0e0e0" link="#e0e0e0" alink="#e0e0e0"><table style="width: 100%; border-collapse: collapse" border="0" bordercolor="#000000" cellpadding="0" cellspacing="0"><tbody><tr valign="top"><td width="100%"><center><table style="border-collapse: collapse" summary="" border="0" bordercolor="#000000" cellpadding="0" cellspacing="0"><tbody><tr valign="top"><td width="800"><div><img alt="" src="/roxannedavisphotography/graphics/Roxanne_Davis_Photography_banner.jpg"></div></td><td width="200"><div style="font-size: 15px;"><br><br>Formerly<br>Reflections Photography</div></td></tr></tbody></table></centr><table style="width: 100%; border-collapse: collapse" border="0" bordercolor="#000000" cellpadding="0" cellspacing="0"><tbody><tr valign="top"><td width="100%"><center><table style="border-collapse: collapse" summary="" border="0" bordercolor="#000000" cellpadding="0" cellspacing="0"><tbody><tr valign="top"><td width="1000"><left><div id="menu-bar"><ul> <li><a href="http://www.roxannedavisphotography.com">Home</a></li> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Bands</a> <ul> <li><a href="http://www.roxannedavisphotography.com/DespairsRay.html">D'espairsRay</a></li> <li><a href="http://www.roxannedavisphotography.com/Versailles.html">Versailles</a></li> <li><a href="http://www.roxannedavisphotography.com/Queensryche.html">Queensrÿche</a></li> <li><a href="http://www.roxannedavisphotography.com/Love_Said_No.html">Love Said No</a></li> <li><a href="http://www.roxannedavisphotography.com/Soundevice.html">Soundevice</a></li> </ul> </li> <li><a href="http://www.roxannedavisphotography.com/seniors.html">Seniors</a></li> <li><a href="http://www.roxannedavisphotography.com/wedding.html">Wedding</a></li> <li><a href="http://www.roxannedavisphotography.com/people_portraits.html">People & Portraits</a></li> <li><a href="http://www.roxannedavisphotography.com/pets.html">Pets</a></li> <li><a href="http://www.roxannedavisphotography.com/commercial.html">Commercial</a></li> <li><a href="http://www.roxannedavisphotography.com/graphics.html">Graphics</a></li> </ul> </li> <li><a href="#">Fine Art Prints</a> <ul> <li><a href="http://www.roxannedavisphotography.com/scenic.html">Scenic</a></li> <li><a href="http://www.roxannedavisphotography.com/wildlife.html">Wildlife</a></li> <li><a href="http://www.roxannedavisphotography.com/text/nature.html">Nature</a></li> <li><a href="http://www.roxannedavisphotography.com/miscellaneous.html">Miscellaneous</a></li> </ul></li><li><a href="#">Price Lists</a> <ul> <li><a href="http://www.roxannedavisphotography.com/price_list.html">Session & Prints Price List</a></li> <li><a href="http://www.roxannedavisphotography.com/wedding_price_list.html">Wedding Price List</a></li> </ul> </li> <li><a href="http://roxannedavis.zenfolio.com/">Customer Order Page</a></li> <li><a href="http://www.roxannedavisphotography.com/profile.html">About the Owner</a></li> <li><a href="http://www.roxannedavisphotography.com/contact.html">Contact Me</a></li> </ul></div></left></td></tr></tbody></table><iframe width="1000" height="667" src="http://RoxanneDavis.zenfolio.com/zf/core/embedgallery.aspx?p=21d54bef016703410e0e0e0004000000.2" frameborder="0" scrolling="no" style="background-color:#000000;"></iframe></td></tr></tbody></table><br><table style="width: 1000; border-collapse: collapse" summary="" border="0" bordercolor="#000000" cellpadding="0" cellspacing="0"><tbody><tr valign="top"><td width="350"></td><td width="300"><div><center>Website designed by Roxanne Davis<br>Copyright © 2012</center></div></td><td width="350"><center><div style="font-size: 14px; color: white;"><a href="http://www.roxannedavisphotography.com/tips.html">Tips for Choosing a Photographer</a></div></center></td></center></td></tr></tbody></table><br></td></tr></tbody></table></body></html> Here is a link to my test page where you can see the problem:http://www.reflectio...phy/test_2.html I have tried making the padding smaller to see if that would fix it, but it didn't, it just changed the padding on all of the other menu items. Link to comment Share on other sites More sharing options...
Roxanne Posted May 21, 2012 Author Share Posted May 21, 2012 (edited) I posted this as a new topic because I didn't think I would get a reply to my new post in my old thread, but while I was writing this I got a reply with a solution to my problem. For anyone who has a similar problem, the solution was: #menu-bar li:last-child {padding:0; }to/*#menu-bar li:last-child {padding:0; }*/ Thanks dsonesuk for solving my problem. Edited May 21, 2012 by Roxanne Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now