Question

I have a site….

http://samyoga.apphb.com

When I look in Firebug I get rounded edges on the navigation tabs. However when I look in IE I dont. What really confuses me when looking at the CSS in IE developer tools I get…

But when I look at the CSS I have…

#menu {
    width: 940px;
    height: 58px;
    margin: 0px auto;
    padding: 0px 20px 0px 20px;
}

#menu ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
}

#menu li {
    display: inline;
    text-align:justify;
}

#menu a {
    margin: 0px;
    padding: 10px 12px 10px 12px;
    line-height: 56px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #262626;
    border: none;
}



/*set the radius*/
#menu .current_page_item a, #menu .current_page_item a:hover {
    background: #E91370;
    color: #FFFFFF;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-top-left-radius:4px;
}


#menu a:hover {
    background: #FF77C8;
    text-decoration: none;
    color: #FFFFFF;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-top-left-radius:4px;

}

Where on Earth are all of those extra properties coming from? And how can I make the edges rounded because when I set the ^ CSS it doesnt show on IE not sure what im doing wrong?

Answer 1

Use a doctype so IE switches to Standards Mode for displaying the page. Currently you’re in Quirks mode which is roughly IE 5’s rendering of a page. You don’t want that. Ever.

It surprises me a bit that you didn’t see it, since you were already in the developer tools where the rendering mode is displayed in the menu bar:

And I’m not sure what you mean by »all of those extra properties«. It looks like IE expands shorthand properties for padding, margin and border so you see a few more than defined, but they’re the same rules.