Forum Moderators: not2easy
My menus are supposed to be 18px high with 2px spacing underneath before the next menu. The menus are in a vertical stack. top: 20 / top 40 / top 60 ... etc.
The thing is though when I ADD the doctype Gecko browsers ADD ONE pixel to the height ... why?! So I figured since IE doesn't follow standards as old as 1996 (sharing my pain?) I added in max-height. Bingo right?
*Do not pass go Bad Buzzer here*
Opera 8 Beta which I downloaded now has a 3 px space between the menus...meaning the height is 17 pixels....
Well wait a sec...look at my setup....
According to W3 the border is part of the height/width correct? So I should set my height to 18px and the border to 1px ... that will mean the non-border area will be 16px right?
I'm just so confused and I've tried DIVs as an alternative... I just don't know what to do now.
I was pondering using background images but thats just plain lame!
If you want to put space between vertically stacked elements, especially ones that have borders, use the margin property. Margins are placed between the outside edge of one element's border and the outside edge of another element's border. So try this...
html:
<ul id="buttons">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li id="last"><a href="#">Link</a></li>
</ul>css:
ul#buttons li{
height:16px;
border: 1px solid #000;
margin-bottom: 2px;
}
ul#buttons li#last{
margin-bottom:0;
}
This should give you a 16px high list item with 1px border all around (total now 18px) plus a 2px margin between each one. Note that this margin space will be filled with the <ul>s background. The last <li> is styled with no bottom margin.
cEM
