LI DIV Navigation Code Questions

[itgl72]

I have been working on starting to do all my sites in CSS. I am making progress in my learnings! I hope I can get some clarification on some things. Take the example below. If someone can in plain english explain to me or clarify for me what I think is going on I may get a better unerstanding. Right now I am working on setting up navigation links using lists. I am impressed with how this works with out the need for graphics! I'm starting to scratch the surface of understanding using LISTS as my navigation display in CSS.

Below is code I pulled off a book I am reading. Further explanation on what I am doing from more experienced users greatly appreciated.

/* BEGIN LINK NAVIGATION CODE */

#links2 p {
display: none;
}
Looks like it wants the DIV to not display anything in paragraphs

#links2 {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.7em;
font-weight: bold;
width: 12em;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #9cc;
color: #333;
}

#links2 ul {
list-style: none;
margin: 0;
padding: 0;
}
Telling me that there should be no list style and padding/margin is 0

#links2 ul li {
margin: 0;
border-top: 1px solid #003;
}
Any LI inside an UL also gets margin of 0 and a 1px line up top

#links2 ul li a {
display: block;
padding: 2px 2px 2px 0.5em;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}
Tells me what it will look like in A

html>body #links2 ul li a {
width: auto;
}
I can use some clarification on this line, it seems to have really confused me. I see it often. My guess is it is telling me ANYTHING in the document gets a width of auto that has to do with #links2, ul, li, and a. Not sure. Help!

#links2 ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}

Shows me something in the hover

/* END LINK NAVIGATION CODE */

[choster]

itgl72, it would also be helpful to have a snippet of relevant HTML code, so that everyone can see what styles are intended for what markers.

[itgl72]

OK, very simple, here it is:

<div id="links2">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Home</a></li></ul>

</div>

[BonRouge]

#links2 p {
display: none;
}
Looks like it wants the DIV to not display anything in paragraphs

Yes, but this is pretty useless really, isn't it?

#links2 {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.7em;
font-weight: bold;
width: 12em;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #9cc;
color: #333;
}

#links2 ul {
list-style: none;
margin: 0;
padding: 0;
}
Telling me that there should be no list style and padding/margin is 0

Well, clearly yes.

#links2 ul li {
margin: 0;
border-top: 1px solid #003;
}
Any LI inside an UL also gets margin of 0 and a 1px line up top

Yep.

#links2 ul li a {
display: block;
padding: 2px 2px 2px 0.5em;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}
Tells me what it will look like in A

In A? This will be the basic display of the links. The 'a' is 'anchor' as in <a href...>. The background colour should fill the whole block. You have a pretty think left border and borders to the right and the bottom. I guess the top border has already been set above.

html>body #links2 ul li a {
width: auto;
}
I can use some clarification on this line, it seems to have really confused me. I see it often. My guess is it is telling me ANYTHING in the document gets a width of auto that has to do with #links2, ul, li, and a. Not sure. Help!

This refers to the same thing as the style above (#links2 ul li a) but it's targeting only good browsers - that's to say NOT Internet Explorer.

#links2 ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}

Shows me something in the hover

And er... yeah.

You don't really need much help with this. It seems the only thing that confused you was the part which hid code from IE.

[itgl72]

html>body #links2 ul li a {
width: auto;
}

I need to read up some more on that. I guess its something to do with a needed hack

[Span]

#links2 ul li a {
display: block;
padding: 2px 2px 2px 0.5em;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}

You have to read up on the box model too.

These are only the horizontal sizes of the above rule:

padding-right: 2px
padding-left: 0.5em
border-right: 1px
border-left: 10px
width: 100%

When using a Strict DTD the total width of <a> will be 100% + 13px + 0.5em. That would make those links wider than the menu they are in. The 100% width is needed to make the links clickableover the full width of the list item they are in in Win/IE. IE doesn't understand 'auto' in this place.

Other browsers would render those links too wide. Now, that's where this > child selector comes in:

html>body #links2 ul li a {
width: auto;
}

IE doesn't understand child selectors and simply skips this rule. Better browsers know this overrides the previous declared width:100%; and tells them to just make it fit.
Try looking at the menu in FF or Moz with that rule commented out.