I have noticed that lists styled with the following CSS code appear differently in Internet Explorer 8 and Firefox 4. In IE8, the rounded corners are missing, while FF4 does not change color when hovering over it. Which browser should I trust for accurate rendering?
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>