Different rendering for different browsers

Quick question: I'm building a site for my daughter who is an english teacher. The template renders very differently in Safari (desired behavior) than in Chrome or Firefox. In Chrome or Firefox, the fonts and background coloring is sometimes missing or off center.

Why is that? Is there something I should do for each browser?

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Ah. [url]englishclass.coblentzclan.com[/url]

Note that in Chrome or Firefox, the header_right section (Poetry and Rap, Why Shakespeare, etc) is all capitals, Orange, and the background for the box is clear. In Safari, it's smaller font, white, and the background box is black.

Thanks!

[url]englishclass.coblentzclan.com[/url]

Note that in Chrome or Firefox, the header_right section (Poetry and Rap, Why Shakespeare, etc) is all capitals, Orange, and the background for the box is clear. In Safari, it's smaller font, white, and the background box is black.

Thanks!

Hi

Looks like part of the template.css file is not accessible in some browsers. Have You been making any changes to this files ? I believe there may be an error in syntax or a codding of Your editor was wrong. Here is an original file from clean template

Hi Teitbite,

Thanks for checking. I did make some changes to the CSS - the logo reference on the front page for example - so I will compare the two and rebuild. I wonder if the editor put something in that caused this.

Thank you for figuring this out.

Regards,
Matt

Hi Teitbite (and anyone else doing research like this),

I don't know how you figured out that the CSS was only partially loading. I am really curious about that.

I had edited the template.css file and changed the logo. In that process, the editor I used must have placed a curvy ' instead of a straight '. That single item made all the difference.

I was able to compare the two templates with Sublime Text 2. Simply put both files into a folder. From the Sublime File menu, select "Open...", pick the folder, and then multi-select the files to be compared. Then right click on the files, select "Diff Files...". It will show you the changes between the two files. That's how I found the wrong apostrophe in the css.

How did you know that the CSS was not loading completely? That is a technique I would like to learn.

The site loads correctly now. Thank you.

Regards,
Matt

Hi

All I did was to check Your site using Firebug and than check the same broken part in Firebug but looking at our demo. I've noticed that part of the css which exists on our demo cannot be found on Yours, so from experience when something like this happens it's most likely a user error or editor issue.