www.webdeveloper.com
Results 1 to 10 of 10

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

  1. #1
    Join Date
    Oct 2012
    Posts
    10

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

    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.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    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

  3. #3
    Join Date
    Dec 2012
    Posts
    97
    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;

  4. #4
    Join Date
    Mar 2012
    Posts
    1,369
    Quote Originally Posted by maggiemkfung View Post
    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.

  5. #5
    Join Date
    Oct 2012
    Posts
    10
    Thanks so much for the insight, iBeZi! I'll have to try it AGAIN!

  6. #6
    Join Date
    Oct 2012
    Posts
    10
    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.

  7. #7
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    588
    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

  8. #8
    Join Date
    Dec 2012
    Posts
    97
    Quote Originally Posted by maggiemkfung View Post
    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.

  9. #9
    Join Date
    Dec 2012
    Posts
    19
    i would use below for firefox, safari, chrome, and opera
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    and use a <!--[if IE 6]>/7/8
    Special instructions for IE 6 7 or 8 here to display rounded corner image
    <![endif]-->

  10. #10
    Join Date
    Dec 2012
    Posts
    19
    ik images is not the best answer but its a simple method to use.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles