Jump to content

CSS3 border-radius issue


themistral

Recommended Posts

Guys,

 

I am using the border-radius.htc file to get rounded corners in IE.

 

It works brilliantly...until...

I use an element with the rounded div id on another element using a background colour.

 

<html>
<head>
<style>
h1 { font-size:24px;color:#428800; }
h2 { color:#428800;font-weight:bold; 
background-color: #f0f0f0;
width: 518px;
height: 50px;
margin: 0 auto 0 auto;
padding: 0px;
border: 1px solid #d7d7d7;

-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(/css/border-radius.htc);
}
#content { float:left;margin:0;padding:0 5px;width:960px;background:url(/images/template/main-background.jpg); }
#main { float:left;margin:0 15px 0 10px;width:520px;background:transparent; }
</style>
</head>

<body>

<div id="content">

<div id="main">

<h1>Contact Us</h1>

<h2>Advertising Opportunities</h2>
<h2>Editorial Enquiries</h2>
<h2>Order Enquiries</h2>

</div>

</div>

</body>
</html>

 

If I remove the background image on #content then it works ok.

If anyone can help me out with this, I would be really grateful!  :D

Link to comment
https://forums.phpfreaks.com/topic/214890-css3-border-radius-issue/
Share on other sites

Your problem does not lie within your css3. The problem is actually in your html. Internet explorer is very strict about having the doctype defined. Simply add this to the top of your html document.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

So that it looks like:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
h1 { font-size:24px;color:#428800; }
h2 { color:#428800;font-weight:bold;
   background-color: #f0f0f0;
   width: 518px;
   height: 50px;
   margin: 0 auto 0 auto;
   padding: 0px;
   border: 1px solid #d7d7d7;

   -moz-border-radius: 11px;
   -webkit-border-radius: 11px;
   border-radius: 11px;
   behavior: url(/css/border-radius.htc);
}
#content { float:left;margin:0;padding:0 5px;width:960px;background:url(/images/template/main-background.jpg); }
#main { float:left;margin:0 15px 0 10px;width:520px;background:transparent; }
</style>
</head>

<body>

<div id="content">

<div id="main">

   <h1>Contact Us</h1>

   <h2>Advertising Opportunities</h2>
   <h2>Editorial Enquiries</h2>
   <h2>Order Enquiries</h2>

</div>

</div>

</body>
</html>

I hope I could be of some assistance.

Thanks,

Colton Wagner

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.