[RESOLVED] Rounded Corners in IE 7, 8 and 9

**maggiemkfung** · 12-12-2012 09:26 AM

Having a totally frustrating experience with older versions of IE, which is where majority of the website traffic comes from. I've tried various versions of code, and nothing has responded in IE

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Tabs using CSS3 Styles</title>

<style type="text/css">
#nav { float:left; width:100%; background:#005daa; line-height:normal;}


#nav ul { margin:0; padding:10px 10px 0 50px; list-style:none;}
#nav li { display:inline; margin:0; padding:0;}
#nav a {
	float:left;
	margin:0;
	margin-right:3px;
	padding:0 0 0 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;

	/* CSS3 */
	border-top-left-radius:10px;
	border-top-right-radius:10px;

	/* Firefox */
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;

	/* Border-Radius for IE */
	behavior: url(border-radius.htc);

	background:#e5e5e7;
	border: 1px solid #999999;
	background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e7), to(#b9b9b9));
	background: -moz-linear-gradient(top,  #e5e5e7,  #b9b9b9);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e7', endColorstr='#b9b9b9');

	}
#nav a span { display:block; padding:5px 6px 4px 6px; text-align:center; color:#005daa; position:relative; left:-6px; width:95%;}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a span {float:none;}
/* End IE5-Mac hack */
#nav a:hover span {
	background:#9ebf38;
	color:#FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#b0da2e), to(#9ebf38));
	background: -moz-linear-gradient(top,  #b0da2e,  #9ebf38);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0da2e', endColorstr='#9ebf38');
	/* CSS3 */
	border-top-left-radius:10px;
	border-top-right-radius:10px;

	/* Firefox */
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;

	/* Border-Radius for IE */
	behavior: url(border-radius.htc);
	}

#nav a.On span {
	background:#FFFFFF;
	color:#005daa;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#9ebf38));
	background: -moz-linear-gradient(top,  #FFFFFF,  #9ebf38);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#9ebf38');
	/* CSS3 */
	border-top-left-radius:10px;
	border-top-right-radius:10px;

	/* Firefox */
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;

	/* Border-Radius for IE */
	behavior: url(border-radius.htc);
	}

#logoSpot {float:left; width:242px; margin-top:22px; margin-left:20px; border:0px;}
#tabbedNavigation {float:left; margin-top:30px; margin-left:0px;}
</style>
</head>

<body>
<div id="nav">
	<div id="logoSpot"><img src="Logo.jpg" width="242" height="44" alt="Logo" /></div>
    <div id="tabbedNavigation">
        <ul>
            <li><a href="#" title="Our Products"><span>Our Products</span></a></li>
            <li><a href="#" title="In Your Lab"><span>In Your Lab</span></a></li>
            <li><a href="#" title="Special Offers"><span>Special Offers</span></a></li>
            <li><a href="#" title="Games and Prizes"><span>Games &amp; Prizes</span></a></li>
        </ul>
    </div>
</div>

</body>
</html>

I've tried PIE.htc and various other hacks, but can't seem to get any of them to function as described.

**coothead** · 12-12-2012 12:17 PM

Hi there maggiemkfung,

The "border-radius" is a minor cosmetic attribute.

Your desire for it's implementation in IE8 or IE7 is misplaced.

If you do have a concern for IE8, then it should only be that it displays CSS 2 correctly.

As for IE7, do you not ever wonder why it's users have not upgraded to IE8 ?

coothead

**iBeZi** · 12-12-2012 12:43 PM

Rounded corners could be essential to some designs, it's why people used to spend ages doing hacks like using images to fake it.

To answer your question, the reason CSS3 PIE isn't working for you is because you're using the long version of the border-radius syntax to target the two corners

Code:

border-top-left-radius:10px;
border-top-right-radius:10px;

But for CSS3 PIE to work you need to use the short hand version, so for you the style would simply be

Code:

border-radius: 10px 10px 0 0;

**jedaisoul** · 12-13-2012 05:25 AM

Originally Posted by maggiemkfung

Having a totally frustrating experience with older versions of IE, which is where majority of the website traffic comes from. I've tried various versions of code, and nothing has responded in IE

Are you sure that the majority of (your) traffic is IE7/IE8? Globally they are down to <10% each. And is it that important anyway??? I just accept that a small minority of users do not see rounded corners. If they want to, they can switch to Chrome, which now has the largest share of the market.

**maggiemkfung** · 12-13-2012 07:44 AM

Thanks so much for the insight, iBeZi! I'll have to try it AGAIN!

**maggiemkfung** · 12-13-2012 07:46 AM

Yes. That's what analytics say, that MAJORITY is IE8, followed by 9 and 7.

I hear you on the "is it important anyway" -- round versus square... but where I am, I try to create the same experience regardless of platform (browser version, device, etc.). This provides the best customer experience.

**jalarie** · 12-13-2012 09:59 AM

If you don't mind having a lot of HTML code, you can find a solution that does not use images and works on all browsers here:
http://spruce.flint.umich.edu/~jalarie/jaa_kcm.htm

**iBeZi** · 12-13-2012 10:41 AM

Originally Posted by maggiemkfung

I hear you on the "is it important anyway" -- round versus square... but where I am, I try to create the same experience regardless of platform (browser version, device, etc.). This provides the best customer experience.

Good attitude to have, what people forget is that a lot of people are stuck with IE8 because IE9 is incompatible with Windows XP, which a lot of businesses and schools still use, IE6 and IE7 can probably be forgotten now, but IE8 is still relevant.

**jakemadness** · 12-14-2012 12:25 AM

i would use below for firefox, safari, chrome, and opera
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

and use a

**jakemadness** · 12-14-2012 12:26 AM

ik images is not the best answer but its a simple method to use.

Thread: [RESOLVED] Rounded Corners in IE 7, 8 and 9

Thread Tools

Display

[RESOLVED] Rounded Corners in IE 7, 8 and 9

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions