please refer to this link http://sudhakargolakaram.co.in/list.html i have set a background of #555 for the div containing the list and #ccc for each list items, for the last list item about us based on the amount of padding and margin i have applied there is a small gap left over my question is if i want the last list item to cover the remaining gap, other than creating a class for the last list item and specifying a different value of padding so that the last list item occupied the remaining gap is there any other way or creating a separate class for the list item is the only way please advice. thanks
You can use the :first-child or :last-child pseudo selector but it wont work in IE6 li:first-child { padding-left: 0 } Code (markup):
thanks for example i tried giving this and it is applying to all the links, in modern browsers and it does not work in ie #topmenu ul li a:first-child{ background: #FFFF00; } the background color should apply on to the 1st list item what is wrong in the code thanks
Don't do it with borders then. Create black background on ul and then add different background for li item and after that set padding-left for li item. Add absolute position to ul ( make it left: -borderwidth px; ) and set to position relative element -> overflow: hidden; . OR Be tricky and make background border-sized image that contains only li background color and align it to the left
#topmenu ul li:last-child a { background: #FFFF00; } thanks that worked. however last:child is not supported by ie so i guess if i need all browsers to support then the only way is to use a class i suppose also if you will notice the link where i have the file http://sudhakargolakaram.co.in/list.html safari browser only is not occupying the left and right padding specified unlike all modern browsers, i am using safari 3.2.3 so i might need to write specific css code for safari i guess or is there any alternative to solve this issue with safari also as you will notice in the link above when i adjusted the padding for the last list item using last-child #topmenu ul li:last-child a { padding: 11px 16px 12px 29px; } the last list item is starting in a new line. the remaining list items have #topmenu ul li a { color: #000; text-decoration: none; background: #ccc; display: block; padding: 11px 15px 12px 28px; } so i am able to give 1 extra px from 28px to 29px however i am not able to let the last list item occupy the remaining width, i tried giving width: 100% for the last list item but that did not work is there a solution for the last list item to occupy whatever is the remaining width fully thanks.
I find that :first-child has better support in older browsers so i generally add any padding/margin/borders to the left and use :first-child to remove it. IE 6 doesn't support any of these so, like you say, if you want full browser support then you'll need to either add a class to the first/last item or use a javascript library to do it for you.
Man, another excellent example of "Not every ejaculation deserves a name" - which is my borrowing from George Carlin on the "not every element needs a div around it" I wouldn't be sweating adding a class - I'd be sweating all the redundant, unneccessary and outdated markup techniques used on your page. Who cares if there's an extra class if you can remove the wrapping DIV and the clearing DIV? Oh BTW, since this appears to be a new page, why the blue blazes are you working in Tranny? Also kind of curious you are declaring cursor: pointer unnecessarily. Also, you are aware that thanks to differing font sizes that your menu WILL wrap to different lines if the default font is different (like say on OSX) or if the font metric changes (windows large fonts/120dpi), right? Try this, a heck of a lot cleaner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Horizontal List </title> <style type="text/css"> /* null margins and padding to give good cross-browser baseline - use this instead of * { so that form elements aren't completely borked. */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } body { color:#000; background:#FFF; } #wrapper { position:relative; /* trips a minor IE bugfix */ width:900px; margin:0 auto; } #topmenu { list-style:none; overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wrap floats IE, also chops off excess if last is too wide */ font:normal 12px/14px arial,helvetica,sans-serif; background:#555; } #topmenu li { display:inline; } #topmenu li a { float:left; display:inline; /* prevent IE margin doubling */ margin-right:5px; padding:12px 16px 12px 28px; color:#000; text-decoration:none; background:#CCC; } #topmenu .last a { margin-right:-5px; /* help prevent font size overwrap */ } #topmenu a:active, #topmenu a:focus, #topmenu a:hover { text-decoration:underline; background:#999; } </style> </head><body> <div id="wrapper"> <ul id="topmenu"> <li><a href="#">Home</a></li> <li><a href="#">Job Search</a></li> <li><a href="#">Advertisers Employers</a></li> <li><a href="#">Immigration Resources</a></li> <li><a href="#">Education Training</a></li> <li><a href="#">Contact Us</a></li> <li class="last"><a href="#">About Us</a></li> <!-- #topmenu --></ul> <!-- #wrapper --></div> </body></html> Code (markup): Spending time on that extra class isn't so bad when you can throw away those extra unnecessary markup elements, and remove a bunch of unnecessary/redundant declarations in the CSS. You'll also noticed I slapped a line-height on the font declaration and pulled the px declaration off body. PX for body fonts is just made of /FAIL/ - frankly 12px is made of /FAIL/ too from an accessibility standpoint, though I can understand using it if you are planning on image interactions. (though seriously I'd see if I could fit that as 14px or all caps)