themistral Posted October 1, 2010 Share Posted October 1, 2010 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! Link to comment https://forums.phpfreaks.com/topic/214890-css3-border-radius-issue/ Share on other sites More sharing options...
themistral Posted October 4, 2010 Author Share Posted October 4, 2010 Am I the only person to have come across this? Link to comment https://forums.phpfreaks.com/topic/214890-css3-border-radius-issue/#findComment-1118822 Share on other sites More sharing options...
Colton.Wagner Posted October 5, 2010 Share Posted October 5, 2010 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 Link to comment https://forums.phpfreaks.com/topic/214890-css3-border-radius-issue/#findComment-1119120 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.