Design Websites to Display Properly in Internet Explorer and Firefox

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.

CSS Code

Div Tags

This displays correctly in Internet Explorer, but the background does not display in Firefox. 

Internet Explorer
Internet Explorer – Displays Properly

Firefox
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.

Overflow Hidden

Firefox
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. 

 Firefox
Firefox

Internet Explorer
Internet Explorer

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. 

Code with Margins

Div Tags

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.

Code with Padding

Internet Explorer
Internet Explorer – Displays Correctly

Firefox
Firefox – Displays Correctly

Leave a Reply

Your email address will not be published. Required fields are marked *