Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Li css / IE firefox question

    Hi,
    Quite new to css...
    hopefully someone can help me with yhis one ;-)

    I have a li list in my page.
    Firefox displays how I want it to be
    IE has margins, I can't figure out how to remove those...
    Thanks in advance!
    Quokka

    HERE IT IS:

    The difference:


    Code:
    <ul id="sitemap">
    <li><a href="front_content.php?idcat=2&amp;lang=1&amp;client=1" title="Ebene 1: Producten">Producten</a>
    <ul>
    <li><a href="front_content.php?idcat=5&amp;lang=1&amp;client=1" title="Ebene 2: Content Management">Content Management</a></li>
    </ul>
    </li>
    <li><a href="front_content.php?idcat=3&amp;lang=1&amp;client=1" title="Ebene 1: Diensten">Diensten</a></li>
    <li><a href="front_content.php?idcat=4&amp;lang=1&amp;client=1" title="Ebene 1: Contact">Contact</a></li>
    </ul>

    CSS:
    ul#sitemap
    /* Einstellungen für die Sitemap*/
    {
    color: #000000;
    float: left;
    list-style-type: none;
    width: 220px;


    }
    ul#sitemap ul {
    list-style-type: none;

    }
    ul#sitemap li {
    clear: both;

    }
    ul#sitemap li a {
    display: block;
    color: #000000;
    background-color: #9FB9FF;
    padding: 3px 0px 3px 8px;
    text-decoration: none;
    font-weight: bold;
    }
    ul#sitemap a:hover {
    color: #000000;
    background-color: #9FB9FF;

    }

    ul#sitemap ul ul{
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0px;

    }

    ul#sitemap li li{
    clear: both;

    }
    ul#sitemap li li a {
    display: block;
    color: #000000;
    background-color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    }
    ul#sitemap li li a:hover {
    color: #000000;
    background-color: #ffffff;

    }








    ul, ol, dl, li, dt, dd {
    padding: 0;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    border: 0;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    This is something I've been struggling with on several projects. I finally found two different solutions. Both work, you can choose.

    Solution #1: put whitespace between the text of the link and the closing anchor tag (</a>)
    Code:
    <li><a href="..." title="...">Producten </a>
    <ul>
    <li><a href="..." title="...">Content Management </a></li>
    </ul>
    </li>
    <li><a href="..." title="...">Diensten </a></li>
    <li><a href="f..." title="...">Contact </a></li>
    This works without any CSS changes. IE is really funny about whitespace.

    Solution #2: put padding-bottom on the LI - just 1px will do the trick.
    Code:
    ul#sitemap li {
    clear: both;
    padding-bottom: 1px;
    }
    This is the simpler solution but it will alter the spacing of your menu.

    Edit: fixed padding-bottom in #2 - it should be 1px


  •  

    Posting Permissions

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