On 7/10/07, Brian Crescimanno <[EMAIL PROTECTED]> wrote: > On 7/10/07, Jukka K. Korpela <[EMAIL PROTECTED]> wrote: > > In your case, it seems that there is a simple way: wrap the element <div > > id="main">...</div> inside an outer div, and set the outer div's > > background color to the desired value (white, in this case). > > An alternative solution (also using nested divs) would be to set the > border of your current div to 1px solid, add an inner div with a > transparent background, 2px margins, and a 1px solid border as well. > > I'm not sure which method is preferable--I had actually typed my > method above before Jukka's email arrived in my inbox. I think > Jukka's might win out simply because available (inner) size and > occupied space would not change from what you'd expect using a double > border. > > Thanks also for pointing out that the specs had no clarification on > which method is considered "correct."
I was just running into a related problem and wanted to point out that the specs do clarify (but it's not very easy to find). Specifically: "All borders are drawn on top of the box's background." which can be found at http://www.w3.org/TR/REC-CSS2/box.html#8.5.3 In my case I had something like the following (extremely simplified for this example): table { border-collapse: collapse; border: 3px double black; } th { border-collapse: collapse; background-color: blue; } td { border-collapse: collapse; background-color:red; } which caused the table cells background colors to bleed into the border to the right. So what the op is seeing is technically "correct" CSS, per the specs, just not what I imagine most of us would consider expected behavior. Which means that the the two suggestions above are the only ways to avoid bleeding background colors when using a double border. While I'm at it, I'll point out that although Jukka's solution does preserve inner space as Brian points out, Brian's method is the only sure fire way to have what will appear to be a double border with an even number of pixels in firefox without running into the still-lingering rounding bug. In my case, I decided that it looked enough like monitor bleed and was subtle enough that I just left it as is. Rob ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
