CSS navigation understanding

[FutureWebDeveloper]

The below CSS code below I need help with. I understand most of it, but there's some things I' am curious about. <code>#navigation{ width:800px; float:left; background: #5C4033;}#navigation ul{ margin:0; padding:0;}#navigation ul li{ display:inline; list-style-type:none;}#navigation ul li a{ display:block; float:left; padding:5px 10px; color:#fff; text-decoration:none; border-right:1px solid #fff;}#navigation li a:hover{ background:#000;}</code> First off, the beginning navigation id starts off by setting the width to 800px and background color, that I understand. However, what I don't get is why I' am stating float property to left in both #navigation and #navigation ul li a. Second, #navigation ul is fine, I understand that margin and padding is set to 0 for cross browser compability; however, why is it that some developers in their source code set it put 0 or 0px. Does it really matter. Can i put px (pixels) in front of the 0 or does it matter. Third, #navigation ul li display:inline meaning we set the navigation as horizontal view, but why I' am doing this if it suppose to be floating to the left. Finally, #navigation ul li a has display set to block level element. Even though it worked when I tested it in my IDE, many times in the past I would put the following code: <code>ul { margin:0; padding:0;}ul li {list-style-type:none; display:inline;}ul li a{display:block; background:green; text-decoration:none;} </code> And it wouldn't work unless I took out either display:inline or display:block;. Please help . Thank you!

[jeffman]

2. The only time you are allowed to not specify the unit is when it's 0. I think some developers figured this out years ago and used it as shorthand. It has the advantage of being instantly recognizable as 0 and not a 9 or something similar. But you have to remember to add the units if you ever change it. I think omitting the units is bad practice, but I confess that I do it. 1. Floating the div is necessary to correct an error later on. But it's a bad fix. Without it, the div does not expand vertically to enclose its content. That's because the <a> elements are floating. Floating the <a> elements is also necessary to fix an error, but it's a different fix. The author has defined the display property of the <a> elements as block. They should not be blocks. Blocks do not belong in inline elements. Since they are blocks, though, they are going to fall, even if the enclosing <li> elements are inline. To fix that, the author floated them. Now they line up. The correct style would be inline-block for both the <li> and the <a> elements. Now nothing needs to float. 3. As I said, the <a> elements are floating to correct for them being defined as blocks. But the <li> elements should be defined as inline or inline-block to make the menu horizontal. This correct. 4. The author made the <a> elements block level to force the containing <li> elements to respect the <a> elements' padding and expand vertically. As I said, this is all wrong-headed and can be solved by setting the <li> and <a> elements to display as inline-blocks. Is this really old CSS from days when all browsers did not support inline-block? We had all kinds of work-arounds back then. inline-block fixed a lot of problems. FWIW, it took a little experimentation to figure this out. I knew the CSS was wrong without trying it, but I'd forgotten why.

Edited February 16, 2013 by Deirdre's Dad

[FutureWebDeveloper]

This book was published february 7, 2013. It is an e-book I bought.

[jeffman]

Whoa. Unless the book has other problems, that surprises me. In 2013, you really shouldn't put a block-level element inside an inline element. The document will validate, because the validator doesn't check that. But on it's face it seems really wrong. Try this and see if it works in your project:

#navigation{width:800px;background: #5C4033;}#navigation ul{margin:0;padding:0;}#navigation ul li{display:inline-block;list-style-type:none;}#navigation ul li a{display:inline-block;color:#fff;text-decoration:none;border-right:1px solid #fff;padding:5px 10px;}#navigation li a:hover{background:#000;}

Edited February 16, 2013 by Deirdre's Dad

[dsonesuk]

The author has defined the display property of the <a> elements as block. They should not be blocks. Blocks do not belong in inline elements.

you really shouldn't put a block-level element inside an inline element.

No you are not allowed to place block elements within inline elements in there original default state, as it will fail html validation rules, BUT! to change there original state of an inline anchor element to block, and visa versa using CSS is not wrong, as they are still following the html validation rules. Word of caution, using display: inline-block; has a habit of creating a space between each element that uses it, this comes about because when you create each LI, people tend to stack them above each other <li> ...</li><li> ...</li><li> ...</li><li> ...</li> with each row it is treated as a new line, which adds a space of a size defined by current font-size allocated to this menu.

[FutureWebDeveloper]

Whoa. Unless the book has other problems, that surprises me. In 2013, you really shouldn't put a block-level element inside an inline element. The document will validate, because the validator doesn't check that. But on it's face it seems really wrong. Try this and see if it works in your project:

#navigation{width:800px;background: #5C4033;}#navigation ul{margin:0;padding:0;}#navigation ul li{display:inline-block;list-style-type:none;}#navigation ul li a{display:inline-block;color:#fff;text-decoration:none;border-right:1px solid #fff;padding:5px 10px;}#navigation li a:hover{background:#000;}

Thanks alot man. I just tried out the code and it works out perfectly fine. I will re-read what you posted so that I have it all down.

[jeffman]

OK, but: dsonesuk is right about those spaces. I still don't like putting blocks inside line-level elements, even if it does validate. What I shouldn't have done was recommend something I wouldn't really do. I tried to accommodate the original code, and the result is off. What I'd do myself is more like this:

#navigation{  width: 800px;  background: #5C4033;}#navigation ul{  margin: 0;  padding: 0;  height: 30px;  line-height: 30px;}#navigation li{  display: block;  float: left;  list-style-type: none;}#navigation a{  display: block;  color: #fff;  text-decoration: none;  border-right: 1px solid #fff;  padding: 0px 10px;  cursor: pointer;}#navigation a:hover{  background-color: #000;}

Notice that I'm nesting blocks inside blocks now. The float eliminates the space dsonesuk mentioned. I set some heights, too. That makes sure the enclosing div HAS a height, since we're back to floating now. The line height makes sure the text is vertically centered. I personally like to control my elements' dimensions anyway; other designers keep things relative to everything else. It's a choice.

Edited February 16, 2013 by Deirdre's Dad