I mentioned in another thread that I was going to try to whip up a  
custom border/custom corner box that uses only one div without  
JavaScript. I've succeeded, but only in Safari, as of yet. I was  
planning on using IE's "expression" CSS property to make up for the  
lack of :after and :before support.

You can see the box as it exists here: <http://ohgoditburns.net/TEST/ 
tyson_box/> (Valid CSS and HTML, one div, uses two images)

** Safari 2.0.3: Draws entire box (woo!)
** Opera 8.52: Draws box "correctly", according to spec (see note  
below).
** Firefox 1.5.0.2: Puts ".box:after" content inside of the padding  
instead of how Safari and Opera render it. Appears not to draw  
".box:after" content at all.

Technically, the right part of the border shouldn't display because  
I'm giving it "100%" height, which is (unfortunately) illegal when  
the containing block doesn't have a specified height[1]. So, Opera  
renders it to spec, even though the spec is kinda dumb in respects to  
"height: 100%". Three cheers for Safari! Two cheers for Opera! Half a  
cheer for Firefox! (And evil stares towards IE6...)

Does anyone have any suggestions as to how I can improve this?

Thanks,
Tyson

[1] <http://www.quirksmode.org/css/100percheight.html> "The spec  
says: "If the height of the containing block is not specified  
explicitly (i.e., it depends on content height), the value is  
interpreted like 'auto'.""
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

Reply via email to