Other Browser Compatibility Issues

In my last post I talked about how small things such as the type of image you are using could appear different in some browsers than in others.  Here I am going to discuss some areas that you need to play close attention to between browsers when you are coding. The two most common things that I run into are padding and borders around elements and bad code auto-correcting. I'm going to focus on Internet Explorer and FireFox when discussing these issues. Other popular browsers such as Google Chrome, Safari and Opera act closer to FireFox than Internet Explorer. 

Padding and Borders

When you add a margin to an element such as a table, a div, or a paragraph, the margin is outside of the element. Padding that is added is inside the element and borders are on the edge of the element between the padding and the margin.  The image to the right shows where each of these fall in relation to one another. The white area is the element area.  The light blue area is the padding.  The black line is the border.  The light green area is the margin.  So if you specify a width of 200px, a margin of 5 pixels, padding of 10 pixels and a 1 pixel border, in FireFox, the entire area that the element will be covering is 210 pixels; 200 pixels with the border and padding inside that 200 pixels, and 5 pixels on each side outside of the 200 pixels for the margin. In Internet Explorer, the entire area that this element is covering is 232px; in Internet Explorer the element goes to the width that you set, then all padding, borders and margins push that width out. 

To get around the issue with padding and borders in FireFox and Internet Explorer, I put DIVs with the width around everything, then on other elements, I don't specify widths, only use the padding and margin.  If you have a main DIV with the width, and have the rest of the DIVs use 100%, this will get around this issue.

Auto-Correcting Bad Code
There are always times when the code isn't exactly perfect on the page.  Often this happens when you make changes and don't quite remove all of the code that you are replacing. When you view your pages, you can spot issues where the code is not correct if your page does not load entirely in Internet Explorer. When Internet Explorer comes across code that is incorrect, in most cases the browser will simply stop the code there.  So your page will look as if it is only partially loaded.  In these cases you can view the page source and scroll down to the last thing that you can see in Internet Explorer.  Here is where you will find the code that needs correcting.  In other browsers such as FireFox, when there is code that is not opened or closed correctly, the browser will simply add or ignore the necessary tags in order to display the page correctly.