SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    Position: relative acting like position: fixed in IE

    Hallo monks and gurus,

    I have a strange setup, and in this strange setup, I get anyone who is relatively positioned acting like they are fixed positioned, with both IE6 and 7.

    I'm building a site which imitates Stephane Tartelin's except that I'm not putting my page into Quirks Mode (which I think makes a difference).

    I'm not terribly happy with the idea that I must use a fixed height: 100%. Min-height kept dying on me : (

    This is a basic setup:
    <html, head, blah blah blah, standards mode>
    <body>
    <div id="headerwrap">
    stuff...
    </div>
    <div id="sliderwrap">
    <element class="boxhouder">
    stuff... some elements were at one point position: relative for image replacement...
    </element>
    </div>
    </body>
    </html>

    So, fairly simple setup, with some more complicated stuff inside.

    Code:
    #headerwrap {
      float: left;
      width: 230px;
      height: 100%;
    }
    * html #headerwrap {margin-right: -3px;}
    
    /*header is direct child of headerwrap, and set to pos:rel to abso-po some children*/
    #header {
      position: relative;
    }
    * html #header {position: static;}
    As you can see, a fix, though here only IE6 was being weird, and 7 was ok.

    Code:
    #sliderwrap {
      width: auto;
      height: 100%;
      overflow: auto;
    }
    /*h1 is a direct child of sliderwrap, however there are also h2's inside .boxhouder*/
    h1 {
      position: relative;
      text-align: center;
      font: bold 1.8em/2em "cooper black", "century schoolbook l bold", "courier new bold", georgia, serif;
    }
    
    .boxhouder {
      float: left;
      margin: 0 -999em 20px 0;
    }
    	.boxhouder div {
    	  float: left;
    	  width: auto;
    	  height: 480px;
    	  margin: 5px 10px;
      	  white-space: nowrap;
      	  background-color: #fff;
    	  border: 1px solid #000;
    	}
    Sometimes IE6 needs a set width on whoever holds teh .boxhouder class (when a form has that class, IE6 becomes very, very wide). Anyone inside or a sibling to any children of .boxhouder destroy IE if they get floated to the right as well. Currently manually setting distances and widths. This is something I'll need to fix or solve at some point. It doesn't matter too much now that the site is simple.

    Anyway, if you see the h1, it's positioned relatively, and acts as expected in modern browsers but acts like position:fixed in IE. I think the reason it's doing this is when I set the element to position: relative, it's somehow no longer considered part of someone in #sliderwrap, but someone in the body, who does get its own vertical scrollbar (non-functional) in IE but doesn't actually scroll. Only #sliderwrap and .boxhouder scroll (if the stuff inside is tall enough to scroll vertically).

    So far, only one page on this horizontal site has this ability to get vertical so the h1 isn't a huge deal. However this robs me of the ability to use cool stuff like image replacement, or any other reasons I may need position: relative.

    Does anyone know why position: relative would affect IE like this? Sure, possibly Haslayout, though so far I haven't found anything being affected when I try to change states.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    LOL MY FRIEND JUST HAD THIS PROBLEM! He gave position:relative; to this select because I know with file input buttons adding postion relative allows things to do stuff to...at least in IE..it's sorta a hack. The only way we got it to work was removing position relative(we were on school computers so IE7...). We moved it via margins instead.

    As to your question I have no idea as to why IE did this though I will certainly be keeping an eye on this thread because I was stumped.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    It's a pretty weird setup, being horizontal. I've had to do more hacks than expected, though possibly better technique could avoid a lot of those.

    Example front page, work-in-progress.

    I'm tempted to make the left float overflow: auto or overflow-y: auto, just because that 100% height can cut the bottom of the menu off in a small browser.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •