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

Comments

Leave a comment of your own

If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.

Use of HTML for comments is not available.

In an effort to combat spam, you will be able to post your comment after you preview.





Powered by Movable Type 3.2 Creative Commons License: Some Rights Reserved © 2000-2005

Site feeds. Hofully valid XHTML and CSS. No kitties were harmed in the making of this website.