Table Color on MACs

Here's a cross-platform question for you to ponder:

My tables appear with borders on Windows machines with a gray 3D border by default. However, on MAC machines, the borders are not 3D and appear in the color of the text set in the <body> tag. How do I make my table borders look the same on the MAC? I'm most concerned about the color at this point.

The browser is IE 5.0 on the MAC.

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

use stylesheets to specify the color of the border and adjust the width of the border in the stylesheet as well.

<table cellspacing="2" cellpadding="2" border="1" style="border-color: #990000; border-width: 1px;">
Macs and PCs display many of the default browser elements differently. Buttons, borders, form fields, etc. are rendered differently. This is a system thing, and there is NOTHING you can do about it -- except use stylesheets to TRY to get them closer. They will probably still not look exactly the same, and the only way you can get form buttons to look the same is to use images for them -- but it's the only thing that even gives you a shot at having the elements render the same.

Or, if you're really a control freak, you can set the borders on your tables by using a cell that spans all the columns at the top and bottom, and an extra cell at the beginning/end of each row. Size these to the height (for the top/bottom) and the width (for the edges of the row) you want the border, set the background color of the cell the color you want, and put a transparent gif set to the height or width you want to force the cell to. This will work correctly for EVERY platform, browser, and doesn't rely on stylesheets so you can be pretty sure it will work on older browsers without stylesheet support too.

But it's a pain... ;-)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dplambertAuthor Commented:
raizon's solution works, but the table is 2D. It also forces 2D on the Windows platform. The border is a solid color. Is it at all possible to retain a 3D appearance across the board?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

No. The systems render the borders differently. You can't force them to render the same.

The only way you can make them look the same is to create graphics, and use extra cells for them. But, as I said before, that's a major pain.

Look at it this way -- anybody who's using a Mac NEVER sees a table border as 3d. Yours won't look any different from any other table. It's also unlikely they'll see it on a PC -- and if they have a PC, they've probably figured out by now that the browsers don't work quite the same.
And one more thing...

Does the border being different cause the page not to be usable? Does it change the content? Does it do anything other than make a very minor difference in how it LOOKS?

If it ain't functional, you fix it. If it's functional but you just don't like that it looks different -- get used to it. ;-) It's the web. You have LITTLE control over how things look.
By increasing the border-width in the stylesheet it will give the border a 3-D effect on PC but I'm not sure about how MAC will be effected.

I do disagree with webwoman however on having LITTLE control over how things look.  Thats why the CSS specifications were created.  To give web designers more control over how things look.  

If it were indeed true that we had little control over our design then why is it that the web consists of a vast variety of unique design accross the entire web.  Some designers work purely with CSS while others rely on Graphics, the good designers utilize all their tools available to deisgn a site that is both functional and asthetically pleasing.

If I had to just "get used to it" because I couldn't get a design to look the way I want it to I probably wouldn't be in this business.

I'm sorry webwoman but I disagree.

dplambertAuthor Commented:
For the answer, I see that raizon gave the syntax for the solution but webwoman gave me a valuable tip that tables are never 3d on the Mac. So who gets the points?
You still have little real control over how things look -- they could be using an old browser without style support, could be on an old, 15in, very dark monitor, could override the stylesheet, could be using a screen reader. They can turn off graphics, have the color on their monitor all wrong, not have any of th efonts you expect.

You can control it much BETTER, yes. Things have come a long, long way. But YOU don't control the size of the window, the browser version, the fonts (even if they're there to use). You SUGGEST -- it's up to the user/browser to take your suggestions or not. Most do -- but they don't HAVE to.

Compared to a PRINT document, where you control the color, paper, type, type effects, leading, kerning, graphics, position of everything on the page, etc. -- you have NO control over how a web page looks to the user.  
Give webwoman the points.
webwoman puts succintly what I keep trying to tell people: It ain't print!

Why is it that people keep focusing on making something look exactly the way they think it should instead of keeping CONTENT at the forefront of their minds?!
dplambertAuthor Commented:
I know that web pages are rendered differently across different platforms and browsers. However, this deals with a special case and the customer wants that.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.