Css In Browser Battle

**mike** · December 27, 2005

HAPPY NEW YEAR TCH FAMILY!!!!

Ok, so I am getting a fairly good handle on this CSS stuff and I like it.

So I have a site that looks good in IE 6 but half of the header is hidden in Firefox.

What's the trick for fixing that and still keep it good in IE?

You can see it , assuming you have both browsers, at

bestchildrensbooks.org

thanks in advance for any help.

Hope ya'll had a great CHRISTMAS.

**TCH-Bruce** · December 27, 2005

Your hdr block is only 60px high. Needs to be at least 160px.

Also the page does not validate.

**jayson** · December 28, 2005

Your hdr block is only 60px high. Needs to be at least 160px.

Also the page does not validate.

what bruce said about the hdr, expand the heights another 100px and you should be good to go

I would also suggest putting the style coding in a external CSS page, I fid it is easier to edit. But what ever makes you happy, looks good except for the header

Edited December 28, 2005 by jayson

**mike** · December 29, 2005

Jayson

maybe I need a definition for "external css page".

I now have

href="3c-hd-ft-flex-layout.css" />

href="3c-hd-ft-flex-presentation.css" />

**jayson** · December 29, 2005

Jayson

maybe I need a definition for "external css page".

I now have

<link rel="stylesheet" type="text/css"

href="3c-hd-ft-flex-layout.css" />

<link rel="stylesheet" type="text/css"

href="3c-hd-ft-flex-presentation.css" />

Ok, here is an example

in the first part of the .html page

<HEAD>

</script>

</HEAD>

then open notebook and add this:

#dropmenudiv{

position:absolute;

border:1px solid black;

border-bottom-width: 0;

font:normal 12px Verdana;

line-height:18px;

z-index:100;

}

#dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid black;

padding: 1px 0;

text-decoration: none;

font-weight: bold;

}

#dropmenudiv a:hover{ /*hover background color*/

background-color: #f5fff3;

}

a:link {color: green}

a:visited {color: lime}

a:hover {color: black}

a:active {color: gray}

save it as layout.css

then take the notebook and start a new file, and add this:

