Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

No color ; CSS error?

G

geng

macrumors newbie
Original poster
Nov 18, 2007
7
0
Problem: an HTML file I created and sent to a friend does not display color on his Mac. AFAIK the internal CSS follows the rules.

Background info: my browser is Iceweasel 2.0.0.8, which runs on Debian GNU/Linux 4.0r0 (Etch, or Stable), current. I used http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html as my reference for colors. The troublesome file was created in xemacs21-mule, ver. 21.4.19-2, using the HTML mode that text editor provides. HTML is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Request: suggestions for achieving compatibility, please.

What I have done so far: requested info from him regarding his browser, including version number; asked him to check the page source of my file for errors.


Here is the (internal, not external) CSS:

<style type="text/css">
body {background-color: rgb(250,240,230);}
/* Linen */
p,h1,h3 {font-family: verdana, 'sans serif';}
p,h3 {margin-left: 10pt;}
h1 {text-align:center;}
h1 {background-color: rgb(205,133,63);}
/* Peru */
h1 {color: #0000ff;}
/* Blue */
/* h2 {color: #483d8b;} */
/* Dark Slate Blue */
h3 {color: #483d8b;}
/* Dark Slate Blue */
p {color: #191970;}
/* Midnight Blue */
</style>


Comments -- CMIIAW: HTML is (claimed to be) universal, and does work properly on all but the most uncommon browsers. Operating systems are totally irrelevant. The problem I have is probably due to (1) my error when I created the CSS, or (2) a defect in his browser.

I want compatibility with my friends who use Macs. Any tips would be sincerely appreciated!

TIA
 
There's no problems with the CSS you provided here. The problem must be somewhere else, possible a missed angle bracket or something. Is your friend seeing any color? Is it just certain parts? Also, how did you send it, as a HTML file or a zip file, or etc.? I had sent someone some web work in a zip file and he accessed it from the zip file, which ignored the CSS. That's why I ask. If your friend can send you a screen shot that may help too.
 
Thanks for the comments, Angelwatt.

The file was sent as an attachment to an e-mail message. Format was pure .html, no zip or other extras. So far, I have confirmation of the proper rendering of the page by Firefox running on a MS-Windows box; not sure about Internet Explorer yet.

Sorry, a "missed angle bracket" is outside my experience. Sounds like support for a shelf.... :)

My Mac friend saw no color at all.

I have quizzed him about how, exactly, he obtained the file and what he did with it. He has told me so far that he "dragged it from my desktop to Safari." I assume Safari is a browser, but...how did the file get onto his Desktop?? Well, I don't know what can happen when you try to open an attachment that arrives via Gmail (which he uses).

I'll suggest a screen shot. Thanks for that notion!

And I am pleased that my CSS passed inspection. It's the second or third one I have ever written, so pardon this newbie's proud grin.

Meanwhile I await a response to my queries about my friend's browser, including the version thereof.
 
Does the HTML/CSS reference to any other fils? If it does i'd zip it up then re-send it. Dragging the file to the desktop, is just like copying and pasting it there, btw.
 
Maybe you can show us the code, because it really doesn't make any sense. HTML is HTML no matter what platform you are on. Could be syntax error, but would need to see HTML.
 
geng said:
... Sorry, a "missed angle bracket" is outside my experience. Sounds like support for a shelf.... :)
Click to expand...

Angle brackets are the "<" and ">" that go around tag names. Also good for shelves.

... I have quizzed him about how, exactly, he obtained the file and what he did with it. He has told me so far that he "dragged it from my desktop to Safari." I assume Safari is a browser, but...how did the file get onto his Desktop?? Well, I don't know what can happen when you try to open an attachment that arrives via Gmail (which he uses).
Click to expand...

Safari is Mac's default browser, and by default will download files to the desktop.

I'm still thinking there's something up elsewhere in the code that Firefox is handling, but Safari isn't. My experience is that Safari is less forgiving of bad code. In an effort to resolve the problem your friend can try Firefox. Also you can, in the meantime, use a validator on your page. Go to the W3C validator page (http://validator.w3.org/) and you'll see an option to upload a file. This will tell you about errors is finds. Likely it will return a decent number of them, but that's OK. Scroll through them and see if you can decipher them and resolve whatever problem there is. It does an OK job of telling you why there's a problem, but doesn't always help. You can post some of the errors here if you need help and think it may be causing the issue.

Alternatively, if you can post the code here, even if you just place ...'s in areas to keep the content private, we may be able to help out better. If you do that be sure to use the HTML button in the toolbar, the one with those shelf brackets, I mean angle brackets, ;) It makes the code much more readable.
 
Thanks to all who have responded!

There will be a short delay while I put out a few domestic fires, then I'll be back with code for you kind people. Meanwhile I sent a second HTML file to my Mac friend and I'll report on what he sees there ASAP. Gotta go.....
 
Here's the first file my Mac friend can't see in color:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<title>~/p-post001.html</title>

<head>
<style type="text/css">
body {background-color: rgb(250,240,230);}
/* Linen */
p,h1,h3 {font-family: verdana, 'sans serif';}
p,h3 {margin-left: 10pt;}
h1 {text-align:center;}
h1 {background-color: rgb(205,133,63);}
/* Peru */
h1 {color: #0000ff;}
/* Blue */
/* h2 {color: #483d8b;} */
/* Dark Slate Blue */
h3 {color: #483d8b;}
/* Dark Slate Blue */
p {color: #191970;}
/* Midnight Blue */
</style>


</head>

<body>
<h1>Name of Newsletter Goes Here</h1>

<p>The font above is in a color called "Blue," and it's on a
background color called "Peru." Up there along with the title, you will
find <br>the date, the number of the issue, and some sort of a slogan,
such as, "Rotate Your Tires."</p>

<h3> This is an example of a main headline, or subject title. </h3>

<p> Now for some text to give you an idea of how things could
look. </p>

<p> Of course I'm not sure what to make of this color scheme yet. I
have been fussing with all sorts of combinations, and because of
<br>my color blindness it has not been easy. But so far this looks OK
to me: it's a mix of (four shades of) blue with brown. That's usually
<br>a good combination -- fashionable. The masthead font is a bright,
strong blue, while the main headline just above is in a very dark
<br>blue that does not call attention to itself because of its color.
(I reduced the size of the font for this headline here, as the
<br>original sample I sent you had a headline that struck me as
overwhelmingly large.) Once you have seen the masthead, you don't need
<br> eye candy, in my opinion, so dignified and legible are my
goals.</p>

<p>I wanted to avoid a plain white background (you may have noticed
that it's not white) with black letters (and you may have noticed that
<br>they are not black). It was hard deciding between a bright, light
background color and something softer, and it was a bit difficult<br>
getting a nice dark blue that contrasted well with the background. Did
I?</p>

<p>Notice, please, that in this sample I changed the background from a
pale blue (called Alice Blue) to a color (Linen) that is close to <br>
Off White, but has a bit more color. I feel that Linen is easier on
the eyes than Alice Blue -- it seems more inviting and restful <br>to me.
What's your opinion?</p>

<p><b>Let's talk more about legibility. I want to use a sans-serif
font, but sometimes they are too skinny to be easily read. <br> Rather
than have everyone fumbling to adjust their browsers, I'd like to pick
something nice that's a compromise <br>between thin and ugly-thick. I
could use this bold style, I suppose, but would you get the feeling
that I am yelling <br>at you? Would reading an entire issue in this
emphatic style be tiring?</b></p>


<p> The next question is, do I have too many colors? Should I go for
something even less colorful? The point of the newsletter is not
to <br>impress everyone with its colors, but to convey information. Am I
getting too artsy-fartsy for my own good??</p>


<hr>

<!-- Created: Sun Nov 18 15:49:09 ICT 2007 -->
<!-- hhmts start --> Last modified: Sun Nov 18 21:03:57 ICT 2007 <!-- hhmts end -->
</body>
</html>


Here's another one he also can't see in color:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<title>For Dan</title>
<head>
<style type="text/css">
body {background-color: rgb(255,105,180);}
/* Hot Pink */
h1,p {font-family: verdana, 'sans-serif';}
h1 {background-color: #ffff00;}
/* Yellow */
h2 {background-color: rgb(0,255,255);}
/* Cyan */
h1 {color: rgb(255,91,71);}
/* Tomato 1 */
h2 {color: rgb(0,191,255);}
/* Deep Sky Blue */

</style>



</head>

<body>
<h1>Can You See The Colors?</h1>

<p>Look at all the trouble I went to to make it possible for you<br>
to see the colors!!</p>

<h2>This Is A Riot!</h2>

<p>Aw, come on; you can see the colors, can't you??</p>

<hr>

<!-- Created: Mon Nov 19 23:03:37 ICT 2007 -->
<!-- hhmts start -->
Last modified: Tue Nov 20 00:03:43 ICT 2007
<!-- hhmts end -->
</body>
</html>


And finally, here's his description of how he worked (with Safari 3.0.4). He uses Gmail ... which I suspect may be a problem.

1. Click on icon in your e-mail.
2. Click on underlined icon name in your e-mail.
3. Drag icon from your e-mail to Safari.
4. Drag icon from your e-mail to my desktop; From desktop to Safari.
5. Copy icon from your e-mail to my desktop.
6. Copy icon from your e-mail to my hard drive.
7. Drag icon from your e-mail to my hard drive.
8. Copy file name and paste in URL space.
9. Copy file name and put other stuff you suggested and put into URL space.
10. Open through the file server or whatever; Indirectly through a window.

I understand that he can see the file, but that it is totally devoid of color.

...Whew!

Edit: No references to any other files in the CSS of either file...at least I intended none! And I have yet to run these through validator.w3.org but will do that soon. I hurried to post the code and overlooked those comments. TIA to all.
 
Well I copy / pasted the code that you posted into a text editor and saved as html.

...And I can most definitely see your riotous colours ;) No problems in Safari 3.0.4 or firefox 2.0.0.4.
 
I sees a problem

In the code you gave I ran the validator on and found you a problem. Your title tag on both is outside the head tag. This could very likely be causing an issue in some browsers. Other than that the code looks good.

If this doesn't fix the problem it very well could be Gmail. You can have your friend visit this site and copy and paste the code you listed to a document and save it as .html and see if he sees color. Though make sure he uses a plain text editor. If he uses TextEdit (Mac's default text editor) make sure he switches to plain text mode, which is under the Format menu.
 
Good catch, Angelwatt!

Now if I could recall moving the title -- twice, yet! :eek: -- I might be able to explain why I did it. Certainly my text editor does start me off with the title inside the head. No excuses: I know the editor is setting a good example and I should go along with it. I'll have my friend follow up. If this is the fix, I'll be delighted, and even if it isn't, I have learned something.

Thanks!! You guys are great.
 
Bad news. I made the change (I believe), so now the .html file starts off like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title>~/p-post001.html</title>

<style type="text/css">
body {background-color: rgb(250,240,230);}
/* Linen */
p,h1,h3 {font-family: verdana, 'sans serif';}
p,h3 {margin-left: 10pt;}
h1 {text-align:center;}
h1 {background-color: rgb(205,133,63);}
/* Peru */
h1 {color: #0000ff;}
/* Blue */
/* h2 {color: #483d8b;} */
/* Dark Slate Blue */
h3 {color: #483d8b;}
/* Dark Slate Blue */
p {color: #191970;}
/* Midnight Blue */
</style>


</head>


...but my Mac buddy says it still produces no colors whatsoever.

Since this file appears in color to you folks, I suspect he's doing something wrong. Edit: he just told me he looked here, and does not know what to do with the code, etc. I won't press the issue -- I can always send him plaintext, which works with Gmail. The main thing is, you folks have confirmed that the code is OK.

As an uninvited guest in your community, I have been shown wonderful hospitality, and I do appreciate it! Your forum has been more cordial than I'm used to...Linux types can be pretty rough...if you don't know the intermediate-level skills thoroughly when you ask your dumb question, you can wind up turning slowly in the wind. A lot of our documentation makes no sense at all, except to people who don't need it. (I know: I'm the guy who thinks an angle bracket is a piece of hardware.) Then too, we have so many choices that religious wars are a Linux tradition.

Well, by way of saying thanks, here's something for those of you who use Firefox, just in case you did not know about it already: http://adblockplus.org/ It has been superb in my box. Of course YMMV! BFN
 
Yea, hard to say what's going on then. Other options would be to,

- Change colors from rgb format to hex (i.e. #12de34) This shouldn't matter though.

- You can zip up the file. Maybe something in the Gmail filter changes things in your HTML file. I know my work mail filters can do some damage to certain files. Zip won't necessarily protect it though. just an option to try.

- I took your most recent code and sent it from my Yahoo email to my Gmail account as a .html file. Gmail had 3 options for the attachment. To view it Google Doc, to View, and to Download. We'll ignore Google Doc. Choosing View results in a page without the style. Viewing source reveals the style tag has been stripped. Choosing Download and viewing with Safari, Opera, Firefox all worked though and had color. So make sure your friend is choosing Download rather than View.
 
More information to chew on, thanks. I'll go over everything with my friend. It's slow work because we're not in the same room and can't immediately verify each other's keystrokes -- the tasks are not hard, it's just that it is SO easy to make mistakes.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back