Vertical Stack of Buttons

programming web dev
1

I’m looking for a good way to stack 11 different graphic buttons - with approximately 10px space between the buttons. I can get things working for Firefox and Safari, but not IE (which wants to add to the spacing between button DIVs). Right now, I have each of the buttons within its own DIV and the DIV height is set to 0 which seems to collapse things nicely about the image, at least in Firefox, etc. Setting margins and padding to 0 has no effect on the display in any of the browsers. Here is a link to look at:

http://www.tornedgedesign.com/_test/kirupa/vertical_bttns.html

Sorry about the missing graphics, but you can see the where the buttons are placed. What can I do to get this working in IE too? (If anyone knows of a better approach to this let me know.)

HTML looks like this:

<div id="menu1"><a href="intro01.htm"><img src="graphics/btn_mm_gs_up.jpg" alt="Getting Around" name="menu1btn" id="menu1btn" width="300" height="20" border="0" onMouseOver="MM_swapImage('menu1btn','','graphics/btn_mm_gs_over.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></div>

CSS looks like this:

#menu1 {
    position: relative;
    top: 122px;
    left: 10px;
    width: 300px;
    height: 0px; /* collapse div around image */
}