/***********************************************

* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

//Contents for PROGRAMS menu

var menu1=new Array()

menu1[0]='<a href="communication.html">Communication Training</a>'

menu1[1]='<a href="custservice.html">Customer Service</a>'

menu1[2]='<a href="diversity.html">Diversity Training</a>'

menu1[3]='<a href="english.html">English Skills</a>'

menu1[4]='<a href="silent.html">Silent Power</a>'

menu1[5]='<a href="team.html">Team Building</a>'

menu1[6]='<a href="train.html">Train the Trainer</a>'

menu1[7]='<a href="warrior.html">Warrior Mindset</a>'

//Contents for menu 2, and so on - MAY NOT USE THIS ONE

var menu2=new Array()

menu2[0]='<a href="http://cnn.com">CNN</a>'

menu2[1]='<a href="http://msnbc.com">MSNBC</a>'

menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

var menuwidth='165px' //default menu width

var menubgcolor='white' //menu bgcolor

var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)

var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all

var ns6=document.getElementById&&!document.all

if (ie4||ns6)

document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}

function showhide(obj, e, visible, hidden, menuwidth){

if (ie4||ns6)

dropmenuobj.style.left=dropmenuobj.style.top=-500

if (menuwidth!=""){

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=menuwidth

}

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

obj.visibility=visible

else if (e.type=="click")

obj.visibility=hidden

}

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function clearbrowseredge(obj, whichedge){

var edgeoffset=0

if (whichedge=="rightedge"){

var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth

}

else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset

var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?

edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?

edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge

}

return edgeoffset

}

function populatemenu(what){

if (ie4||ns6)

dropmenuobj.innerHTML=what.join("")

}

function dropdownmenu(obj, e, menucontents, menuwidth){

if (window.event) event.cancelBubble=true

else if (e.stopPropagation) e.stopPropagation()

clearhidemenu()

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

populatemenu(menucontents)

if (ie4||ns6){

showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

}

return clickreturnvalue()

}

function clickreturnvalue(){

if (ie4||ns6) return false

else return true

}

function contains_ns6(a, :naughty: {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

function dynamichide(e){

if (ie4&&!dropmenuobj.contains(e.toElement))

delayhidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

delayhidemenu()

}

function hidemenu(e){

if (typeof dropmenuobj!="undefined"){

if (ie4||ns6)

dropmenuobj.style.visibility="hidden"

}

function delayhidemenu(){

if (ie4||ns6)

delayhide=setTimeout("hidemenu()",disappeardelay)

}

function clearhidemenu(){

if (typeof delayhide!="undefined")

clearTimeout(delayhide)

}

if (hidemenu_onclick=="yes")

document.onclick=hidemenu

save it as layout.js

this way you casn have all your javascript (.js) and styling of the page (.css) out side of the .html page, I did that, and my page went from about 50 lines of code to about 10. faster load time. I run it this way on www.jaysarahandy.com/aftindex.html (or htm) <<<can never remember how I save it. I have a aft.js and aft.css otherwise I would havde close to 150 .lines of code.

does this make sense? Just tying to contrib. my knowledge.

**mike** · December 29, 2005

Jayson,

so if I do that then do leave the link rel pages in there or take them out

**jayson** · December 29, 2005

Jayson,

so if I do that then do leave the link rel pages in there or take them out

Mike

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^just like it is above, you keep the link rel= for the .css

the .js (javascript) there is no link rel=

does this make sense? I do not want ot make more work for you. If your happy with the look, then stay with it.

**mike** · December 29, 2005

ok, thanks, Jayson.

Do I leave the smiley face in

**mike** · December 29, 2005

so what does it mean if the page won't validate?

(other than faulty code that needs changing.)

**TCH-Andy** · December 29, 2005

basically, as you say, faulty code that needs changing.

Try http://validator.w3.org/detailed.html to validate it. You will need to force the encoding type, since the one you have in is invalid.

**jayson** · December 29, 2005

Mike, I can help you create the files if you want, it will take about 15 minutes, I do not need to go into your server, just need to know if you would like me to create the files for you.

Jayson

**mike** · December 29, 2005

It looks like I need some serious help.

A lot of the code is code that came from css templates I got from the web.

So now it looks like I have mixed things up and am at a confused state.

The one section with dropdown menu I tried to just comment out because I am not using it at this point

but didn't know if I might later.

I think I need some help, Jayson.

Andy - thanks. I went to the Wc3 validation page but it doesn't like the code.

**Deverill** · December 30, 2005

Take that validation thing seriously. Even if things look ok on your page, bad code can cause it to break next time the browsers are updated to the standard. Everything it complains about is an error in the code and can eventually, with lotsa patience :eek: , be fixed. Start at the 1st error and work your way down and when you are done your code will be so much better, possibly faster and definitely more likely to work next month.

**jayson** · December 30, 2005

Take that validation thing seriously. Even if things look ok on your page, bad code can cause it to break next time the browsers are updated to the standard. Everything it complains about is an error in the code and can eventually, with lotsa patience , be fixed. Start at the 1st error and work your way down and when you are done your code will be so much better, possibly faster and definitely more likely to work next month.

That validator is a joke, it is giving me errors, that are not errors. so for me if it is not broken, do not fix, if broken take hammer, hit twice (or more) and try again.

**marie b.** · December 30, 2005

W3C are pretty much the people for standards-compliant code.

If they say that it's wrong and needs fixing, chances are that they know what they're talking about ; they recently switched back to their original, strict validation guidelines and I've seen a lot of people complain about it for some reason.

Edited December 30, 2005 by marie b.

**jayson** · December 30, 2005

W3C are pretty much the people for standards-compliant code.

If they say that it's wrong and needs fixing, chances are that they know what they're talking about ; they recently switched back to their original, strict validation guidelines and I've seen a lot of people complain about it for some reason.

Ok, here is what IT says about my site, it was created using frontpage, so if it has errors, then that means that FP is no good:

Below are the results of attempting to parse this document with an SGML parser.

1. Error Line 1 column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>".

<html>

The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid.

✉

2. Error Line 7 column 6: end tag for element "HEAD" which is not open.

</head>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occured in a script section of your document, you should probably read this FAQ entry.

✉

3. Error Line 9 column 15: there is no attribute "ROWS".

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

✉

4. Error Line 9 column 36: there is no attribute "BORDERCOLOR".

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

✉

5. Error Line 9 column 55: there is no attribute "BORDER".

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

✉

6. Error Line 9 column 71: there is no attribute "FRAMEBORDER".

...ordercolor="lightblue" border="0" frameborder="0">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

✉

7. Error Line 9 column 74: element "FRAMESET" undefined.

...olor="lightblue" border="0" frameborder="0">

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).

* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

✉

8. Error Line 10 column 14: there is no attribute "NAME".

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

✉

9. Error Line 10 column 30: there is no attribute "SCROLLING".

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

✉

10. Error Line 10 column 42: there is no attribute "TARGET".

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

✉

11. Error Line 10 column 52: element "FRAME" undefined.

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).

* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

✉

12. Error Line 11 column 17: there is no attribute "COLS".

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

✉

13. Error Line 11 column 58: element "FRAMESET" undefined.

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).

* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

✉

14. Error Line 12 column 45: there is no attribute "SRC".

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

✉

15. Error Line 12 column 58: element "FRAME" undefined.

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).

* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

✉

16. Error Line 13 column 40: element "FRAME" undefined.

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).

* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

✉

17. Error Line 15 column 73: element "FRAME" undefined.

...ing="no" target="contents" src="footer.html">

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).

* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

✉

18. Error Line 17 column 7: document type does not allow element "BODY" here.

<body>

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

**marie b.** · December 30, 2005

I dislike Frontpage anyway but, if I were you, I'd work through each of those errors and see how to fix them. Often the fix is better than the current issue, even if it's not automatically visible that it is a problem.

Then again, that's just what I'd do. I like my code to be compliant. :eek:

**jayson** · December 30, 2005

I dislike Frontpage anyway but, if I were you, I'd work through each of those errors and see how to fix them. Often the fix is better than the current issue, even if it's not automatically visible that it is a problem.

Then again, that's just what I'd do. I like my code to be compliant.

I also dislike FP, but love the way I can make frames without trying to code it by hand. I do not use it to build a website, just to make the frames ( I use cutehtml)

**TCH-Tim** · December 30, 2005

then that means that FP is no good

Hit that nail on the head.

**jayson** · December 30, 2005

Hit that nail on the head.

it is the only program, ( that is free, that I know of) that will create frames in different styles, is there another such free program.?

**TCH-Tim** · December 30, 2005

it is the only program, ( that is free, that I know of) that will create frames in different styles, is there another such free program.?

That opens up a whole other Frames vs. CSS argument, in which most people would say you shouldn't even be using frames. I was talking mostly about the validation thing (and I suppose bloated code in general). But if it works for you and you have to use frames, have at it.

**mike** · December 30, 2005

Personally, I think I would rather stay away from frames for now.

Glad to see you get in on this , Jim. I think you are right about the validation.

However, I went in there last nite and ran one of my other sites through the validator.

I now get to display the WC3 tag. BUT, in defense of Jayson.................

After it validated my page and I was putting in there logo tag, trophy, whatever it is,

I noticed this tag... </center>

and it was a standalone. So, I thought, how could this be validated with a naked end tag sitting there.

So , I took it out, and ran the validator again, and it still said I was valid.

What's up with that? How could it have been valid in the first place with a closing center tag and no beginning center tag.

**mike** · December 31, 2005

Consider these stats from today:

Validation check results:

AOL - 269 errors

Frontiernet.net - 588

Netscape - 105

Totalchoicehosting - 0 errors

Microsoft.com - 0 errors

yahoo.com - 284

google - 51

I LOVE 'PUTERS ! Really.

It's nice to know that someone out there has more errors than I do.

heh heh

**Deverill** · January 1, 2006

Ok, here is what IT says about my site, it was created using frontpage, so if it has errors, then that means that FP is no good:

Well...

I wouldn't go that far as to say it's no good, but many would.

Below are the results of attempting to parse this document with an SGML parser.
1. Error Line 1 column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>".

2. Error Line 7 column 6: end tag for element "HEAD" which is not open.

18. Error Line 17 column 7: document type does not allow element "BODY" here.

Ok, here goes (remembering that W3C is the organization that sets the standards:

1. http://www.w3.org/QA/Tips/Doctype - Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by browsers or other tools processing the document.

2. Was there a missing <HEAD> tag or was it in an incorrect place?

3-17 are generally caused by the DOCTYPE not allowing certain things.

18. The description pretty much says it. There could have been misplaced elements, overlapping elements, etc. It could also have been a "cascading error" caused as a side effect of a previous error. In C programming I always tell students, fix the obvious errors, missing semi-colons, etc and then fix the first error reported... everything else may be a side effect and actually be correct.

I'm no validation freak, but I do know that if you ever expect things to look the same in the browsers there are 2 things that have to happen. 1. We have to comply with the standards set forth. 2. The browsers must comply with the standards set forth. Everything else is either luck or a kludge and may break tomorrow even if it does work today.

However, I went in there last nite and ran one of my other sites through the validator.

I now get to display the WC3 tag. BUT, in defense of Jayson.................

After it validated my page and I was putting in there logo tag, trophy, whatever it is,

I noticed this tag... </center>

and it was a standalone.

I just ran their own page through and it says that you can use this code:

><p>
<a href="http://validator.w3.org/check?uri=referer"><img
	src="http://www.w3.org/Icons/valid-xhtml10"
	alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
 </p>

Where did you get you code from?

Consider these stats from today:
Validation check results:

AOL - 269 errors

Frontiernet.net - 588

Netscape - 105

...

How much of that do you think is on purpose so AOL users will use the AOL track-where-you-went browser rather than "shelling out" to IE or some other browser?

Wonder if Microsoft paid someone to make their site incompatible with Firefox. It's sure going to be fun watching the reports when it's found out if they did!

**mike** · January 1, 2006

You're right, Jim.

It could get real interesting.

When I got one of pages to validate it gave me a congratulations type page with the code for their logo.

They also gave me the option to copy the gif file for the logo and just load it from my own pages rather than their site , which the code leads to .

I believe I will be gradually, sooner the better but as time allows, be validating ALL of my pages from the different sites. The ones I checked don't really have a lot of errors. Just a few, and fixing them will undoubtedly be good OJT as far as coding , better understanding etc.

**Deverill** · January 1, 2006

Same here, Mike. I don't want to make it sound like all my stuff validates - it doesn't. But I have at least 80% of my newest site that does validate and, like you, have small errors to cleanup here and there such as my web editor program (Scream) sees me type <br and a space and it automatically puts the / in there for me... sometimes I type it too which is, of course, an error.

I'm not sure it's vital right now to validate because the browsers still need "tricks" to work right, but I do expect in the near future for them to become so compliant that it will help.

**owatagal** · January 1, 2006

The number of errors on the various pages is interesting, but I doubt AOL really has 250+ errors. Well, ok, it is AOL... I doubt Frontiernet actually has 500+ errors. Sometimes the validator gets mixed up in the code-- a certain kind of error can throw it off and it'll read the rest of the code incorrectly, listing errors that don't actually exist. But as soon as you fix the one error, the other 100+ errors magically disappear (since they never existed in the first place...).

Unless someone knows for sure the validator folks fixed that glitch in the validator, I suspect AOL and Frontiernet have far less errors than it appears and one of them has just thrown the validator off track.

**mike** · January 1, 2006

..and then there are pages that look good on 3 different home computers but look different on another computer down the road. Depends, I guess, on how different folks said the font sizes on their computers.

So it seems to me that validated or not there will be some folks seeing things differently anyway.

**mike** · January 1, 2006

Now if you get this msg on validation:

This page is not Valid HTML 4.01 Transitional!

how do you fix that?

Nevermind - I fixed the other stuff and it validated.

Edited January 1, 2006 by mike

**Deverill** · January 2, 2006

Unless someone knows for sure the validator folks fixed that glitch in the validator, I suspect AOL and Frontiernet have far less errors than it appears and one of them has just thrown the validator off track.

That's not really a glitch as much as it is the way parsers work. The same is true of language compilers such as C. Once the parser gets out of sync, so to speak, it can't get back on track. Pretty common problem. Nearly impossible to fix short of creating an AI Expert System to do it.

**mike** · January 2, 2006

So, Jim - my site looks ok on IE but in firefox the two side columns stop and the center column goes all the way down and covers the footer.

any tips on that?

**Deverill** · January 3, 2006

I'm not up to speed on CSS like I'd like to be - time and all - but check out the CSS Clear property. It can be used to make columns extend to the same length by my understanding. Google it and I'm pretty sure you'll find what you need.

Sign In

Css In Browser Battle

Recommended Posts

mike

TCH-Bruce

jayson

mike

jayson

mike

jayson

mike

mike

TCH-Andy

jayson

mike

Deverill

jayson

marie b.

jayson

marie b.

jayson

TCH-Tim

jayson

TCH-Tim

mike

mike

Deverill

mike

Deverill

owatagal

mike

mike

Deverill

mike

Deverill

Join the conversation

Hosting