Width - Blue Blocks Menu

[Geologist1724]

I'm trying to use the DD Blue Blocks vertical menu:

http://www.dynamicdrive.com/style/csslibrary/item/dd-blue-blocks-menu/

Coding the width for this menu makes no sense to me. Specifically:

#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/


Clearly there is padding somewhere in this menu I don't understand. As far as I can tell the only left or right padding is "left: 9px" and margins are 0. 185 minus 9 is not 169.

Similarly, I've read all of the stuff about hacking the box model for IE, but I can't figure out where these widths come from:

* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and margins*/
}

Why 187px and 169px?:confused:

[Snookerman]

You have to count the border as well:

padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
border-left: 7px solid #1958b7;

185 - (9 + 7) = 169

Why the 187px for IE5 I don't know, don't really think you need it any more though, if anyone has IE5, they should upgrade. The second 169px is to bring it back from 187px. Since stylesheets are cascading, the last bit of code will be implemented and since IE5 doesn't like the escaped w\idth it won't see that, so the width in IE5 will be 187px, again no idea why.

[Geologist1724]

Thanks Snookerman. That helps and pretty much works. If anyone else is having trouble with this menu I found that I had to change the basic set of code also:

#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
}

This width must also be:

Desired Width (185) minus left/right padding, margins and borders (169px) in this case.

:)