CODEWITHSUNDEEP
cssbrowser
Andrew
Andrew

Reputation: 2539

CSS in different browsers

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>

Upvotes: 0

Views: 222

Answers (3)

Steve Day
Steve Day

Reputation: 417

I might be missing something but the second list you have included (id="menu") doesn't have any corresponding CSS in your example.

Backing up what the others have said IE8 doesn't support border-radius.

Upvotes: 0

James Hill
James Hill

Reputation: 61793

IE 9 now supports rounded corners. I'm partial to this solution for previous versions of IE:

CSS3 Pie

Upvotes: 0

John Conde
John Conde

Reputation: 219804

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

Upvotes: 2

Related Questions