SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    margin-top disapears in IE.

    Another in the series of odd old( 5-7) IE behaviors.

    The following code works fine in modern browsers.

    HTML
    <div id="hed"><div id="wrap">
    <h1 id="logo">Logo</h1>
    <div id="nav">
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
    </div>
    </div></div>


    CSS
    * {margin:0; padding:0}
    #hed {background:silver; }
    #wrap { height:200px; width:800px; margin:auto; background:#555; position:relative }
    #logo {backgroundrange; width:150px; margin-left:20px; float:left; margin-top:20px } /*margin-top:20px; fails to show in IE at all. float or positon:absolute causes #nav's top margin to be ignored in IE */
    #nav{float:right; margin-top:150px} /* margin top disapperas in IE when elem,ents are floated*/
    #nav a {display:block; padding:10px;}
    #nav a:hover {background:tan}
    #nav ul { margin-right:20px;}
    #nav li { float:left; list-style:none; backgroundrange}
    /* for IE*/
    * html #nav ul, * html #nav a { float:left; }

    As I noted in my comments, floating or using AP to position logo, makes IE ignore #logo's and #nav's margin-top property. if you remove the float ( or AP) off of #logo. then the top margin returns for BOTH #nav and #logo. Am at a loss as to why...

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Older IEs have had buggy support for margin collapse. In this case (and without testing) I suspect the logo margin has collapsed through the wrapper div, through head, through body and through html. The last collapse is completely buggy.

    See http://reference.sitepoint.com/css/collapsingmargins

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Gary,

    I thought as much. but when I did a margin collapse experiment it was also..."buggy"; essentially what I did was to add a 1px border to the #wrapper, whin in theory would have stopped the collapse, at least for the #logo element... but other than the 1px border on #wrapper it produce no change


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
  •