2

I have the following code -- which renders (oddly enough) correctly in IE, but not in Chrome or FireFox, see:

http://jsfiddle.net/eS34U/14/

.btn_group_fill { display:table;table-layout:fixed;width:100%; }
.btn_group_fill .btn { display:table-cell;float:none; }

Basically the element with the "btn_group btn_group_fill" should span the entire width -- which it does in IE -- but NOT in chrome or firefox -- obviously, I am missing some CSS element (or combination); if anyone with some insight can spot my error, I would appreciate it...

Thanks

1 Answer 1

0

I think this is specific to the button element. Presumably the browsers have different takes on how these should be presented. If you change them to span or div it renders as expected.

<div class="btn_group btn_group_fill">
    <div type="button" class="btn btn_primary">Group Button 1</div>
    <div type="button" class="btn btn_default">Group Button 2</div>
    <div type="button" class="btn btn_default">Group Button 3</div>
</div>

Example fiddle

Also, the border-collapse property may be useful here if you want the 'cells' to share borders.

border-collapse: collapse; /* is 'separate' by default */

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.