Geek Answers Handbook

CSS: absolute button positioning in Firefox

I want to display a button that accepts all the spaces of its parent, which in itself is absolute.

But it looks like Firefox has an error (everything works fine in Chrome and Safari (Webkits), I can not test IE because I am on a mac (if anyone can test and say in the comment if it starts or not, It would be very nice)).

Purpose:

enter image description here

The div and button together contain a wrapper, which is an absolute position.

HTML code:

<!DOCTYPE html> <html> <head> <style type="text/css"> .wrapper { background-color: red; position: absolute; width: 100px; height: 100px; } .inner { background-color: blue; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } </style> </head> <body> <div class="wrapper" style="top: 50px; left: 50px;"> <div class="inner">div</div> </div> <div class="wrapper" style="top: 50px; left: 200px;"> <button class="inner">button</button> </div> </body> </html>

It is pretty simple. The problem is that in Firefox it looks like this:

enter image description here

Do you have any idea why Firefox makes this code the same as yours and do you have a workaround using similar positioning?

EDIT: I can't (and don't want to) set the width and height of the inner child. The reason is that I use GWT with layout mechanisms. The GWT layout uses bottom / top / left / right elements for position and size, so I cannot change this behavior. Everything works with a classic div. The problem is only with the button.

+8
html css cross-browser firefox
source share
3 answers

The reason this is done is because <button> is a replaced element, at least in Gecko, and for replaced elements, the rules are left: 0; right: 0 left: 0; right: 0 means in CSS, different from those for non-replaceable elements ...

+3
source share

Try to add

 min-width: -moz-available;

to the ad .inner .

I found that it works even in Internet Explorer 7+. In IE6, this fails, but this is hardly a surprise. Unfortunately, it also fails in Opera as well as in Firefox.

+6
source share

Set the width and height for the inner div.

+3
source share

More articles:


All Articles