Not clear on the Box Model Problem/Hack

[william c]

Hello there,

I'd like to use an unordered list of links as a left-hand menu a la the
fairly recent article on a list apart.
(see http://www.alistapart.com/stories/taminglists/)

So I cut and pasted the code. Except for removing the right border in
the div, the bottom margin in the div, the bottom padding in the div and
changing to pixels instead of Ems for width, the style sheet is exactly
the same. This version is at http://www.williamc.com/template_same.htm.
Looking at it in IE5.5, NN7 and Opera 6.0.5 everything seemed Ok. But
when I looked at it in IE6 it was wider than the desired 170px. I
remembered the Box model hack and put the workaround markup into the
style sheet in a second attempt (which, in addition, has the colors,
borders and padding that I want). Everything then looked right in the 4
browsers that I had on hand. http://www.williamc.com/template_sml.htm.

Thinking about it, though, I'm not sure why it works. IE6 doesn't have
the bug, right, and neither does NN7 or Opera? So why don't they all
display the same and IE5.5 display differently?

In other words if NN7 and Opera are inheriting the width for the LI A
from the DIV why don't they add on the border and padding like IE6 if
they don't have the bug?

Thanks, and if you have any good links re this problem or good CSS
menus, I'd be grateful to get them...
--williamc

[Brian]

william c wrote:

I'd like to use an unordered list of links as a left-hand menu a la
the fairly recent article on a list apart.
(see http://www.alistapart.com/stories/taminglists/)

So I cut and pasted the code. Except for removing the right border
in the div, the bottom margin in the div, the bottom padding in the
div and changing to pixels instead of Ems for width,
It's a mistake to use px instead of em for width of boxes that contain
text, for reasons discussed in ciwas numerous times.
the style sheet is exactly the same. This version is at
http://www.williamc.com/template_same.htm. Looking at it in IE5.5,
NN7 and Opera 6.0.5 everything seemed Ok. But when I looked at it
in IE6 it was wider than the desired 170px. I remembered the Box
model hack and put the workaround markup into the style sheet in a
second attempt (which, in addition, has the colors, borders and
padding that I want). Everything then looked right in the 4
browsers that I had on hand.
http://www.williamc.com/template_sml.htm.

Thinking about it, though, I'm not sure why it works. IE6 doesn't
have the bug, right, and neither does NN7 or Opera? So why don't
they all display the same and IE5.5 display differently?
Note that IE 6 in "quirks" mode emulates the bugs of IE 5.x, including
screwing up the box model width and height.
In other words if NN7 and Opera are inheriting the width for the LI
A from the DIV
Hmm. You've lost me here. I don't see any width inheritance issue.
In your css, I see

#button li a {
/* other styles deleted */
width: 100%;
}

html>body #button li a {
/* other styles deleted */
width: auto;
}
why don't they add on the border and padding like IE6 if they don't
have the bug?

The width of div#button is 170px. The width of the a element, which
you've suggested should be displayed as block, has a width of 100% for
IE6 and lower, and auto for N7 and O.

--
Brian
follow the directions in my address to email me

[william c]

Brian wrote:

B> It's a mistake to use px instead of em for width of boxes that
contain
B> text, for reasons discussed in ciwas numerous times.

Ok. I remember discussions about not using px for font-size, but not box
width. I'll do a search on that.

B> Note that IE 6 in "quirks" mode emulates the bugs of IE 5.x,
including
B> screwing up the box model width and height.

Omitting the DTD would throw IE6 into quirks mode, right? In this case,
I'm assuming that we're not in quirks mode.

In other words if NN7 and Opera are inheriting the width for the LI
A from the DIV

B>
B> Hmm. You've lost me here. I don't see any width inheritance issue.
B> In your css, I see

B> #button li a {
B> /* other styles deleted */
B> width: 100%;
B> }

B> html>body #button li a {
B> /* other styles deleted */
B> width: auto;
B> }

B> The width of div#button is 170px. The width of the a element, which
B> you've suggested should be displayed as block, has a width of 100%
for
B> IE6 and lower, and auto for N7 and O.
I made the mistake here of just pasting in code without really
re-reading the article. From a list apart...

"There is one workaround in this part of the style sheet. To make the
links active for the full width of the DIV, I made them display: block;.
This works for everything but IE/Windows. If you give the block an
explicit width of 100%, then IE/Windows plays along. But doing this
creates problems with IE5/Mac and Netscape/Mozilla. So I used the child
selector“>” to redefine the width to auto. Since IE/Windows doesn’t
understand child selectors, it ignores the rule. IE5/Mac, Opera and
Netscape/Mozilla follow the rule, and everyone is happy."

So if I'm following your point, NN and Opera are using width:auto and
IE/Windows is using width:100%. Since IE5 has the Box Model problem,
100% = 170px, it will put the padding and border into the 170
(incorrectly) but IE6 will not, making the menu too wide. And, the fact
that NN and Opera are using a different style for width explains why
they're not displaying like IE6.

Still not clear, tho, on how it would be possible to avoid using px as
units if you want a fixed widht menu.

Thanks for the help,

--williamc