Keith Purtell wrote:
The problem I've just encountered is the borders on the navigation
buttons.
You mean links (though they may look somewhat like buttons),
When I gave each list element a 1-pixel border, I knew they
would double where the elements touched. But I figured the easy fix
would be to add a 1-pixel border to the enclosing div. To my surprise,
it only added thickness at the top.
The enclosing div, with id="navigatex", has zero height. You can see this if
you tentatively set, say, a red border for it, then add 3px padding.
The reason is that the <li> elements have float: left, effectively taking
them out of the <div> box as far as height calculation is concerned.
You might consider setting a fixed height for the <div> as well as the <li>
elements - you already have fixed widths in pixels, so fixed heights can't
make things much worse.
But perhaps simpler, you could modify the borders for the <li> elements so
that doubling is avoided, e.g. setting just bottom and right border for
them, adding top border for the first row as well as left border for the
first column. This won't work if the setup is supposed to be fluid (as many
<li> elements appear in a row as the available width permits), but it isn't.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
