I designed my company's website using Internet Explorer and it looks great using IE. The problem is, some of the people here use Firefox and are having trouble displaying the site properly. Actually, it looks rediculous in Firefox. Anyone know a way to remedy this problem or have any suggestions? The site is www.mallotcreek.com.
Suggestion: Code for Firefox tweak for IE. You made the mistake of coding for IE not even wondering what Firefox was doing.
You have 23 coding errors on your index page, see them here.
You have 30 coding errors on your content page, see them here.
IE is a little more forgiving when it comes to errors. It shows you what it thinks you want to see. Firefox more or less shows exactly what you code. Bad code, bad page, good code, possibly good page.
Start by using a fully qualified doctype declaration, which will get IE out of "quirks mode". Probably one of these two would be best:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
(The HTML 3.0 doctype you are using is really out of date now.)
"Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
~ Terry Pratchett in Nation
And once a good doctype goes on the page it will probably look like hell in IE just like in Fx.
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan
I'm not saying you should actually consider using a malformed doctype, but as far as getting IE out of quirks mode goes, it doesn't really matter what doctype you use. IE does not differentiate between:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
and
Code:
<!DOCTYPE always tastes better with hot-sauce! :D
Just make sure you don't put anything like before the "doctype" (like an xml declaration for example).
Thats not entirely true. For IE to be out of quirks mode you need to use a full valid doctype (one with the url on the end). Partial doctypes like this will put IE into quirks mode.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
Is that since IE 7, or IE6 sp2 then? I know IE6 sp1 did not pay any attention to what came after "<!DOCTYPE".
I'm guessing they changed it in IE6 sp2 at the same time as when they changed IE's accept header from pointlessly stating it supported Flash, and bunch of image formats and then falsely stating "Actually, come to think of it. I support all types of all media equally well on the web.", to simply stating "I support all types of all media equally well on the web." without all the pointless crap about images and flash before it.
Yes. That's my point. In IE6 sp1 you could use an incomplete doctype and get away with it. I tested it out plenty of times long ago. So long as it saw "<!DOCTYPE" as the first thing in the file, it would jump into it's "standards" rendering mode. If you put anything before <!DOCTYPE or removed and part of it though, it would go back to quirks mode. It never paid any heed to what came after <!DOCTYPE though. You could have used
I don't think we are on the same page. I'm saying IE 6 Sp1 would go into quirks mode without a full doctype. Even with the partial one or garbled one it would still go into quirks mode not standards compliant mode.
Ok, I have attempted to correct the errors in my index page as recommended by http://validator.w3.org, however, when checking the corrected page, it seems that it has brought up several more errors. I went from about 30 to about 70 errors. This attempted correction can be view at http://www.mallotcreek.com/test.html. I am really stuck here. Is there a common method to correcting this problem? Is this even a common problem? I'm freakin out!
Oh my! Where on Earth did you get the idea to use the XHTML doctype and the XHTML namespace?
First remove those two lines completely from your new page or remove the first from your old.
Download HTML Tidy; the first version was written by the guy who wrote the HTML 3.2 specification. Configure it for HTML 4.01 strict, removing all FONT tags and transforming B to STRONG and I to EM and such. Run it on your target page.
Then make sure that the DOCTYPE looks like:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
and revalidate. Correct any errors if found. Tidy corrects for well-formedness and not validity.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
—Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Bookmarks