CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
Exitos
Exitos

Reputation: 29720

How can I get the borders the tabs on this site to display rounded in ie?

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...

enter image description here

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?

Upvotes: 1

Views: 67

Answers (1)

Joey
Joey

Reputation: 354566

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:

enter image description here

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.

Upvotes: 4

Related Questions