| View Question |
|
|
 | ||
|
| Subject:
Browser compatibility problems using CSS and DOCTYPE
Category: Computers Asked by: donniec-ga List Price: $10.00 |
Posted:
26 Mar 2003 22:40 PST
Expires: 25 Apr 2003 23:40 PDT Question ID: 181619 |
I'm having browser compatibility problems with my website now that I've started using CSS. I want my website to be as browser compatible as possible. Using online web tutorials, I also discovered that my DOCTYPES were written incorrectly. When I corrected them I had a little better luck with browser compatibility. However, using this DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> my website looks correct in IE 6, Netscape 4 and Netscape 7, but when I view it in IE 5 or Netscape 6, the line spacing is all wrong -- the text becomes almost double spaced. If I try using the strict version of DOCTYPE, then Netscape 7 also starts double spacing. I've searched the web for answers and can't find a single mention of this problem. I even tried using a browser detection script and created 2 versions of my website: a site for IE and a site for Netscape (using DOCTYPES for each browser as needed.) That worked, but it just takes too much time to maintain 2 separate versions of a website. So my question is, why is the line spacing different for only IE5 and Netscape 6? There's got to be a way to have 1 website, using CSS, that has proper text spacing for all the browsers. What am I doing wrong? Here's my website: http://www.hymnchartslite.com/index.htm |
| ||
|
| Subject:
Re: Browser compatibility problems using CSS and DOCTYPE
Answered By: larre-ga on 27 Mar 2003 00:46 PST Rated:  |
Thanks for asking! You're not doing anything wrong. Except following the rules. :-) As you've already (sadly) discovered, HTML and CSS validation doesn't mean that code will display the same in all browsers. You don't need to maintain separate websites for separate browsers, just separate stylesheets, which is a lot simpler. You'd use the same sort of redirection javascript to detect the browsers, and pull the correct version of the stylesheet to match the user's browser. Once you've decided the size look you prefer, you can define font sizes in pixels for those browser's stylesheets in order to obtain exactly the look you want. This will, of course, prevent some users from scaling the font sizes up or down themselves, which is the primary reason for using the named versions of font sizes. When it comes to true browser compatibility, unfortunately, you can't have it all. You'll either have to settle for browser caused differences, or sacrifice a small degree of usability to achieve the same effect in all browsers. Having played a bit with your stylesheet, substituting font sizes of 13px for small and 10px for x-small offer some improvement. BROWSER DIFFERENCES ********************************************************************** I heartily recommend Webmonkey's article "Sizing Up the Browsers" especially, page three, Text Sizing. You'll find charts that tell you the exact cross-browser differences in text sizing. Webmonkey Tutorials - Sizing Up the Browsers http://hotwired.lycos.com/webmonkey/99/41/index3a_page3.html?tw=design This Google cached version of a WebReview.com page also helps explain many of the cross-browser differences. Common Browser Implementation Issues http://216.239.53.100/search?q=cache:1f9ms-lvLc8C:www.webreview.com/browsers/browser_implementation.shtml MODIFIABLE JAVASCRIPT RESOURCES ********************************************************************** I've located both a javascript generator and a cut and paste javascript that can be modified to work for stylesheet redirection instead of page redirection. If these options are a bit too complex, you can most likely hire a javascript coder to create a custom script at a rather nominal fee, in the range $25-$50|USD. Browser Detection and Redirection Tools - Javascript Generator http://www.webpage-tools.com/browser_redirtool.asp Javascript Source CSS Support Redirection Script http://javascript.internet.com/user-details/css-support-redirect.html ********************************************************************** Google Search Terms browser cross-compatibility "font sizing" IE5 or NS6 "javascript redirection" css OR stylesheets I hope these explanations and resources help you sort out your browser compatibility difficulties. Should you have any questions about the materials or links provided, please, feel free to ask. --larre | |
| |
| |
donniec-ga
rated this answer:
and gave an additional tip of:
$3.00
this is an incredible service, and has helped me tremendously! |
| ||
|
| Subject:
Re: Browser compatibility problems using CSS and DOCTYPE
From: serenata-ga on 27 Mar 2003 01:00 PST |
My one addition to Larre's excellent answer is changing the doctype to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
instead of the "loose".
A look at your styles folder shows that you are using mostly CSS 1 and
2, and that degrades nicely and plays well with IE 5.
The W3C consortium has some information on doctype declarations here,
which may explain it a bit better.
- http://www.htmlhelp.com/tools/validator/doctype.html
Serenata |
| Subject:
Re: Browser compatibility problems using CSS and DOCTYPE
From: snapanswer-ga on 27 Mar 2003 01:04 PST |
Larre's answer really hits the nail on the head. It can still be tough to make cross-browser compatible pages. However, you may consider using an XHTML DOCTYPE and XHTML compliant code with your web site. For example, XHTML Transitional. My understanding is that this puts CSS capable browsers into "compliance" mode and that tends to make them (IE 5.X, IE 6, Mozilla 1.X, Netscape 6+, Netscape 7) render pages in a comparable manner. However, even then, there will still be variations. Good luck. |
| Subject:
Re: Browser compatibility problems using CSS and DOCTYPE
From: highroute-ga on 27 Mar 2003 06:47 PST |
I agree with the other answers -- in this (Web page design) business we all have to limp along as best we can -- but I have this added suggestion: validate your HTML code. Serenata pointed to a great resource for this: the W3C online validator. This won't prevent cross-browser problems, but it will at least keep your code in compliance with the standard that you claim (in your DOCTYPE declaration) to be using. If nothing else, using valid code allows you to claim "moral victory". <grin> First, in order to comply with the standard you'll need to specify your character encoding. That's done in a META tag. The following probably fits what you're actually doing in your pages: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Once that's been added to the HEAD section of every page, validate each page by going here: http://validator.w3.org/ Paste the URL of each page into the "Address" text box and press the "Validate URI" button. (You can instead have the validator work on files on your hard drive, enabling you to catch problems before you upload them to the server.) Now fix the reported errors. This W3C resource also has a validator for CSS files, and Tidy Online will convert your HTML pages to XHTML (see the links on the right). |
| Subject:
Re: Browser compatibility problems using CSS and DOCTYPE
From: j_philipp-ga on 27 Mar 2003 22:17 PST |
Some modern browsers implement so-called "doctype sniffing". They switch into more W3C standards-compliant rendering mode when a strict doctype is detected, and into a more browser backwards-compatible "quirks" mode when not. (To make the mess complete, some browsers implement a third "almost standard" mode.) As for serving different stylesheets to tackle line-spacing anomalities, if you decide it's worth the trouble, you also have the option of doing that server-side with some browser detection scripting. |
If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you. |
| Search Google Answers for |
| Google Home - Answers FAQ - Terms of Service - Privacy Policy |