Entry
Mar16
Relative Positioning? Not Inside an Overflow!
So I was working on some design concepts at work when I stumbled accross another IE bug I hadn’t experienced yet. Apperantly using relative positioning inside an element has overflow:hidden doesn’t work like it should. The setup goes something like this for the styles:
#parent{
width:500px;
height:100px;
border:1px solid red;
overflow:hidden;
position:relative;}
#child{
width:1000px;
height:80px;
border: 1px solid blue
position:relative;
top:10px;
left:0;}
And like this for tags:
<div id="parent"> <div id="child"> sutff </div> </div>
Or something like this (which if you are using a good natured browser, the blue box should not extend the red box):
The problem I found working today, was that the blue border box should not extend further then the red border box, while in fact this the exact same thing IE was doing. Trying this at home, I’m reallising that this is one more of the many quirks that is fixed in IE7. So what’s the fix for this? Instead of using relative, use absolute. It was a relatively simple thing, but it’s funny how unless you can catch these quirks quickly, you’ll spend more time then you have on finding and testing the answer to this.
IE is not the only browser with quirks. I’ve started using all the background properties when setting backgrounds because I was having problems with the backgrounds showing up at all in safari using the single background property.
March 16, 2006 09:37 PM HTML and CSS
