SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disappearing absolutely-positioned elements in IE

    Here's a little problem we've been discussing over at the blogs...
    http://www.sitepoint.com/blogs/2010/...on-element-ie/

    The issue affects IE6 and IE7 and IE8 in compatibility mode.

    Copy the test page code from here:
    http://blogs.sitepointstatic.com/exa...-ap/index.html

    The challenge is to make the header appear in the correct location in IE6/7 by editing the CSS only and without changing the HTML or JavaScript!

  2. #2
    SitePoint Enthusiast CupidsToejam's Avatar
    Join Date
    Jun 2009
    Location
    TX
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, try and take AP off the header, then adjust the top margin of right col to line up with the others. you may need to tweek margins, but it works on my end

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the header has to come last in the source code because the columns are floated . This is a known bug.
    Code:
    <div id="page">
    
    	<div id="left">1. Left column</div>
    
    	<div id="middle">2. Middle column</div>
    	
    	
    	
    	<div id="right">4. Right column</div>
    	
    	<div id="footer">5. Footer</div>
    <div id="header">3. Header</div>
    </div>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    http://www.search-this.com/2008/04/0...absolute-mess/

    I only tested my solujtion in IE6, so IE7 will probably need the clear:both; on the header if just changing around the HTML doesn't work .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Usually if the absolute element follows a float in the same context you would also need the clear:both as well as putting the absolute element at the end of the current stacking context as Ryan mentioned.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I just added that clear:both; comment but I don't think it will be needed because I put the header (in my code) after the clear:both'd footer.

    I just added that clear:both; comment to be thorough
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have come acrros similar issues with Absolutes positioned elements in IE6.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by co.ador View Post
    i have come acrros similar issues with Absolutes positioned elements in IE6.
    Same issue and same fixes as shown above.

    I also documented this way back in 2004

  9. #9
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have to put my hands into that thanks.


Tags for this Thread

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
  •