I'm working on a site in which various sections will have different background colors on <body> with content boxes having white backgrounds. These boxes are to have rounded corners, will be various sizes (both fixed and fluid, static and floated), and some will have content which should be 100% of the box height. Fortunately, the boxes do not have borders.
Because of the colour changes, I'd like to achieve the roundy corners with as few images as possible, ideally with one image such as http://www.dramatic.co.nz/testing/corner_green.png I want the images to be css backgrounds only for consistent results with styling off. So far I've been using a floated element at top right and absolute positioning for the two bottom corners (the "full height content" requirement). This is working well in everything tried on Windows except for IE, which is suffering from random 1px errors. e.g. on one box the bottom right image might be 1px too high, on another it might be at the correct height but 1px too far left. My fluid element seems to be working fine. Does anyone know of a method which avoids these errors? I wouldn't have thought there was a lot of calculation involved with fixed size elements. XHTML <div id="foo"><span class="tr"></span> <h2>Heading</h2> <p>blah blah</p> <p> blah blah could be floated content or all sorts of things.</p> <span class="bl"></span><span class="br"></span> </div> CSS * { margin:0; padding:0; } #foo{ /*this particular example is fixed-size*/ position:relative; width: 275px; height: 360px; margin: 10px;float: left; background:#fff; } #foo h2 { font-family: geneva,arial,'lucida sans', sans-serif; color:#fff; background: url(../img/foo_h2.png) no-repeat; text-align: center; position: relative; top: -7px; left: -7px; width: 225px; height: 30px; font-size: 21px; line-height:28px; } #foo p { margin: 8px; } .tr { display:block; float:right; background: url(../img/corner_green.png) bottom left no-repeat; width: 15px; height: 15px; vertical-align: bottom;font-size:1px;line-height:1px; } .bl {display:block; position:absolute; bottom:0;left:0; background: url(../img/corner_green.png) top right no-repeat; width: 15px; height: 15px; vertical-align: bottom;font-size:1px;line-height:1px; } .br { display:block; position:absolute; top:100%;right:0; background: url(../img/corner_green.png) top left no-repeat; width: 15px; height: 15px; vertical-align: bottom;font-size:1px;line-height:1px;margin-top:-15px; /* using bottom:0 also produces random errors in IE */ } -- Richard Grevers New Plymouth, New Zealand Orphan Gmail invites free to good homes. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
