SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1px gap in IE6. Absolute positioned div. Is this 'haslayout' effect?

    Hi! I've been working on a little site here:
    http://www.kingwebsites.co.uk/caboodle/foryou/index.htm

    All looks well apart from an absolutely positioned image at the lower right. All other browsers render it fine but in IE6 I get a gap between the bottom of the 'higher' image and the top of the lower one. See the 1px horizontal line in the middle of the image below:

    If you resize the text in IE6 then this line appears and disappears. This lead me to think it could be related to the 'haslayout' issue. I've tried to implement the fix without any luck so I was wondering if anything else may be causing the problem. Here's the relevant parts of the code: (the image is in the 'corner' div at the beginning):

    Code:
    <!-- START Wrapper -->
    <div id="wrapper">
    <div id="corner">
    <img src="../img/corner.gif" width="67" height="100" alt="corner" />
    </div>
    
    <!-- START Breadcrumbs -->
    <div id="breadcrumbs">
    You are here > <strong><a href="index.htm">Is it for you?</a></strong>
    </div>
    <!-- END Breadcrumbs -->
    
    <!-- START Navone -->
    <div id="navone"> <!--Left Navigation Bar -->
    </div><!-- END Navone -->
    
    <!-- START Content Wrapper -->
    <div id="contentwrap">
    
    <!-- START Navtwo -->
    <div id="navtwo">
    </div><!-- END Navtwo -->
    
    <div id="content">
    <h1>Is it for you?</h1>
    
    <div id="onecolwide">
    <p>&nbsp;</p>
    </div><!-- END 1colwide -->
    
    <div style="clear: both"></div>
    </div><!-- END Content -->
    
    <!--<div style="clear: both"></div>-->
    </div><!-- END Content Wrap -->
    
    <div style="clear: both"></div>
    </div><!-- END Wrapper -->
    Code:
    *{
    margin: 0;
    padding: 0;
    }
    
    #wrapper{
    position: relative;
    margin: 0 auto;
    width: 862px;
    padding: 0px;
    background: #EDDFCC url('../img/bg_wrapper.gif') repeat-y right;
    border-left: 1px solid #886A85;
    }
    
    #corner{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 67px;
    height: 100px;
    }
    
    #breadcrumbs{
    padding: 0 0 8px 160px;
    font-size: 80%;
    margin-right: 70px;
    }
    
    #navone{
    float: left;
    width: 141px;
    padding: 0 0px 0 19px;
    }
    
    #contentwrap{
    width: 634px;
    float: left;
    }
    
    #navtwo{
    height: 36px;
    width: 633px;
    padding-top: 1px;
    border-left: 1px solid #A690A4;
    background:  #BAA9B9 url('../img/bg_nav2.gif') top right no-repeat;
    }
    
    #content{
    width: 592px;
    background: #fff;
    border-right: 1px solid #A690A4;
    border-left: 1px solid #A690A4;
    padding: 20px 20px 0 20px;
    }
    
    img {
      border: none
    }
    Any ideas? Alternative methods?
    John King - King Websites

  2. #2
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Further research:

    The same effect is happing here: http://marc.baffl.co.uk/browser_bugs...possition.html

    The description:
    Incorrect positions when using right and bottom IE 5, 5.5, 6 and 7β2. If the height of a relatively positioned block is an an even number or the width an odd number, any element that’s positioned absolutely inside that block and use bottom or right will be 1px out. They will be either 1px too high or 1px to the left of their correct position. This depends on the width or height of the containing block. If both occur the positioned element will be incorrectly positioned on both axes.

    Still not sure if that's hasLayout. Will continue to check.
    John King - King Websites

  3. #3
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, I've finally found something that's working. And the only place I can where this is mentioned is in a small bit of CSS on the Position Is Everything site.

    One True Layout™ - Nested Rounded Corners

    They use the Star HTML selector hack to move the image down by 1px on IE6 and below:
    Code:
    /* IE Win shifts these snaps upwards - at some font-sizes (sigh) */
    * html #group_1-3 .verticalalign, * html #group_4-5 .verticalalign, 
    * html #group_7-8 .verticalalign, * html #block_9 .verticalalign
    	{
    	bottom: -1px;
    	}
    Damn you ruining my Sunday, Microsoft! *shakes fist*
    John King - King Websites

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

    It's nothing to do with haslayout and I have documented this here years ago :

    http://www.pmob.co.uk/temp/onepxgap.htm

    You can't really hack for it unless all the elements are all the same odd pixel size. Rounded corners are best not done with absolute elements anyway and are more solid if you nest the wrappers with a background corner in each.

  5. #5
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice! So you're the other place on the internet that mentions this

    Thanks for the clarification.

    I inherited this project late in the day or else I would have used the method you mentioned (honest!).
    John King - King Websites


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
  •