Because of IE, I'm mad at CSS
I never know what to capitalize and what not to. IE or ie? CSS or css? Meh, whatever.
The brief summary is that when you add a DOCTYPE tag to the html, IE7 won't respect relative position inside a hidden overflow div unless the container div also has relative positioning.
See, I was racking my brain trying to figure out this stupid ie7 compatibility problem with my css. I had a div with "overflow: hidden" set to an explicit width and height. However, I needed to be able to move the content of the div around, so I set the inner content to "position: relative" with an exlicit top and left. Everything worked great in firefox, but IE7/ie7 was spilling the content outside of the div, like so (check it out in ie7):
I tried everything I could think of, but couldn't fix it. So I did the programmer thing, and started eliminating possibilities. I'd just delete on possibility at a time until the problem went away. Turns out it's the DOCTYPE definition at the top of the page:
As far as I can tell, ALL DOCTYPE definitions result in the problem. Great. So that doesn't help me, because I actually do want to adhere to a dtd. Poop. I Google around for a while, and can't find anything. Double-poop. After a bit more fenagling, I finally find a solution:
The trick is that the container div, for whatever reason, must also be "position: relative". I wish I could say as a master of css that doing this won't break anything, but I'm no CSS master. It doesn't affect my code at all, if that makes you feel any better.
The brief summary is that when you add a DOCTYPE tag to the html, IE7 won't respect relative position inside a hidden overflow div unless the container div also has relative positioning.
See, I was racking my brain trying to figure out this stupid ie7 compatibility problem with my css. I had a div with "overflow: hidden" set to an explicit width and height. However, I needed to be able to move the content of the div around, so I set the inner content to "position: relative" with an exlicit top and left. Everything worked great in firefox, but IE7/ie7 was spilling the content outside of the div, like so (check it out in ie7):
<div style="overflow: hidden; border: 1px solid #000;
width: 200px; height: 100px;">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"
style="position: relative;"/>
</div>
I tried everything I could think of, but couldn't fix it. So I did the programmer thing, and started eliminating possibilities. I'd just delete on possibility at a time until the problem went away. Turns out it's the DOCTYPE definition at the top of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
As far as I can tell, ALL DOCTYPE definitions result in the problem. Great. So that doesn't help me, because I actually do want to adhere to a dtd. Poop. I Google around for a while, and can't find anything. Double-poop. After a bit more fenagling, I finally find a solution:
<div style="overflow: hidden; border: 1px solid #000;
width: 200px; height: 100px; position: relative;">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"
style="position: relative;"/>
</div>
The trick is that the container div, for whatever reason, must also be "position: relative". I wish I could say as a master of css that doing this won't break anything, but I'm no CSS master. It doesn't affect my code at all, if that makes you feel any better.
Comments