[css-d] Problems with unordered lists used for navigation menu in IE

[Christine Ce]

Hello everyone!

I am having a problem in IE with the navigation menu of a site I am working
on.

It's in the form of two nested unordered lists.  The page is here:
http://christinec.e-merging.net/katja/home.htm
and the CSS is here: http://christinec.e-merging.net/katja/kr3collayout.css

Here is the HTML:

    <div id="left-col">
<!-- navigation starts -->
        <ul id="main-nav">
                <li class="here"><span>HOME</span>
                <ul class="sec-nav">
                    <li><a href="*">About the artist</a></li>
                    <li><a href="*">Media</a></li>
                </ul>
            </li>
            <li><a href="*">FINE ART PRINTMAKING</a>
                <ul class="sec-nav">
                    <li><a href="*">Commissions</a></li>
                    <li><a href="*">Personal work</a></li>
                </ul>
            </li>
            <li><a href="*">SIDELINE</a>
                <ul class="sec-nav">
                    <li><a href="*">Printed t-shirts</a></li>
                    <li><a href="*">Greeting cards</a></li>
                </ul>
            </li>
            <li><a href="*">EXHIBITIONS</a></li>
            <li><a href="*">LINKS</a></li>
            <li><a href="*" class="contact">CONTACT</a></li>
        </ul><!--navigation ends-->
    </div><!--left column ends-->


and the CSS:

ul, li {
        list-style-type: none;
        padding: 0;
        margin: 0;
}

#left-col li {

        margin: 0 1em 1.4em 0;
}

#left-col ul#main-nav a {
        display: block;
        border-bottom: 1px solid #f93;
}

#left-col ul#main-nav a.contact {
        border: 1px solid #f93;
}

#left-col ul#main-nav li.here span {
        border-bottom: 1px solid #f93;
        display: block;
}

#left-col ul#main-nav li ul.sec-nav a {
        border: none;
}

#left-col ul.sec-nav li {
        margin: 0;
        padding: 0;
        display: block;
}



It's looking fine in Firefox but in IE, there is what looks like a
margin-bottom on the secondary links of the menu ( the ones in lower case).

Additionally something weird is happening right at the bottom, where the T
of CONTACT is repeated underneath and extending right across with a partial
border. I can't work out why it's there and how to get rid of it.

Thanks in advance for any help and advice.


Christine Ce
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/