Menu
In every browser I've used, except ie8, an absolutely positioned element can be positioned according to the closest parent with relative positioning.
The below code shows two divs inside a table. The top div has position: relative, however, the nested, absolutely positioned element does not respect its boundaries (in ie8, it gets positioned at the bottom of the page instead of the bottom of the parent div).
Does anybody know a fix for this?
<style>
#top {
position: relative;
background-color: #ccc;
}
#position_me {
background-color: green;
position: absolute;
bottom: 0;
}
#bottom {
background-color: blue;
height: 100px;
}
</style>
<table>
<tr>
<td><div id="top"> Div with id="top"
<div id="position_me"> Div with id="position me" </div>
</div>
<div id="bottom"> Div with id="bottom"
<p>Lorem ipsum dolor sit amet.</p>
</div></td>
</tr>
</table>
344
Absolute Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper's page box.
Absolute An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element. If it doesn't have any parent elements, then the initial document <html> will be its parent.
Declare a doctype. I'd encourage you to use the HTML5 doctype:
<!DOCTYPE html>
Add this:
#top {
//height: 100%;
}
#position_me {
//left: 0;
}
It forces IE8 to compute position correctly in quirks mode. There are many ways to get it:
//zoom: 1;
//writing-mode: tb-rl;
See http://haslayout.net/haslayout
25
That's becuase you're not using the document type. And IE working in the "quircks" mode.
Try this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
i´d always use the HTML5 doctype, but in my case the only problem was that the parent element needed "position:relative;" specifically set. after that, it worked perfectly fine.
27
You can also use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This fixed my problem!
29
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
