SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 ignores top margin following a position-absolute block

    Seems IE7 ignores the top margin on a block that follows a position-absolute block, as illustrated by the included code. Works fine in Opera, Safari, Mozilla, Firefox. Have not tried IE6-.

    I can solve this in at least three ways...

    1) eliminate the absolute positioning on the DocHeader
    2) eliminate the width in the DocBody
    3) make DocBody position absolute

    For various reasons[1] none of these are acceptable. Is there another way?

    [1]Details relevant to the full page this was taken from:

    1) DocHeader is absolute because there are overlapping elements within, all images, that are positioned absolute within its centered margins
    2) DocBody is centered with a fixed-width border
    3) Making DocBody absolute only pushes the problem to the next block. Because DocBody does not have a fixed height the block that follows can not be positioned absolute.

    Thanks,
    Amy

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
        <title>Test Page</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
    
        <style type="text/css">
            #DocHeader
            {
                position: absolute;
            }
            #DocBody
            {
                margin-top: 234px;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <div id="DocHeader">
        </div>
        <div id="DocBody">
            <h2>This is a heading</h2>
            <p>This is some text</p>
        </div>
    </body>
    </html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ditch the XML declaration since you're not only declaring the character encoding in a META tag, but also since it'll throw IE 6 into quirks mode. Also, I see no reason why the header needs to be positioned absolutely. Do you have a specific reason for this?

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Ditch the XML declaration since you're not only declaring the character encoding in a META tag, but also since it'll throw IE 6 into quirks mode. Also, I see no reason why the header needs to be positioned absolutely. Do you have a specific reason for this?
    I'm aware of the XML thing. Will worry about IE6 when I get there. It's not causing this problem.

    The header uses absolute positioning so that position:absolute elements within it are positioned relative to the margins, not the browser window.

    Thanks.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please trust me when I say it's best to deal with IE 6 now, as well as other browsers (IE 7, Firefox, Opera, and Safari to be exact). It'll be so much easier than having to go through and hack for everything later (which is just nothing more than applying a band-aid to a gushing wound more often than not).

    Anyway, does changing the top margin to position: relative; and then feeding that margin value to the top relative location work for you (no hacks just getting rid of the top margin and replacing it with a relative top position)?

    Code:
    #DocBody {
    	position: relative;
    		top: 234px;
    	width: 800px;
    }

  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    does changing the top margin to position: relative; and then feeding that margin value to the top relative location work for you?
    Yes, it does, provided I make every block that follows relative with the same top offset. Ain't pretty, but works. Thanks!

    About the IE thing, I was following the advice of David McFarland, author of CSS The Missing Manual, which is to code for a standards-compliant browser, then adjust for IE. I was just starting to do the latter when I encountered the IE7 problem, and will next move on to IE6.

    Thanks,
    Amy

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I consider that to be bad advice (what Dave advocates) myself. I code to the standards, not to the browsers. I also check in IE 6, IE 7, Firefox, Opera and Safari as well while I'm building each section of the page. It sounds like extra work, but it actually prevents a lot of mistakes from being left around to cause problems later (and cause problems they do).

    While Firefox, Opera and Safari are "standards compliant" they do have their own quirks, and if you can catch them while you're building a site, you'll be better off than wondering why "it works in Firefox, works with hacks in IE but fails in Opera or Safari" and having to go digging through code to figure out what went wrong in the first place. Oh, and with enough experience, you might even be able to avoid having to hack for IE in the first place (most of the time) - even IE 6.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This an old IE bug and is evident in IE6 also. IE just doesn't like it when absolute elements come before static content in the html and it gets everything wrong and in some cases won't even show the absolute element.

    The solution is to move the absolute element to the end of the current stacking context.

    e.g.

    Code:
    <body>
    <div id="DocBody">
        <h2>This is a heading</h2>
        <p>This is some text</p>
    </div>
     <div id="DocHeader"> </div>
    </body>
    That will work straight away and give you the look you want.

    If you don't want to move the html there are 2 other things that will work. You could float #DocBody and then the top margin won't collapse because margins on floats never collapse.

    Perhaps the simplest solution of all though is simply to use padding top instead of margin top as padding never collapses either. You don't need to change anything else.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Test Page</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">
            #DocHeader
            {
                position: absolute;
                            
            }
            #DocBody
            {
                padding-top: 234px;
                width: 800px;
            }
        </style>
    </head>
    <body>
    <div id="DocHeader"></div>
    <div id="DocBody">
        <h2>This is a heading</h2>
        <p>This is some text</p>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The solution is to move the absolute element to the end of the current stacking context.
    Thanks, Paul. Simply replacing the margin with padding doesn't do the trick because then the border for the body, which I didn't include in the reduced example, extends to the top of the page. However, it does work when the body has a wrapper div that is offset with padding, and the margin is removed from the body.

    However, I like the solution of moving the static content to the top of the html. It has the additional advantage of being made more relevant to search engines. And best of all, it works.

    Thanks!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Glad you sorted it


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
  •