If you are a web designer, you can no longer just design websites to display correctly in Internet Explorer. Although most internet users still use Internet Explorer, Firefox is on the rise. To make sure your websites display correctly regardless of the browser people use you should test your site in both browsers. Here are a couple of fixes for adjusting your CSS code so your website displays correctly in both IE and Firefox.
As you can see from these snippets of code, I have created a website that has a mainwrapper with a vertically repeating background.
This displays correctly in Internet Explorer, but the background does not display in Firefox.
Internet Explorer – Displays Properly
Firefox – Displays Incorrectly
The reason for the incorrect rendering by Firefox is because Firefox requires either a specified height or content to vertically stretch a div tag. Although I do have two divs inside the mainwrapper which seems like content to me, Firefox still does not display the background. I could add a specific height as a property to the mainwrapper tag, but I want the background to be dynamic and grow with the content on the page. Luckily, the fix is simple. Add overflow: hidden to the style for mainwrapper and magically the background appears.
Firefox – Displayed Correctly
This next template illustrates another difference between Firefox and IE. As you can see, the horizontal spacing of the two inside sections is not consistent in the two browsers.
There’s a difference in the horizontal spacing between the two browsers because I added a margin-left property to the column floated to the left and a margin-right to the column that is floated to the right. IE and Firefox both recognize these properties; however they sometimes display different amounts of space.
Instead, remove the margin properties from the tags and add padding to the contentwrapper tag. As you can see, this little change made my web page display the same in both browsers.
Internet Explorer – Displays Correctly
Firefox – Displays Correctly