How can I fix a website to work in all browsers, Internet Explorer?

Question

I am building a website and have ben developing it through Firefox and Safari. As of now, I only have the main index (home) page complete to test everything out before moving on. I tested it out in Internet Explorer only to find text wasn't being confined to the area selected and the spacing between various elements was screwed up.

How can i fix this?

here is the link <a href="http://www.ryanjay.com/ashlock/ind... target="blank">ryanjay.com/ashlock/index...

If you open this page up in firefox/safari and IE you will notice the menu spacing isnt the same, and the text and images overflow.

HELP! :)

Answer 1

Your link&#039;s broken, but that&#039;s okay, I don&#039;t need to see it to provide an authoritative answer. :-)

To move toward cross browser compatibility, you have to understand Standards Compliance Mode versus Quirks mode.

It&#039;s good you develop in FireFox, it&#039;s more standards compliant, even though IE7 was a great improvement.

Right now, in FireFox, right-click the background of this page, select View Page Info, and see what it says under General-&gt;Render Mode.

Standards Compliance Mode, right? Now do the same with your site. Quirks Mode, right?

So here&#039;s what you do:

1. Start with a VALID DOCUMENT TYPE. This is NOT a valid doctype:

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;

This is a valid doctype:

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;

Note the URL. Working in Quirks mode will cause many of your CSS selectors to fail, and this will be the key piece in causing cross browser differences. Page on document types (scroll to bottom:)

http://www.w3.org/QA/2002/04/Web-Quality

2. UNDERSTAND your doctype. Many people use XHTML doctypes because a) they don&#039;t know any better and are doing so by copying, b) whatever they edit in uses it as the default doctype, or c) someone (erroneously) told them it was &quot;the latest and greatest.&quot;

The truth is, XHTML was created to incorporate XML-style DTD&#039;s into HTML so you can EXTEND the tag set to create your own tag definitions. You probably don&#039;t know what I mean by this, which is all the more reason to understand: XHTML is NOT HTML. If you&#039;re doing HTML, you are much better off using an HTML doctype. Why?

Because it will be far lest strict and help you succeed in the most important step, #3 below. Use a transitional or strict 4.01 doctype.

3. VALIDATE YOUR CODE.

http://validator.w3.org/

Don&#039;t let the validator scare you. If it says &quot;100 validation errors&quot; it may mean the first one is an error and causes the others to kick on. Fix the first one, and many after go away. But it is absolutely critical you get your pages to validate.

Correct doctype and VALID CODE will make 95% of your cross browser issues to go away. You&#039;ll still have problems in IE 6, but you can add hacks for those and someday soon it will go away. Currently, it still has a very large market share.

Answer 2

To be honest, your code is a little messed up. You&#039;re going for a table thats 850 wide, but if you add up the widths for the menu part, they don&#039;t add up to 850. And they should.

First, just as a test, put the code for your on and off images in one single straight line, from the &lt;TD&gt; down to the &lt;/TD&gt;. The look of the page could have reacted to you moving the code down a line. I&#039;m guessing you did that so that you could see the code easier.

What I would suggest you do with the whole site however, is you make 3 tables, one under the other. One for the menu, one for the main info on the site and one for the little red, white, red footer you have at the bottom. You already have your info inside a larger table that&#039;s 100% wide. Don&#039;t put these new tables inside another table, just center them on the page. You&#039;ve already got tables within tables, so this would be one less.

Try laying your code out like this:

CENTER

ashlock_header.jpg

FIRST TABLE

Put menu here

END FIRST TABLE

SECOND TABLE

Put all your info here

END SECOND TABLE

THIRD TABLE

Put you footer here

END THIRD TABLE

/CENTER

Also, I would strongly suggest that you develop your site for IE instead of Firefox. Remember that the vast majority of visitors will view your site using IE. As many as 90%. So whatever about the other issues, you should think of them as your target audience.

You&#039;ve already seen another reason to develope for IE. Things like this don&#039;t show up because of problems with IE, they show up because of problems with the code. If it looks good in IE, then your code is good! Simple!

If you liked my answer and need any more help, just email me.