[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Rounded corners in I.Explorer using CSS

Posted on 2009-02-09
1
Medium Priority
?
458 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
0
Comment
Question by:axtur
1 Comment
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 23593932
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question