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?

use width: -moz-available;

jsfiddle

it'll fix it, though i'm not quite sure why ff acting strange in context ..


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -