www.webdeveloper.com
Results 1 to 9 of 9

Thread: IE border radius issues

  1. #1
    Join Date
    Apr 2011
    Posts
    46

    IE border radius issues

    I have 3 divs that use the border radius commands. The header div I want to have the top 2 corners rounded. The container div all 4 sides and the footer div only the bottom two corners rounded. This seems to work in every popular browser (firefox, opera and chrome) except IE where the right sides are not cooperating.Here is my css:

    Code:
    .header {
    	background:transparent;
    	background-image:url(../images/headerfooter.png);
    	text-color:#FFF;
    	list-style:none;
    	-moz-border-radius-topleft:50px;
    	-moz-border-radius-topright:50px;
    	border-top-left-radius:50px;
    	boder-top-right-radius:50px;
    	-webkit-border-top-right-radius:50px;
    	-webkit-border-top-left-radius:50px;
    }
    
    .container {
    	width: 960px;
    	margin: 0 auto;
    	background: rgba(126, 46, 40, 0.6);
    
    	-moz-border-radius:50px;
    	border-radius:50px;
    	-webkit-border-radius:50px;
    
    	
    }
    .footer {
    	padding: 10px 0;
    	background:transparent;
    	background-image:url(../images/headerfooter.png);
    	color:#FFF;
    	-moz-border-radius-bottomleft:50px;
    	-moz-border-radius-bottomright:50px;
    	border-bottom-left-radius: 50px;
    	boder-bottom-right-radius:50px;
    	-webkit-border-bottom-left-radius:50px;
    	-webkit-border-bottom-right-radius:50px;
    }
    Last edited by gellegbs; 02-23-2012 at 02:19 PM. Reason: a misspelling

  2. #2
    Join Date
    Feb 2012
    Posts
    218
    Versions prior to IE9 do not accept border-radius.
    You can try this workaround http://www.htmlremix.com/css/curved-...-cross-browser

  3. #3
    Join Date
    Apr 2011
    Posts
    46
    I have IE9, so I dunno why it still shows. For the fix where do I link to reference border-radius.htc? They removed the link on the page to download the file so I cant upload it to my cpanel. I dunno.

  4. #4
    Join Date
    Feb 2012
    Posts
    218

  5. #5
    Join Date
    Apr 2011
    Posts
    46
    thanks ill try it out

  6. #6
    Join Date
    Apr 2011
    Posts
    46
    made the changes and the .htc file is uploaded on server. css is this now, and right side top and bottom not working, but left side is fine.

    Code:
    .header {
    	background:transparent;
    	background-image:url(../images/headerfooter.png);
    	text-color:#FFF;
    	list-style:none;
    	-moz-border-radius-topleft:50px;
    	-moz-border-radius-topright:50px;
    	border-top-left-radius:50px;
    	boder-top-right-radius:50px;
    	-webkit-border-top-right-radius:50px;
    	-webkit-border-top-left-radius:50px;
    	behavior:url(http://www.swtoriphonewallpaper.com/border-radius.htc);
    }
    
    .container {
    	width: 960px;
    	margin: 0 auto;
    	background: rgba(126, 46, 40, 0.6);
     	-moz-border-radius:50px;
    	border-radius:50px;
    	-webkit-border-radius:50px;
    	behavior:url(http://www.swtoriphonewallpaper.com/border-radius.htc);
    
     .footer {
    	padding: 10px 0;
    	background:transparent;
    	background-image:url(../images/headerfooter.png);
    	color:#FFF;
    	-moz-border-radius-bottomleft:50px;
    	-moz-border-radius-bottomright:50px;
    	border-bottom-left-radius: 50px;
    	boder-bottom-right-radius:50px;
    	-webkit-border-bottom-left-radius:50px;
    	-webkit-border-bottom-right-radius:50px;
    	behavior:url(http://www.swtoriphonewallpaper.com/border-radius.htc);
    }
    
    	
    }

  7. #7
    Join Date
    Apr 2011
    Posts
    46
    For some reason i can't correct my mistype in the last post. All the curly brackets are where they should be in the code, it was a copy and paste error. When I validate W3C tells me every border radius attribute is invalid and my rgba attribute and I did read where W3C won't validate any of the border radius or rgba attributes (not updated?). I did triple check them and they are all valid. But, yes, the problem still exists on the right side of the divs, ugh!

  8. #8
    Join Date
    Apr 2011
    Posts
    46
    It works now I misspelled the word border on the right side attributes
    I guess the most frustrating issues is the little mistakes you make.

  9. #9
    Join Date
    Feb 2012
    Posts
    218
    Little mistakes Glad you made it work.

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