SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Mysterious gap rendered in IE 6 and 7. IE8 displays OK.

    Hi

    I have encountered a 5px gap when running the code below in IE6 and IE7, and I need some advise here. You can see this by clicking the yellow DIV (e.g "dright") which will show a vertical gap appearing between:

    <div id="dclear"> and <div id="dbottom">

    The problem does not appear in IE8. You can see it also in "IE8 Dev Tools" while in IE7 View/Std.

    Attached html text file.

    Thanks!

    -Itai


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1"><title>

    </title>
    <style type="text/css">

    </style>

    <script type="text/javascript" language="javascript">
    function ddl_showhide(id) {
    var e = document.getElementById('dbottom');
    e.style.visibility = (e.style.visibility == 'hidden') ? 'visible' : 'hidden';
    }
    </script>

    <style type="text/css">
    #dleft
    {
    height:29px;
    width:200px;
    float:left;
    margin: 50px 0px 0px 0px;
    padding:0px;
    border:0px;
    background-color: #CCFFFF;
    font-size:small;
    }

    #dright
    {
    height:29px;
    width:17px;
    display:block;
    float:left;
    margin: 50px 0px 0px 0px;
    padding:0px;
    border:0px;
    background-color:Yellow;
    }

    #dclear
    {
    margin:0px;
    padding:0px;
    border:0px;
    height:1%;
    clear:both;
    line-height:0px;
    margin-bottom:0px;
    }

    #dbottom
    {
    width:215;
    height:100px;
    margin:0px;
    padding:0;
    border: solid 1px grey;
    visibility:hidden;
    background-color:blue
    }


    </style>

    </head>
    <body style="margin:0; padding:0; border:0; position:relative;">
    <form name="form1" method="post" action="list.html" id="form1">
    <div>
    </div>


    <div style="margin: 0px auto; height: 500px; width: 500px;">
    <div id="wrapper" style="width:217px; margin:0; padding:0px; border:0;">
    <!-- left -->
    <div id="dleft">Load in IE8 and click on the yellow area under IE7 mode</div>

    <!-- right -->
    <div id="dright" onclick='javascript:ddl_showhide(this)'></div>

    <!-- Clear -->
    <div id="dclear"></div>

    <!-- Bottom -->
    <div id="dbottom"></div>
    </div>
    </div>
    </form>
    </body>
    </html>

  2. #2
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your issue seems to be caused by a combination of both "height: 1%" and "line-height: 0px;". I'm not entirely sure what you're trying to achieve here, but by making #dclear simply...

    Code CSS:
    #dclear {
    	height: 0;
    	clear: both;
    }

    It resolves the problem.

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tnx! but not quite. I tested it and the gap is indeed removed in IE7, but is actually wider in IE6.

    Im using MS Virtual machines to repro on XP SP3 using IE7/6

    I read somewhere that is it advisable to give some small height to a clearing divs such that IE will render them correctly, so they were just included for hacking purposes, no particular layout motivation.

    This is a mock example which I made to demo the problem.

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

    IE6 will always expand an element to accommodate the smallest content and in an empty div the content is actually the current font-size so you would need to set that to zero to reduce the size to zero.

    Code:
    #dclear {
        margin:0px;
        padding:0px;
        border:0px;
        height:1&#37;;
        clear:both;
        line-height:0px;
        margin-bottom:0px;
        font-size:0;
    }
    This will happen to any element in IE6 that you give a height to that is smaller than the font-size.

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic, it works!

    Thank


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
  •