Forum Moderators: open
P.S. With Netscape viewers coming in at about 4.1% and Internet Explorer at about 95%, should I even worry about this?
[edited by: tedster at 3:21 am (utc) on June 12, 2003]
If your site was planned to live more than 6 months, yes.
Improving cross browser compatibility will probably change your stats a bit. ;)
>>Doesn't anyone have any advice for this?
Yes, please also visit the CSS forum [webmasterworld.com]. There is a lot of incredibilly up to date material posted there about cross browsers fixes.
I'd start by validating your CSS and your HTML.
(do the CSS first because it sounds like thats where the problem is)
W3C HTML Validator [validator.w3.org]
W3C CSS Validator [jigsaw.w3.org]
The most important thing you need is a <doctype> tag.
This should appear as the very first line in your HTML file and it tells browsers, bots and validators what version of HTML your page is written in. Without this tag the validator will complain.
See W3C Valid Doctype list [w3.org] - personally I tend to use the HTML4.01 Strict doctype.
The CSS validator allows you to validate an external CSS file by entering its web address (if its online) or by uploading it from your PC. This is the best approach.
If you put your CSS in your html files (e.g. between the <style>..</style> tags then you can cut and paste this into the text area to have it validated.
If you use inline CSS (e.g. with the style="" attribute) then your screwed. But this approach is not really to be recommended anyway because you don't get the benefits of external CSS (e.g. smaller pages, easy to make global changes)
The error that I got from the HTML validator on all of my pages was:
____________________________________________
I was not able to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to validate the document. The sources I tried are:
The HTTP Content-Type field.
The XML Declaration.
The HTML "META" element.
And I even tried to autodetect it using the algorithm defined in Appendix F of the XML 1.0 Recommendation.
Since none of these sources yielded any usable information, I will not be able to validate this document. Sorry. Please make sure you specify the character encoding in use.
IANA maintains the list of official names for character sets.
____________________________________________
I did figure out how to use the CSS validator, but now my problem seems to be in the html markup like the doctype (Which do I choose? How do I know?) and the encoding. I've never even heard of placing markers like these in the html! Wow I must be out of it lol. Well thanks for your help ...
You can easily specify this via the HTML "META" element...
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
That line specifies that this is an html document that uses the iso-8859-1 character set (aka Latin-1, the usual character set for English text). Put it somewhere between <head> and </head>
While you are at it, its also a good idea to specify the type of your style information like this..
<meta http-equiv="Content-Style-Type" content="text/css">
So a well formed HTML4.01 Strict document, written in English, in the Latin-1 character set with CSS styles should start something like this..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>My Document Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" media="all" href="styles.css" type="text/css">
</head>
<body>
(Obviously you might want to add some other tags in there like <link>s and other <meta> tags)
[edited by: Woz at 11:09 am (utc) on June 18, 2003]
[edit reason] fixed scrolling [/edit]
a bazillion errors in my most basic pages (37 errors!) but they are displaying fine in internet explorer
Internet Explorer is very very forgiving of errors. To my mind this is one of its biggest faults. Bad code appears to work okay - which encourages sloppy coding and causes confusion when the next version chooses to render things differently.
Fix all the errors returned by the validator and then see how you stand.
Many people end up hand-fixing whatever code their WYSIWYG editor produces, which is why many of us just write all our code by hand from the start (plus you end up with much smaller page sizes).
You could try the HTML4.01 Transitional doctype - as its name implies it is less Strict and allows deprecated tags - so that probably stands more chance of validating with FrontPage code.
Character Encoding shouldn't matter -
iso-8859-1(for the record - setting the margin and declaring the font should both be done in CSS without changing your HTML at all. But I guess FrontPage is using margin attributes and <font> tags....*shudder*)
____________________________________
Line 58, column 28: reference to non-SGML character
Line 58, column 60: reference to non-SGML character
Line 59, column 18: reference to non-SGML character
Line 59, column 41: reference to non-SGML character
This page is not Valid HTML 4.01 Transitional!
Below are the results of attempting to parse this document with an SGML parser.
Line 22, column 16: there is no attribute "TOPMARGIN" (explain...).
<body topmargin="0" leftmargin="0" vlink="#0000FF" alink="#0000FF" bgcolor="tran
^
Line 22, column 31: there is no attribute "LEFTMARGIN" (explain...).
<body topmargin="0" leftmargin="0" vlink="#0000FF" alink="#0000FF" bgcolor="tran
^
Line 51, column 9: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
<u><p><font FACE="Comic Sans MS" SIZE="2">Budda in the Waiting Room: Simple
^
Line 52, column 35: end tag for "FONT" omitted, but its declaration does not permit this (explain...).
Health, Illness, and Healing</u> by Paul Brenner, M.D., PH.D.</font></p>
^
Line 51, column 10: start tag was here (explain...).
<u><p><font FACE="Comic Sans MS" SIZE="2">Budda in the Waiting Room: Simple
^
Line 52, column 71: end tag for element "FONT" which is not open (explain...).
...Healing</u> by Paul Brenner, M.D., PH.D.</font></p>
^
Line 52, column 75: end tag for element "P" which is not open (explain...).
.../u> by Paul Brenner, M.D., PH.D.</font></p>
^
Line 53, column 25: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
<i><b><p align="left"></b><font FACE="Comic Sans MS" SIZE="2"> &n
^
Line 58, column 28: reference to non-SGML character (explain...).
his book, but now I’d be excited to try it. It’s a pretty short an
^
Line 58, column 60: reference to non-SGML character (explain...).
his book, but now I’d be excited to try it. It’s a pretty short and sweet read,
^
Line 59, column 18: reference to non-SGML character (explain...).
so if you’ve got the time I’d recommend it. - <a href="/prof
^
Line 59, column 41: reference to non-SGML character (explain...).
...so if you’ve got the time I’d recommend it. - <a href="/profi
^
Line 59, column 114: end tag for element "P" which is not open (explain...).
...rofiles/jen.htm">Jen</a></font><b></p>
^
Line 60, column 6: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
<p> </p>
^
Line 61, column 9: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
<u><p></b></i><font FACE="Comic Sans MS" SIZE="2">Guided Imagery for Healing
^
Line 61, column 13: end tag for "U" omitted, but its declaration does not permit this (explain...).
<u><p></b></i><font FACE="Comic Sans MS" SIZE="2">Guided Imagery for Healing
^
Line 61, column 4: start tag was here (explain...).
<u><p></b></i><font FACE="Comic Sans MS" SIZE="2">Guided Imagery for Healing
^
Line 62, column 44: end tag for element "U" which is not open (explain...).
Teens: Wellness through Visualization</u> by Ellen Curran</font><i><b></p>
^
Line 62, column 77: end tag for element "P" which is not open (explain...).
...tion</u> by Ellen Curran</font><i><b></p>
____________________________________
So the problem comes up to be that without using any css, the pages show up fine when written with FrontPage. However, when I add in some css script, like an image with a z axis of -1 or a scrollbar-colors script, the page messes up! You say that I should I set the margin and font with CSS, but I don't know how to do that and all of my pages are already written this way. Does that mean I will have to redesign my whole site?
P.S. Thanks so much for your help Graham and others
1. wrong tag nesting, and
2. inline tags containing block level tags.
These two errors are sort of entangled. For instance:
Line 53, column 25: document type does not allow element "P" here;....
<i><b><p align="left"></b>
<p> is a block level tag - that is, it sets apart an entire block of content. But <b> and <i> are inline tags. A basic rule is that block level tags can contain either other block level tags or inline tags, but inline tags cannot contain block level tags. So inline tags like <b>, <i>, <font>, <li>, <span> etc. need to be closed before a new block level tag can be written into the code.
That kind of error is one of the most common validation problems, and many browsers try to accommodate it (even Opera.) That is, the browser will do its best to guess what the author wanted to render. But it's not valid HTML, and depending on other code on the page, the browser can get hopelessly confused.
[edited by: tedster at 5:40 am (utc) on June 16, 2003]
But if you look most of them are the same error. So you only really have a few basic problems..
document type does not allow element "P" here;<u><p><font...
Yup, <p> and </p> are supposed to enclose a paragraph.
<u> is the underline tag. Its doesn't really make sense to say "underline this paragraph" but it does makes sense to have a paragraph with some underlining in it.
Line 58, column 28: reference to non-SGML character (explain...).
his book, but now I’d be excited to try it. It’s a pretty short an
Get rid of those ’ tags - they are probably caused because you used the wrong apostrophe character - use ' not `
then you have some closing of tags that are not open. Again this is because tags are in the wrong order.. you must close tags in the reverse order that you open them, so
<u><p>some <b>words</u></b></p><p><u>some <b>words</b></u></p>You say that I should I set the margin and font with CSS, but I don't know how to do that
See Nick_Ws excellent CSS Crash Course [webmasterworld.com] or drop by the CSS forum.
I would SERIOUSLY consider dumping FrontPage 95 and learning to code by hand. Its really not that hard, there are loads of resources out there to help you (like [w3schools.com...] ) and this forum is a great place to ask questions and pick up pointers.
If that sounds too scary then you should probably consider getting a more up-to-date editor. Either the latest version of FrontPage or something similar like DreamWeaver.
If you write HTML with FrontPage, then you may be considering what you preview there (or in IE) to be the "proper" appearance for your CSS. But in reality, proper CSS rendering requires valid HTML.
Even with valid code, in complex situations there are a few cross-browser inconsistencies which really do involve bugs. But valid HTML gives every browser the best possible chance at getting the look you intend.
The bad part is now it is not only still showing up incorrectly in netscape, but it has changed to showing up incorrectly in ie
See? Now you have consistent behaviour from the browsers! :)
I would recommend giving the text a positive z-index rather than giving the image a negative one. Or better still why don't you just use the image as a background for the text?
background images can't do that
Yeah they can, backgrounds can cover the whole page if you like - no problems that I am aware of.
Heres a div with some text..
<div id="bgdemo">
Hello
</div>
and heres the CSS to give it a background image (repeating horizontally) and make the rest of the background white.
#bgdemo {
background: #fff url(images/yourimage.jpg) repeat-x;
}
Well setting z-index:5 on the text should raise it well above the image. iframes appear on top anyway in most browsers but set an z-index on that too just to be sure.
Also if you put the image in the html before the text and iframe then they should be on top anyway when you position them so browsers that can't handle z-index will be okay.
<style type="text/css">
<!--
styles here
//-->
</style>
should be this instead:
<style type="text/css">
styles here
</style>
