The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 8 of 8

Thread: [CSS] Default Windows IE ul list padding-bottom

  1. #1

    [CSS] Default Windows IE ul list padding-bottom

    Greetings,

    So here I am creating ul's and styling them with CSS, and when I test in windows with IE, each list item has an added 10 or so pixel padding that spaces out the list items really awkwardly.

    the HTML code is generic:

    Code:
    <ul id="childBlueList">
                <li><a href="#">National Institutes</a></li>
                <li><a href="#">Reginal Solutions</a></li>
                <li><a href="#">Technologoy &amp; Services</a></li>
            </ul>

    and the CSS: (that works in every other browser in the world except blasted Windows IE!!)


    Code:
    .childBlueList
    {
        display: block;
        list-style: none;
        margin: 0px;
        padding: 0px;
        border-bottom: 2px dotted #8aadc4;
    }
    
    .childBlueList li
    {
        display: block;
        margin: 0px;
        padding: 0px;
    }
    
    .childBlueList li a
    {
        display: block;
        color: #446d87;
        text-decoration: none;
        padding: 0px;
        margin: 0px;
        padding: 5px 0px 5px 0px;
        border-top: 2px dotted #8aadc4;
    }
    
    .childBlueList li a:hover
    {
        background-color: #c5dff3;
    }
    What can I do? I've applied a global *{padding: 0; margin: 0;} and all my ul rules have padding and margin set to 0 except the li a chunk which has top and bottom padding of 5 px to make the buttons bigger...... Why IE??!?!!? WWWWHHHHYYY!?!?!?!?

  2. #2
    trying putting each LI on one whole line.. ie like -> <li></li><li></li><li></li> insted of a bringing them down to the next line..

  3. #3
    Quote Originally Posted by al-do
    trying putting each LI on one whole line.. ie like -> <li></li><li></li><li></li> insted of a bringing them down to the next line..


    Ewwwwwwwwww




    I'll try it

    Here's some screenshots for you people:


    Firefox:
    (Good)

    Windows: (Bad)
    Last edited by fasterthanlight™; October 3rd, 2006 at 12:14 PM.

  4. #4
    With styling, you could do this
    Code:
    li {
    height: 1em;
    }
    html>body li {
    height: auto;
    }

  5. #5
    in
    HTML Code:
    .childBlueList li a
    {
        display: block;
        color: #446d87;
        text-decoration: none;
        padding: 0px;
        margin: 0px;
        padding: 5px 0px 5px 0px;
        border-top: 2px dotted #8aadc4;
    }
    add
    Code:
    height: 1%;
    Let us live so that when we come to die even the undertaker will be sorry. - Mark Twain
    Don't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.

  6. #6
    Quote Originally Posted by al-do
    trying putting each LI on one whole line.. ie like -> <li></li><li></li><li></li> insted of a bringing them down to the next line..
    Just for future reference there's no difference between
    Code:
    <li></li><li></li>
    and
    Code:
    <li></li>
    <li></li>
    the inline version just is formed uglier
    Let us live so that when we come to die even the undertaker will be sorry. - Mark Twain
    Don't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.

  7. #7
    well i had a problem awhile back that was fixed by that issue.. so i dunno weird bug i guess

  8. #8
    Nice one simp, you hit the nail on the head with that one, works perfectly now!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012