• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 461
  • Last Modified:

Rounded corners in I.Explorer using CSS

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
0
axtur
Asked:
axtur
1 Solution
 
David S.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/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now