horizontal list

[sudhakararaog]

hi

please look at this link

http://sudhakargolakaram.co.in/files/list.html

in the case of the 1st list

what the moves moves over the links a repeating grey background image appears however this background appears completely only for the 1st link i want that repeating background to appear for the remaining links as well to the complete width of the individual links as of now for the remaining links on the left side the background image is not appearing i want the background to appear on the left side of the text


in the 2nd list

the height of the containing div is 53px and i would like the list items to be within this 53px height as of now when the mouse moves over Facilities and Activities link the repeating background image appears completely for this link and not for the other links which is what i want for the remaining links

can anyone advice how i can change the list code to correct both list1 and list2

thanks

[apeg]

first one is easy... remove the margin on your containing <li> and add that as padding onto your <a> (20px). Remember the hover effect is only for the <a> and the spacing created by the margin is for the <li>

Your problem on #2 is the same except vertically not horizontal. The padding on the <a> brings your link down but cuts off right when the text is done (this is why your 2 line nav item looks good). The solution here isn't as cut and dry, but this should do the trick:

#list2 ul li a {
display:block;
height:33px;
}

How i end up with 33px is... the <li> height = 43 - the padding-top of the <a> 10px

-aPeg