Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

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