SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Australia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE mis-aligns LI dots when CSS is applied. Ideas?

    Hi everyone.

    I'm learning CSS and I've made an unordered list and styles it with CSS.

    My problem is that while it displays correctly in Firefox, in IE the list buttons appear lower then even.

    Here's the IE screenshot:
    http://www.servergrade.com.au/temp/ie-uneven-li.jpg


    The HTML is pretty standard.

    <div id="button">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Australian Hosting Plans</a></li>
    <li><a href="#">Australian Windows Plans</a></li>
    <li><a href="#">Budget Hosting Plans</a></li>
    <li><a href="#">Budget Windows Plans</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Contact ServerGrade</a></li>
    </ul>
    </div>

    The CSS is:
    #button ul {
    color: #FFFFFF;
    }

    #button li a {
    display: block;
    padding: 3px 5px 5px 0.2em;
    border-left: 5px solid #004fbe;
    border-right: 5px solid #004fbe;
    background-color: #004fbe;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }

    html>body #button li a {
    width: auto;
    }

    #button li a:hover {
    border-left: 5px solid #1c64d1;
    border-right: 5px solid #1c64d1;
    background-color: #2586d7;
    color: #fff;
    }

    The full CSS file can be seen here:
    http://www.servergrade.com.au/css/mystyle2.css
    and the page here:
    http://www.servergrade.com.au/index5.html

    I tried deleting everything in the CSS file except the CSS above, but IE still makes displays it as uneven.

    Thanks for any suggestions you may have.

    CoffeeCoder

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first thing I'd do is get rid of the DIV and apply the ID to the list itself. From there, I'd kill the default margins and padding on the UL and LI elements, then reset them to the values I want them to have (some browsers use margin for padding list bullets, while others use padding for the job).

    And you really shouldn't be mixing px and EM values in the same property like you did with the anchor's border.

  3. #3
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Australia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan.

    The code was based on piecing together multiple tutorials, presumably each with their own techniques.

    I'll try your suggestions, and hopefully improve my knowledge during the process.

    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
  •