SitePoint Sponsor

User Tag List

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

    top distance between divs issue IE8

    Hi all,
    I have created 3 divs:
    a top one with a background image,
    a middle one with some text it
    and a third one with another background image.
    My issue is that the bottom div has a gap between it and the middle one although there's no margin or padding set for any of them.
    The top and middle are correct but the middle and bottom one have this gap and it's only like this in IE8

    The address is: http://mihaiil.eu/test/index.html and this is the css code:
    #top {
    margin:auto;
    height:74px;
    background:url(images/bg_01.png);
    background-repeat:no-repeat;
    width:900px;
    }
    #middle
    {
    margin:auto;
    background:url(images/bg_02.png);
    background-repeat:repeat-y;
    min-height:300px;
    width:900px;
    margin-bottom:0px;
    word-wrap:break-word;
    }
    #down
    {
    margin:auto;
    height:113px;
    width:900px;
    background:url(images/bg_04.png);
    background-repeat:no-repeat;
    margin-top:0px;
    }

    and the HTML one:
    <div id="top"></div>

    <div id="middle">
    <div id="txt">
    some text
    <ul>
    <li><a href="#" class="fade">some text</a></li>
    <li><a href="#" class="fade" target="_blank">some text</a></li>
    <li><a href="#" class="fade" target="_blank"><del>some text</del></a></li>
    </ul>
    some text
    <ul>
    <li><a href="#" class="fade" target="_blank">some text</a></li>
    <li><a href="#" class="fade" target="_blank">some text</a></li>
    </ul>
    </div>
    </div>
    <div id="down"></div>
    <div class="clear"></div>

    Can you please help me?

    Thanks,
    Mihai

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I don't have IE8 in front of me now, and IE6 and 7 are fine, but I do see in my browser there is some default top-bottom margin on the ul's inside. Possibly IE8 is seeing those and doing something funky with them?

    To test,
    ul {
    margin: 0;
    }

    This may screw up your bullets in some browsers, because some use left margin to show bullets while others use left-padding.

    For this reason I remove both from all lists all the time and then manually put in the one I want (usually padding) for all of them.

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, that solved the issue yeey


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
  •