Solved

Table Color on MACs

Posted on 2001-06-14
11
172 Views
Last Modified: 2010-04-09
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.

Thanks
0
Comment
Question by:dplambert
  • 4
  • 3
  • 3
  • +1
11 Comments
 
LVL 5

Expert Comment

by:raizon
ID: 6192372
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;">
0
 
LVL 19

Accepted Solution

by:
webwoman earned 75 total points
ID: 6195202
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... ;-)
0
 
LVL 3

Author Comment

by:dplambert
ID: 6195290
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?
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6195399
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.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6195407
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.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 5

Expert Comment

by:raizon
ID: 6195504
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.

Raizon
0
 
LVL 3

Author Comment

by:dplambert
ID: 6196439
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?
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6196737
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.  
0
 
LVL 5

Expert Comment

by:raizon
ID: 6208937
Give webwoman the points.
0
 
LVL 1

Expert Comment

by:Ernest022699
ID: 6209227
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?!
0
 
LVL 3

Author Comment

by:dplambert
ID: 6210581
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.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now