SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Padding problem on UL in all versions of IE

    I have some text navigation at the bottom of my layout. The nav links are list items in a ul and these list items are floated left. There are enough links that they wrap around and take up two lines.

    In order to place the ul where I want it in my footer div, I added 25px of padding-top to the ul. In all browsers *except* IE, this is working fine. In all versions of IE, however, it puts the padding not only above the start of the ul (where I want it), but also above the second line of links, creating a horrible gaping (25px) space between my two lines of links. When I remove the padding, the gaping space disappears but then in all browsers (IE included) my links are starting at the start of the footer div rather than where I want them to.

    I tried using margin-top instead of padding-top and all browsers just ignored that and it had no effect. Anyone have any ideas?

    You can view my screen shots on Browsercam at:
    http://www.browsercam.com/public.aspx?proj_id=403449

    Here is the relevant portion of my CSS (the suspicious character is the padding-top on #footer ul:

    #footer {
    width: 760px;
    background-image: url(footer.gif);
    background-repeat: no-repeat;
    margin-top: 50px;
    font-size: 95%;
    }

    #footer ul {
    margin: 0;
    padding: 0;
    padding-top: 25px;
    line-height: 1.4;
    }

    #footer ul li {
    margin: 0;
    padding: 0;
    float: left;
    border-right: 1px solid #000;
    padding-left: 5px;
    padding-right: 5px;
    }

    .first {
    padding-left: 0 ! important;
    }

    #final {
    border: none ! important;
    }

    #copy {
    clear: both;
    padding-top: 20px;
    }

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

    It's a "haslayout" issue (see faq). Just add a width to the ul and it will be alright.

    Code:
    #footer ul {
    margin: 0;
    padding: 0;
    padding-top: 25px;
    line-height: 1.4;
    width:760px
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thank you Paul!

    I am glad it was an easy fix and I learned something too. That was my first encounter with the hasLayout issue in IE and since I got your reply, I've read more about it so I understand.

    Thanks again!


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
  •