Question

Any lists that I make with the following CSS appear differently in IE8 and FF4. IE8 doesn’t have rounded corners, but FF4 doesn’t change colour when I hover over it. Are either of them right?

ul#mend {
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    float: left;
    text-align: left;
}

ul#mend li {
    display: inline;
    list-style: none;
}

ul#mend li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#mend li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #FF99CC;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

ul#mend li a:hover {
    background-color: #000000;
    text-decoration: none;
}

ul#mend li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#mend li.selected a {
    background-color: #fff;
    color: #000;
}

Edit: Added HTML

        <div id="menucontainer">

            <ul id="mend">
                <li>@Html.ActionLink("TicTacToe", "TicTacToe", "Games")</li>
            </ul>


            <ul id="menu">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("French", "French", "Home")</li>
            </ul>


        </div>

Answer 1

Internet Explorer doesn’t support rounded corners natively. You need to use a hack to get that done.