Ok starting to get pretty frustrated with this one, tried several options and think I’m doing more css damage than good!
Basically I’m tring to create an in-page menu to look similar to the one on the tesco .com homepage under ‘Direct’ with sub items; pc, phones, home electrical.
Among other problems I can’t get my width consistent for all items, tried the width attribute in several areas of my css with no success. Here is a copy:
Anchors are inline elements and therefore are only as wide as the content they hold. You cannot apply dimensions to inline elements so you need to set them to display:block instead.
e.g.
There is no need to add a class to every anchor in that list because all are reachable via the parent without needing an extra class.
[B]ul.mainpagenav li a {[/B]
color: black;
background: #ccccff;
padding: 7px 0 5px 7px;
display:block;
position:relative;/* ie6 fix*/
}
There is also no need to put Content in front of all the classes unless you have a specific reason for doing so (such as over-riding existing styles or to give more weight). Otherwise just keep it simple.
How about something like this? I didn’t check it but this is what I would do before checking it in the browser. Not sure about the line-height though because there also is a padding-top and -bottom in the link.
ul.mainpagenav {
font-size: 13px;
list-style: none;
width: 200px;
margin: 0px;
padding: 0px;
/* removed the width */
}
ul.mainpagenav li {
border-bottom: 1px solid #ffffff;
}
ul.mainpagenav a { /* no need for the classname because they are all the same */
color: black;
background: #ccccff;
display:block;
width:193px; /* width moved from a:hover to here, 193px + 7px (padding-right) = 200px */
line-height: 124%;
padding: 7px 0 5px 7px;
}
ul.mainpagenav a:hover {
background: #ECF2F9;
}
@Paul: ninja’d again. I guess that’s the difference between 31K+ and 15 posts BTW I really like that you explain why you do something instead of just giving a solution.