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! Quote Link to comment 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? Quote Link to comment 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.