Absolute positioned div width/height in IE (all versions)
My knowledge of css is very limited. In a larger context, I need to do something like the following:
Inner div goes inside other divs. I am trying to position the inner div, offset from the browser window and with a size that is certain percentage of the browser window. So I apply the following css to the inner div
.abs_pos {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: yellow;
z-index:1002;
开发者_运维问答 overflow: auto;
}
This works on Chrome and Firefox. But on IE (all version), the inner div's width becomes a percentage of the immediate outer div and not that of the browser window, while the height appears to be determined based on the content of the inner div.
I have the link here to the sample html file. http://orissaclassifieds.com/pos.html
So how can I make this work? Thanks for your help.
Your current code should work, but you are using an invalid/incomplete doctype which is sending IE into quirks mode.
For HTML4.01 Transitional it should be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
However, a much shorter/simpler doctype to use is HTML5's. It will trigger standards mode in all browsers:
<!DOCTYPE HTML>
You can make it work in all browsers by making the parent div have a css rule:
position:relative;
excuse me, but i don't understand why you use percentage for every parameter, also width and height inside another div... unless the main container is the body page. In your case i should use pixels, and if the div is placed into another div you can use relative instead of absolute...that is relative to the container where you're into...hope this helps
加载中,请稍侯......
精彩评论