We help IT Professionals succeed at work.

Rounded corners in I.Explorer using CSS

axtur
axtur asked
on
Medium Priority
469 Views
Last Modified: 2013-11-19
I don't know why Internet Explorer isn't showing the rounded corners in my page, and Mozilla and Opera do show it, I'm using XHTML 1.0 Strict and CSS2 passed by the W3C validator.

Whats wrong with IE? By the way, the inner black/yellow window has already been fixed, i want to know how to set the corners of the grey window to be square also in IE as with Mozilla/Opera.

Thank you.
This is the CSS:
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #000000;
}
.rounded:before {
  background: transparent url(image/top-right.png) scroll no-repeat top right;
  margin-bottom: -20px;
  height: 30px;
  display: block;
  border: none;
  content: url(image/top-left.png);
  padding: 0;
  line-height: 0.1;
  font-size: 1px;
}
.rounded:after {
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url(image/bottom-left.png);
  margin: 2px 0 0 0;
  height: 30px;
  background: transparent url(image/bottom-right.png) scroll no-repeat bottom right;
  padding: 0;
}  
.rounded { 
margin : 1em; 
padding : 0; 
}
blockquote { 
background : #666666;
color : white; 
margin-right : -1px; 
}
.contentplace { background-color:rgb(0,0,0);color:#FF9933; width: 410px;}
.contentplace p { margin: 0 10px 0 10px; }
.topplace{ background: url(image/vHTTAjwWL-1.png) no-repeat top right; }
.bottomplace { background: url(image/sI8PziD4t-2.png) no-repeat top right; }
img.placeborder { width: 35px; height: 35px;border: none;display: block !important; } 
 
 
 img.c8 {border:0;width:88px;height:31px}
 div.c7 {
        text-align: center;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
}
 div.c6 {
        width:200px;
        padding:0;
        color:#AAA;
        font-size:9px;
        margin-top: 6px;
        margin-right: 0;
        margin-bottom: 6px;
        margin-left: 0;
}
 a.c5 {color:#AAA;font-size:9px;}
 a.c4 {color:white;font-size:9px;}
 td.c3 {background-color: #000000}
 table.c2 {background-color: #000000}
 div.c1 {text-align: left}
#Layer1 {
        position:absolute;
        left:251px;
        top:243px;
        width:18px;
        height:29px;
        z-index:1;
}
#Layer2 {
        position:absolute;
        left:364px;
        top:316px;
        width:271px;
        height:42px;
        z-index:1;
}
div.c71 {text-align: center}
#Layer3 {
        position:absolute;
        left:329px;
        top:238px;
        width:329px;
        height:40px;
        z-index:2;
}
.style1 {
        color: #333333;
        font-weight: bold;
        font-size: 18px;
}
#Layer4 {
        position:absolute;
        left:311px;
        top:149px;
        width:355px;
        height:40px;
        z-index:3;
}
.style3 {
        font-size: 24px;
        color: #000000;
}
.centered{ 
padding: 0px; 
width: 410px; 
border:0px solid #ccc; 
border-width: 0 0px 0px 0px 0px; 
margin:0 auto; 
}
div.c6 {width:200px;
        padding:0;
        color:#AAA;
        font-size:9px;
        margin-top: 6px;
        margin-right: 0;
        margin-bottom: 6px;
        margin-left: 0;
}
div.c71 {text-align: center}
p.c4 {text-align: left}
div.c3 {text-align:center;width:420;height:163;}
p.c2 {text-align: center}
img.c1 {display: none}
div.c6 {        width:200px;
        padding:0;
        color:#AAA;
        font-size:9px;
        margin-top: 6px;
        margin-right: 0;
        margin-bottom: 6px;
        margin-left: 0;
}
table.c2 {background-color: #010101}
div.c1 {text-align: center; height:125px;}
img.c1 {display: none}
.conten { background-color:rgb(255,153,51);color:#000000; width: 410px; }
.top{ background: url(image/QlFnUH4qZ-1.png) no-repeat top right; }
.bot { background: url(image/hhkYxJSxk-2.png) no-repeat top right; }
div.c8{
padding:0px;
border:0px solid black;
}
.right { float: right; }
img { border: 0; }
*****************************************
 
And this is the XHTML:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<link rel="stylesheet" type="text/css" href="css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.icra.org/ratingsv02.html"' />
 
 
<script type="text/javascript">
//<![CDATA[
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
//]]>
</script>
<title></title>
</head>
<body onload="MM_preloadImages('image/big_text_section.jpg','image/small_text_section.jpg','image/big_text_section.jpg','image/small_text_section.jpg','image/big_text_section.jpg',image/small_text_section.jpg','image/big_text_section.jpg','image/small_text_section.jpg','image/small_text_section.jpg','image/big_text_section.jpg')">
<table class="c2" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
 
<td> </td>
</tr>
<tr>
<td>
  <p><a href="http://www.domain.com/"><img src="image/logo.jpg" alt="Logo domain" width="200" height="84" id="Logo" /></a></p>
</td>
<td  align="right" valign="bottom">
<table width="525" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="http://www.domain.com/section" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('section','','image/big_text_section.jpg',1)"><img src="image/small_text_section.jpg" alt="section" width="102" height="53" id="section" /></a></td>
<td><a href="http://www.domain.com/section" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('section','','image/big_text_section.jpg',1)"><img src="image/small_text_section.jpg" alt="section" width="100" height="53" id="section" /></a></td>
<td><a href="http://www.domain.com/section"><img src="image/big_text_section.jpg" alt="_section" width="100" height="53" id="_section"  /></a></td>
<td><a href="http://www.domain.com/section" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('section','','image/big_text_section.jpg',1)"><img src="image/small_text_section.jpg" alt="section"  width="102" height="53"  id="section" /></a></td>
<td><a href="http://www.domain.com/section" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('section','','image/big_text_section.jpg',1)"><img src="image/small_text_section.jpg" alt="section"  width="101" height="53" id="section" /></a></td>
</tr>
 
</table>
</td>
</tr>
</table>
<table width="101%" border="0">
<tr>
<td>
<blockquote class="rounded style1">
<div class="c3">
  <p class="style3">TEXT</p>
  <p class="style2">TEXT</p>
<div class="centered">
  <table width="416" border="0">
 
  <tr>
    <td><div class="contentplace">
      <div class="topplace"> <img src="image/fIzop6t0R-0.png" alt="" width="15" height="15" class="placeborder c1" /></div>
      <p>TEXT</p>
      <p>&nbsp;</p>
      <div class="c71">
        <p>
          <script type='text/javascript'>
 
 
</script>
<script type='text/javascript' src='http://www.userplane.com/directory/api/js/ii.js'></script>        </p>
        <div class="bottomplace"> <img src="image/KBsSrASf1-3.png" alt="" width="15" height="15" class="placeborder c1" /></div>
      </div>
    </div>
        <div class="conten">
          <div class="bot"> <img src="image/dgXbnIzoz-3.png" alt="" width="15" height="15" class="placeborder" /></div>
        </div></td>
 
  </tr>
</table>
</div>
</div>
</blockquote>
</td>
</tr>
</table>
</body>
</html>

Open in new window

firefoxandopera.jpg
IEview.jpg
Comment
Watch Question

Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
Oh! I didn't notice the rounded corners on the gray background before.

The corners are square in IE because IE6 and IE7 don't support the :before and :after pseudo-elements.

I recommend using a technique like this instead:
http://www.456bereastreet.com/archive/200406/css_teaser_box_revisited/

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.