the page http://www.0011.com/css/round_corner.html displays perfectly on IE 7 and Firefox 2 and 3. And it is HTML 4.01 Compliant. For some reason, the bottom center div is a bit downward on IE 6. Even if that middle div is changed to a height of 10px, that's the same. Does any body know why that is? Many thanks!
Hello, I recommend using the IE HTML hacks to include an IE 6 specific style sheet. Note that IE6 is all web developers worst enemy. It is a major pain in the you know what. Give me a couple of minutes and I will come up with a solution for you.
Hi Again, Here is a solution that works in IE6. Note that this uses three four files. The one file is the main index.html page, a main css file, an IE6 specific css file and your rounded corner image file. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Round Corner</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /> <!--// Below is the IE hack that is used to include the style_ie6.css style sheet if the web browser version is Internet Explorer and the version if less then version 7. //--> <!--[if lt IE 7]> <link rel="stylesheet" href="style_ie6.css" type="text/css" media="screen, projection" /> <![endif]--> </head> <body> <!--// New code by CyberGeek's Software Solutions - Aaron McGowan www.cybergeeksoftware.com //--> <div class="roundedCornerBox"> <div class="ltcorner"></div> <div class="tmiddle"></div> <div class="rtcorner"></div> <div class="bodymiddle"> </div> <div class="lbcorner"></div> <div class="bmiddle"></div> <div class="rbcorner"></div> <div class="clear"></div> </div> <p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88" style="border:none"></a></p> </body> </html> Code (markup): style.css * { margin:0px 0px; } .clear { clear:both; } p { padding:5px 5px; } body { background:#FFFFFF; font-family:Arial; font-size:12px; color:#000000; } .roundedCornerBox { width:330px; margin:25px 25px; } .roundedCornerBox .ltcorner { float:left; width:15px; height:15px; background:#FFFFFF url(http://www.0011.com/css/round.gif) no-repeat top left; } .roundedCornerBox .tmiddle { background:#FFFFDB; width:300px; height:14px; float:left; border-top:1px solid #F6E4B8; } .roundedCornerBox .rtcorner { float:left; width:15px; height:15px; background:#FFFFFF url(http://www.0011.com/css/round.gif) no-repeat top right; } .roundedCornerBox .bodymiddle { background:#FFFFDB; width:328Px; height:200px; border-left:1px solid #F6E4B8; border-right:1px solid #F6E4B8; } .roundedCornerBox .lbcorner { float:left; width:15px; height:15px; background:#FFFFFF url(http://www.0011.com/css/round.gif) no-repeat bottom left; } .roundedCornerBox .bmiddle { background:#FFFFDB; width:300px; height:14px; float:left; border-bottom:1px solid #F6E4B8; } .roundedCornerBox .rbcorner { float:left; width:15px; height:15px; background:#FFFFFF url(http://www.0011.com/css/round.gif) no-repeat bottom right; } Code (markup): style_ie6.css .roundedCornerBox .bmiddle { margin-top:-1px; } Code (markup): I hope this helps you out with this problem and possibly other problems down the road. Have a great day!
Clearing div - /FAIL/ inlined style - /FAIL/ Though your 'real' problem is fairly simple - IE doesn't like to make elements shorter than either the line-height or the font-size. CyberGeeks solution is ok, but a bit code heavy. A sliding doors technique I use, which I call "Eight corners under one roof" would be a great many less classes, and be more 'reliable'. http://battletech.hopto.org/html_tutorials/eightcorners/template.html In this case based on yours, the html would be: <div class="borderBox"> <div class="borderTop"><b></b></div> <div class="borderSides"> CSS round corner <!-- .borderSides --></div> <div class="borderBottom"><b></b></div> <!-- .borderBox --></div> Code (markup): I'd keep the border for left and right since you're working so 'simple', but for top and bottom I'd be using the image via sliding doors so you only need two elements each instead of three - AND you can skip that silly clearing nonsense. My making our rounded image 2048px wide, we can make it dynamic width all the way up to that wide, and using borders we get infinate height... of course using a 16 color .gif drops our filesize to under 500 bytes. So that ends up thus: http://www.cutcodedown.com/for_others/winterheat/template.html The directory: http://www.cutcodedown.com/for_others/winterheat is unlocked so you can grab the bits and pieces. XHTML 1.0 Strict, tested in IE 5.5, 6 & 7, FF 2 & 3, Opera 9.27 and 9.52, and Safari 3. Mind you, I made it dynamic height since usually fixing the height of an element is made of /FAIL/.
Hello Deathshadow, I like your "Eight corners under one roof" very much, I recently added it to my site. I believe I found one tiny error in your tuto, when using borders_biggie.png you shouldn´t use -3056px but -3040px instead, if I´m not mistaken. Greetings.
Hi deathshadow, thanks for this great example. I'm trying to find out how to use it without border property in order to use it for shadows, decorations etc ... ? Ah sorry I almost forgot ... http://battletech.hopto.org/html_tutorials/eightcorners/template.html Thanks
I could not get it work with big_shadow image ... It must be a problem with my own div's and layout too. Ah "-3040px" ok, fixed it works like a sharm Thank you to all of you specially to deathshadow (scaring nickname ... better cssangel
I did manage to create rounded corners but could not create rounded corners + shadows not with a single image ...