When you declare your body, create a div, and put a paragraph in it, Firefox and Internet explorer interpret the spacing differently.  Firefox will create a space between the top of the page and the div.  Internet explorer will create a space between the div and the paragraph.  An example of this can be seen below, Internet Explorer is on the right and Firefox can be seen on the left.

The code for you to view this is:

To fix this we need to give the paragraph code a style margin of 0px. The code we would add to our CSS is:

If you want to give your paragraphs spacing you would use padding. Changing the margin from 0px will bring you back to the same error.

You can either declare the align in the CSS or in the img tag itself. Do not declare an align in the image tag and then a float in the CSS. This will cause the text wrap to not work in Internet Explorer 7! If you wanted to put it in your CSS it would look like so:

Where value is either bottom, left, middle, top, or right. Whatever you set this value to is where the image will go. For example, if you text align right, the image will push to the right of your container and then text will wrap around it from the left.

If you put this in the image tag, it would look like so:

When you style your body in CSS and you do a text align: center; Firefox will not center your page in the window. However, Internet explorer will center your page. Example CSS would look like:

If you want to center your body in both browsers you need to encompass all your content in one div that has a margin: 0 auto;. What this means is that everything in that div will shift down 0px from the top and bottom, while auto adjusting to the center of your browser from the left and right. This holds true even while your page is moved in an out by the user if he/she resizes the window.

Example CSS code would look like this:

And your HTML code would look like this:

1. Know what browsers you want to code for! Look at your websites statistics and know what browsers your users are viewing your website with. Of course it would be nice to have your website look the same in every browser, but lets get realistic. This is not going to happen. Every browser looks a little different. You just need to know what the differences are and whether you can live with it or not. Obviously, if your navigation bar drops down when the user scrolls over it in Firefox, but does not drop down for Internet Explorer users then you wont be able to live with it. If you have 50 viewers using Internet Explorer 7 & 8, 40 users viewing in Firefox, and 2 users viewing in Safari, then it is going to be a waste of time for you to optimize how your site looks in Safari.

2. When coding out your website be sure to check how your website looks in each browser. This means after you put in an area that content will be held check your site. Do not wait until your site is fully coded before checking. If you wait you will find yourself having more problems and less ways of being able to fix these problems. It may take longer to code out a page when you have to check it in both browsers after every content change you do, but it will be shorter in the long run because you will not have to go back and re-code everything once it has already been completed.Check after every major change, such as content held in a div or text wrapping around an image.

3. K.I.S.S.! Keep it simple ________. Most users today do not need a fancy layout that will take their connection forever to download and view. They want a website that is easy to navigate and has the content that they are searching for. Do not blow your whole time developing the layout of your site. It is the knowledgable content that the visitor came for, not the fancy flash image that takes them 2 minutes to download until they can view it. Besides attracting viewers, keeping your website simple enables it to be more functional on other browsers. The more specific your commands get, some browers will not support it. Creating a website with 90% javascript may be fun for you, but if a user does not have scripting enabled on their browser they will not be able to see much of your website.

4. Process of elimination. Do not change all of your code at once while trouble shooting your browser issues. You want to make one change at a time and view it in both browsers. The ultimate goal is to find the change that makes both browsers appear the same. This is very hard to achieve if you are changing multiple lines of code at once. If your first attempt doesn’t work, change it back to the original and try something else. Some of the most common errors with Firefox and Internet Explorer are CSS issues. Both browsers parse through your CSS differently. If you don’t have a padding or margin defined for an object in your HTML each browsers has different spacing or ways to handle the code.

5. Make sure your tags are closed. If you want to keep your website as robust as possible for other browsers, I strongly recommend you code in XHTML. XHTML is similar to HTML, it just means you have to close all your tags and you cant shortcut on coding. Everything must be done to a tee. Though this takes longer, and can be difficult to trouble shoot what you forgot, it will make your website more robust for other browsers. Remember, if you open a paragraph tag you close it. If you open an img tag you add the / > to close it.

6. Use the W3C validator to check your code. It parses through your code using the DOCTYPE you declared to tell you what problems, if any, there are. From this you can take its reccommendations and fix your code. Once it passes through the validator as XHTML or HTML transitional you can post a picture link they give you on your website. This shows visitors that you took the time to make sure your code is correct.