I have designed a horizontal menu consisting of buttons that I want to resize in width so that together they occupy 100% of the menu container. I need them to function like TD elements inside a TABLE.
Here is the code snippet I have developed:
<div id="menubar">
<div id="menu">
<div class="button">
<Button>Button 1</Button>
</div>
<div class="button">
<Button>Button 2</Button>
</div>
<div class="button">
<Button>Button 3</Button>
</div>
<div class="button">
<Button>Button 4</Button>
</div>
</div>
</div>
Here is the corresponding CSS:
#menubar {
width: 100%;
height: 100%;
display: table;
table-layout: fixed;
}
#menu {
display: table-row;
}
#menu .button {
position: relative;
display: table-cell;
}
#menu .button Button {
position: absolute;
right: 0px;
bottom: 0px;
top: 0px;
left: 0px;
}
While this setup works well across most browsers, it encounters an issue with Mozilla. The browser fails to recognize the relative position of the button class, causing the Buttons to overlap instead of being positioned absolutely within the "button" DIV.
Further investigation reveals that Mozilla has trouble respecting position "relative" when display is set to "table-cell."
If anyone has a workaround for achieving the desired layout, your input would be greatly appreciated.
It's worth noting that the menu content is dynamic, and the number of buttons may vary. Thus, specifying percentage widths for each button upfront is not feasible.