Menu
I want to display a button which takes all spaces of its parent which is himself absolute positioned.
But it seems that Firefox has a bug with it (All runs perfectly in Chrome and Safari (Webkits), I can't test on IE because I'm on mac (if anyone can test and say in comment if it runs or not, it would be really nice)).
The goal to achieve is :
Div and button are together contained by a wrapper which is absolute positioned.
The HTML code is :
<!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>
That's quite simple. The problem is that on Firefox, it renders like this :
Have you got any idea why Firefox renders this code like this and have you got any workaround using similar positioning ?
EDIT : I can't (and I don't want) set width and height on inner child. The reason is that I use GWT with layout mechanisms. GWT layout uses bottom/top/left/right to position and size elements, so I can't change this behavior. All runs with classic div. The problem is only button related.
990
An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does. When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.
Try adding
min-width: -moz-available;
to the .inner declaration.
I've found that it works even in Internet Explorer 7+. In IE6 it fails but it's hardly a surprise. Unfortunately it also fails in Opera exactly the way it does originally in Firefox.
136
The reason it renders like this is that <button> is a replaced element at least in Gecko and for replaced elements the rules on what left: 0; right: 0 means in CSS are different than they are for non-replaced elements...
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
