css - Firefox not expanding absolute positioned div containing buttons -
i have 2 divs, both positioned absolute, 1 inside other, serving menu. in inner 1 have button elements should expand parent div. fine in theory, chrome , ie. cant work in firefox. buttons dont expand parent div.
oddly works if add tag element after buttons.
css
/* .menu-wrapper , .menu have have postion: absolute */ .menu-wrapper { position: absolute; top: 100px; left: 100px; } .menu { background: yellow; position: absolute; top: 0; left: 0; padding: 6px; } .menu-item { background: red; border: 0; margin: 2px; padding: 0; display: block; white-space: nowrap; width: 100%; text-align: left; }
html
<div class="menu-wrapper"> <!-- there trigger button here, left out simplicity --> <div class="menu"> <!-- in firefox follwoing buttons not expand width text --> <button class="menu-item">menu point 1 ....</button> <button class="menu-item">menu point 1</button> <button class="menu-item">menu point 1..</button> </div> </div>
see example here:
http://jsfiddle.net/2xbpq/ (not working in firefox)
any idea how make work in firefox?
it'll fix it, though i'm not quite sure why ff acting strange in context ..
Comments
Post a Comment