homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Table borders - outset and ridge
Cross-browser differences
lucy24




msg:4338797
 3:29 am on Jul 13, 2011 (gmt 0)

Not a question, more of an fyi.

At the very end of this thread [webmasterworld.com], there was some topic drift into the realm of border colors. I went off to investigate and forgot to post the results until now. Useful (if infuriating!) to know.

The question was: how do different browsers treat "ridge" and "outset" borders (and correspondingly "groove" and "inset"), where the CSS specifies a single "border-color" and it's up to the browser to split it into multiple colors to achieve the raising/lowering effect?

I've stuck the css and html onto the bottom of this post. I tried it first on the five browsers on my mac, and then went out and asked some other random people with random computers (notably of course MSIE on That Other Platform) to try it and send screenshots.

I tried three different colors-- red, grey, green-- and both "ridge" and "outset". This turned out to be superfluous because everyone reduced it to one light color and one dark color... except MSIE, which saw fit to interpret "outset" as "groove" and yield a total of four colors. (It also chose to read "border-spacing: 8px;" as "border-spacing: 2px;" though this pales by comparison with Chrome's decision to interpret "float: left" as "float: right".)

In brief: Apple WebKit browsers (Safari, Chrome, text editor's www preview) used the given color as-is for "light", and made a darker version for "dark".

The others on my Mac go lighter than the given color for "light" and darker for "dark"-- but they're strikingly different in effect.

Mozilla browsers (Firefox and Camino) go much lighter for the "light" side and much darker for the "dark" side.

Opera keeps a much smaller difference between "light" and "dark".

Now the plot thickens. For the "ridge" border, MSIE uses only two colors-- but they're both darker than the given color. For the border that's supposed to be "outset", MSIE renders it as "groove"-- and ends up with four different colors. That is, the "light" and "dark" sectors each get their own calculations instead of using each other's values. The lightest of the four is approximately the named color; the other three go progressively darker. (I say "approximately" because the screen shots I got were jpg, which doesn't do well with abrupt changes of color. I didn't think to ask for png.)

Example:
with border-color set to #999 (153/153/153, medium grey)

Apple WebKit switches between 153 (all three) and 69
Mozilla has 220 and 89
Opera has 204 and 76
MSIE has 114 and 76
(the four-way version is: 153 and 114 on the "light" sides; 76 and 38 on the "dark" sides)

Oh, and there was also a good bit of variation in the exact horizontal and vertical positioning. File under nagvaaqtara.

Moral: A man with a clock knows what time it is. A man with two clocks is never sure.


** the code I used for testing **

css:

body {margin-left: 10%; margin-right: 10%; background-color: #CCC;}

table {border-spacing: 8px; background-color: white;}
td {padding: 1.5em; border: 1px solid black;}

table.ridge {border-width: 16px; border-style: ridge; margin: 1em auto;}
table.outset {border-width: 8px; border-style: outset; margin: 1em auto;}

table.red {border-color: #F00; float: left; clear: left;}
table.grey {border-color: #999; margin: 2em auto;}
table.green {border-color: #090; float: right; clear: right;}

html:

<table class = "ridge red">
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

<table class = "ridge green">
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

<table class = "ridge grey">
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

<table class = "outset red">
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

<table class = "outset green">
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

<table class = "outset grey">
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

 

Paul_o_b




msg:4338888
 9:16 am on Jul 13, 2011 (gmt 0)

Interesting results thanks :) although not totally unexpected as the specs don't define the colours to be used in these situations so its left to the browsers to decide - hence the variations.

Nice to have the differences documented though so thanks for the detailed post.

I must admit I have always avoided using ridge, groove, double, outset simply for the reasons you mentioned above because they are so inconsistent between browsers especially where they need to fit into an existing colour scheme.

MichaelBluejay




msg:4393584
 9:25 pm on Dec 2, 2011 (gmt 0)

Fantastic investigation. Saved us all lots of hard work.

Of course, the sad conclusion is that if we use outset borders then our visitors are going to see different things depending on what browser they use. Hard to believe it's 2011. Some things never change.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved