Recently, I was faced with a weird absolute positioning problem that only happen in IE7. Basically, I have several span tag with absolute position inside a div tag with "overflow:auto", it displays correctly in IE6 and Firefox 1.5 onwards, the object was positioned perfectly. The problem arise when one of our customers upgraded their browser to IE 7 and reported the problem, where text appear all over the places. "The problem doesn't happen until we scrolled further down to the div area wasn't visible initially." It was quite some time to discover the cause of the problem, pasting the HTML to W3C mark up validator (http://validator.w3.org/) and no problem found. I tried to change the overflow from auto to "overflow:scroll" and the problem gone.
I finally ended up setting a different style for IE7, there is a good reference on how to set CSS to specific browser http://www.webdevout.net/css-hacks#in_css-hyphen.
Anyway, if you have a problem with web page's positioning and it only happen in IE7, it worth to try the solution above and hopefully the problem goes away.
8 comments:
Wow, thanks so much for that little tip. I had a footer div that was appearing in the middle of the page. I changed overflow to auto to the div above it and now it works fine in IE7.
Good stuff!
Thanks for this. I added position:relative to my container div (set to overflow:auto) and all works well in IE7. No negative side effects in Firefox 2.0.9 and Opera 9.2. IE 6 appears to be fine with it as well.
this doesn't work with IE7 but working fine with firefox, any idea on how to solve it, Mainly I need to have an absolute div within another div that has overflow:auto
#container {
height:100px;
border:1px solid blue;
overflow:auto;
}
#a {
height:200px;
background-color:lightblue;
float:left;
width:60px;
}
#b {
position:absolute;
top:0px;
left:200px;
height:300px;
background-color:#ff0000;
width:60px;
}
hello
-div id="container"-
-div id="a"-
inside container
-/div-
-div id="b"-
inside container but has absolute position
-/div-
-/div-
I'm trying to sort out the exact same problem as Anonymous describes... any help would be greatly appreciated! It works in all browsers, including IE6. IE7 is the only one giving me trouble on this!
Thanks for sharing nice blog..
Nice post
Thanks for sharing this post. we are waiting for next post.
Nice blog
Post a Comment