www.webdeveloper.com
Results 1 to 6 of 6

Thread: Rounded corners not working in IE

  1. #1
    Join Date
    Aug 2010
    Posts
    81

    Question Rounded corners not working in IE

    I'm trying to get rounded corners to work in IE and am having a heck of a time. My current status is this:
    I have the following in my CSS:
    Code:
    .roundedcontainedbar {
    	width:250px;
    	position:relative;
    	left:50px;
    	top:0px;
    	border:1px solid #666;
    	background:#999;
    
    	-moz-border-radius:10px 10px 0px 0px;
    	-webkit-border-radius:10px 10px 0px 0px;
    	border-radius:10px 10px 0px 0px;
    	behavior:url(/includes/border-radius.htc);
    }
    With it like that, the content of:
    Code:
    	<div class="roundedcontainedbar">
        Div 1<br>
    	Div 1
        </div>
    is visible, but the box itself is not.
    If I take out the position, left, and top lines, it appears! (That is, if I'm emulating IE7.) But then the whole box is rounded and not just the top corners. (Also, that prevents me from using relative positioning.)

    Any ideas on what I can do to make top-corners-only rounding work in IE, and let me use positioning?
    Thanks for any feedback.
    Liam

  2. #2
    Join Date
    Jun 2005
    Location
    United Kingdom
    Posts
    1,043
    I think you are trying to use a CSS3 feature (border-radius) not supported by IE - and that to get the rounded corner effect you'll have to use graphics.

    I've not taken much interest in CSS3 - I take it that -moz-border-radius and -webkit-border-radius are proprietary code?

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    behavior:url(/includes/border-radius.htc);
    Yes, this the cross-browser workaround for IE, but that solution is a server-side one, and some conditions must be fulfilled:

    - the code works only under a server. If locally, you should emulate a server on your computer.
    - make sure that the relative path to the HTC file is correct
    - the code will work in IE only if all the 4 corners are rounded (I am not sure for the latest version of HTC).
    - make sure you have the updated version of the htc file:
    http://curved-corner.googlecode.com/...der-radius.htc

  4. #4
    Join Date
    Aug 2010
    Posts
    81
    Quote Originally Posted by Kor View Post
    Code:
    behavior:url(/includes/border-radius.htc);
    Yes, this the cross-browser workaround for IE, but that solution is a server-side one, and some conditions must be fulfilled:

    - the code works only under a server. If locally, you should emulate a server on your computer.
    - make sure that the relative path to the HTC file is correct
    - the code will work in IE only if all the 4 corners are rounded (I am not sure for the latest version of HTC).
    - make sure you have the updated version of the htc file:
    http://curved-corner.googlecode.com/...der-radius.htc
    Thanks for the reply. But as I mentioned:
    "If I take out the position, left, and top lines, it appears! (That is, if I'm emulating IE7.) But then the whole box is rounded and not just the top corners."
    So yeah, I have the latest file, on the server, and the path is right, because it works. My complaint was that it's rounding all four corners, not just the top two.

    If that's a built-in, non-changeable property of using the HTC file for IE, well, I guess I'm SOL until (presumably) IE9 comes out.

    Thanks for taking the time to reply.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    I have to add something:

    - At least under Win7, I see that the htc file is loaded locally, as well
    - In some cases, the rounded elements does not appear in IE if one of the parent Nodes has a certain beckground. The solution is to give the immediate parent (or the next - things look strange, as there is no precise "rule") a certain CSS position, usually relative.
    - In some cases (form's buttons), IE doubles the border with an ugly, new square one (if the element has already a certain CSS border). The solution is to change the border using another hack:
    Code:
    <!--[if lte IE 7]>
    <style type="text/css">
    .buttonClass{
    border:none;
    }
    </style>
    <![endif]-->
    This code can be placed anywhere, but under the main embedded or external CSS of the document.

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Be sure you have the latesest version of css3PIE for IE installed. Some people were having problems with earlier version when using IE 8. Their demos worked just fine in IE 7/8 for me.

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