# Vertical Stack of Buttons

**URL:** <https://forum.kirupa.com/t/vertical-stack-of-buttons/257271>\
**Category:** web dev\
**Created:** [April 11, 2008, 11:59pm UTC](https://forum.kirupa.com/t/vertical-stack-of-buttons/257271 "2008-04-11T23:59:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pherank](https://avatars.discourse-cdn.com/v4/letter/p/4af34b/32.png) [@Pherank](https://forum.kirupa.com/u/Pherank)\
**Post date:** [April 11, 2008, 11:59pm UTC](https://forum.kirupa.com/t/vertical-stack-of-buttons/257271/1 "2008-04-11T23:59:27Z")

</div>

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](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:

```auto
<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:

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

```