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.
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.
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...
Set a width and height for the inner div also.
Related
I'm trying to align a child element inside a parent container.
Below you see a snippet from my code. Just the basics to make it work:
// HTML //
<div class="parent">
<div>Parent</div>
<div class="child"></div>
</div>
// CSS //
.parent { position: relative; }
.child {
position: absolute;
margin: auto;
height: 60px;
width: 40px;
top: 0;
right: 0;
bottom: 0;
}
Chrome & IE
Firefox
View example on jsfiddle
If you view this in Chrome or IE it's aligned in the middle.
But in Firefox it's not.
Is this a Firefox bug, or are Chrome and IE doing it wrong?
When you make the child smaller then the parent (in height), it's correctly aligned in the center in Firefox also. Only when it's bigger this issue appears.
Remove the bottom attribute from the child and set the top to "-20px". This is tested as working in Firefox DE ^^. You could also -100%, I'd say this would cause problems if the parent height changes, however with a set height on the child if the parent height was varying you would probably have to use a calc.
I think i found a way to fix this so it behaves the same in Chrome, IE and Firefox.
Instead of:
top: 0;
bottom: 0;
I tried:
top: 50%;
transform: translateY(-50%);
This seems to work, even in IE9.
View example on jsfiddle
This is very frustrating....
http://jsfiddle.net/RRnm8/
<div id="target">
<p>Text to appear in front</p>
</div>
#target {
position: relative;
background: red;
width: 200px;
height: 200px;
padding: 45px;
}
#target:before {
content: "content from before, should be behind #target";
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background: cyan;
z-index: -1;
}
works well on every browser, except for IE8...
it should be displayed like this:
But in IE8 you get this :'(
So the question would be how to get this to work properly in IE8?
Please provide the answer as a real working example at jsfiddle...
This user has the exact same problem. He got no answer but this which clearly doesn't work, hence my kind request for a working example demonstrating it on jsfiddle
This issue appears to be related to how IE handles the z-index stack. Where FF and Chrome treats elements with z-index document-wide, in IE, as you likely know, z-index is based upon the parent's z-index first.
I think the :before content complicates this issue and, despite it having a negative z-index, is it within the parent element. The element its index is being compared with is not the parent div, as it would be in FF or Chrome, but the content inside the div, the p element. The p element is not a block and shares the z-index of the parent div as well, so it cannot be below the :before content.
The solution is to make an inner div, or give the p element relative positioning and styling.
See: http://jsfiddle.net/RRnm8/3/
I'm trying to workaround what looks like a bug in Opera.
The undesired behaviour
is that opera puts an unnecessary vertical scrollbar on the browser window.
This happens when I have an outer div which is position:relative and has overflow-y:auto and an nested inner div which is position:absolute and happens to be taller than the height of the browser window.
for example:
<style type="text/css">
#outer {
position: relative;
overflow-y: auto;
width: 200px;
height: 200px;
}
#inner {
position: absolute;
height: 2000px;
width: 50%;
border: 2px dashed blue;
background: deeppink;
}
</style>
<div id="outer">
<div id="inner">Inner</div>
</div>
Here is a demo:
http://www.jaysweeney.com.au/overflow_issue.html
Interestingly, as you can see from the above demo, this problem does not occur
for horizontal overflow.
Here is a screenshot of what I'm seeing in Opera:
http://www.jaysweeney.com.au/screen.png
I'm using Opera 11.01 on OS X.
If anyone knows a workaround for this issue, please let me know. At the moment I'm stumped
and its too much work to change my markup and javascript to not use absolute positioning.
Thanks in advance,
Jay.
It seems indeed like this is a bug of sorts.
Only workaround I can think of is to turn off the vertical scrollbar on the browser window completely by using body {overflow-y: hidden;}
However, it's possible that's a bit too radical a measure...
I have a website at bgflirt.com that appears differently in FireFox and Chrome. This is how it looks in firefox:
and here's how it looks in chrome:
As you can see, in chrome (and safari) the page is not stretched to fit the entire screen. I'm using this code for positioning the div containing the flash on the right:
<div style="width: 200px; position: absolute; right: 0px; top: 10px; overflow: hidden;">
</div>
The page should look the way it does in firefox, in all browsers. Any ideas on how to fix this will be greatly appreciated !
With some quick tinkering, I managed to fix it. Dont know what it will do with other browsers though:
#content_wrap {
margin-left: 130px; //remove this
//other styles
}
edit: Also tried on IE8, appears that margin-left is a superfluous style.
Check if you do not have a zoom level set to lower than 100% in chrome
You might also want to set your div#container to 100% width
div#container {
padding: 0px 0px;
width:100%;
}
I've noticed that the <input> element in HTML ignores the CSS pair of "left" and "right" properties. Same for the pair "top" and "bottom". See the sample code below:
<html>
<head>
<style><!--
#someid {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
--></style>
</head>
<body>
<input type="text" id="someid" value="something"/>
</body>
</html>
The <input> should take up almost all space in the browser (except a border of 10px around it). It works fine in Safari, but in FireFox and IE the <input> stays small in the top-left corner of the browser.
If I use "left" and "width", and "top" and "height", then everything works fine. However I don't know what is the width and the height, I want them adjusted depending of the size of the browser window.
Any ideas how to work around this?
Thanks.
You can Use a Wrapper DIV
<html>
<head>
<style><!--
#wrapper {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
#someid {
/* position:relative; EDIT: see comments*/
height:100%;
width:100%
}
--></style>
</head>
<body>
<div id="wrapper">
<input type="text" id="someid" value="something"/>
</div>
</body>
</html>
It's not ignoring left or top, you'll see it does position 10px out. What's happening is that the right and the bottom are not being respected. Form elements are treated a little bit specially in layout engines, it's entirely possible FF/IE consider the width/maxlength of the input more important, I haven't really looked into why that might be.
It's a bit of a strange thing to do though. Perhaps what you'd be better off doing is looking at <textarea> which is designed to provide a large text input, which you can push to 100% dimensions by applying width: 100%; height: 100%; and take care of the 10px margin on a container div.
WFM:
<html>
<head>
<style>
body
{
margin: 0px;
}
div
{
position: absolute; margin: 2%; width: 96%; height: 96%;
}
textarea
{
position: absolute; width: 100%; height: 100%;
}
</style>
</head>
<body>
<div>
<textarea></textarea>
</div>
</body>
http://reference.sitepoint.com/css/bottom
say, regarding internet explorer (<= 6)
don’t support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together; they’ll use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height
The way it looks in Safari is not how it should display. Because you didn't specify a height value, the input will default to the size of the last inherited font size.
The right and bottom positioning will also be ignored because you're trying to set the top and left margins at the same time. Looks like they take precedence in this case.
If you need to use the input field and have it display inside the entire width and height of the browser window at the time it is seen, you need to redo the CSS like this:
body{
margin:10px;
}
#someid{
display:block;
margin:0 auto;
width:100%;
height:100%;
}
This will stretch the input field to as high and wide as the user has their browser window. It will also have a margin around each side of 10 pixels from the browser window.
If you have to have a margin, then set that in the body style or a wrapper DIV around the input field.