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. 

 
Firefox

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. 

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

Today’s World Wide Web is definitely not what it was twenty years ago.  I remember one of my first experiences using the Internet in the early 1990s.   A friend of mine invited me over to his house to check out a new technology his family recently set up in their home.  He showed me baseball scores from a website that published sports information.  When he told me that the scores were updated within the previous hour, I was amazed.   I remember that there wasn’t much color or style associated with the feed we were examining.  Just black and white text with team names and scores.

Between that time and the Web 2.0 (enhanced interaction, video, etc.) world we live in now, web pages became much more flavorful.  Advanced arrangements, color, and other effects were brought into the presentation of web content to give the information visual appeal.  Web pages became burdened by tags specifying font styles and color, table markup for setting up the page layout, and other tags that were not necessarily pertinent to the information being presented.  Consistency in the look and feel between one web page and the next for a particular web site became difficult to maintain.

The development of CSS in the late 1990’s brought a welcomed improvement to the web.  With CSS, the presentation tags that determine color, background images, and other aspects of a site’s look and feel can be pulled out from content itself.  A common example of how CSS changes the way web pages are developed uses the old HTML font tag, which was used to specify how the text enclosed within it would be presented.  Here’s an example.  Consider a situation where you want the font for each of your paragraphs to have a particular size, color, and style.  You might use the following markup to accomplish your formatting:

<p><font size=”4” color=”blue” face=”Tahoma”>Some example text…</font></p>

Using CSS, the font tag would be unnecessary.  Instead, your web document would likely access a style sheet (linked to from your page header) that formats every paragraph from a central location. With CSS in place, your paragraph would look like this instead:

<p>Some example text…</p>

The formatting of the font size, color, and face would all be done separate from the content itself.  This makes it easier for search engines and web readers to see the actual content (in this case, “Some example text…”) instead of having to do extra work parsing through the font tag and its attributes. CSS also reduces the amount of work by a web developer by removing the need to repetitively specify how various elements of a page should look.  Although this was a simple example, consider a full page of HTML , with hundreds or even thousands of tags.  The difference between CSS and the traditional HTML tag usage becomes obvious.

Using  CSS provides a few major benefits over the old school HTML standard, including the following:

• CSS provides the ability to define styles for multiple HTML tags in a centralized location so that they don’t have to be specified over and over again.
• CSS allows for separation of content from presentation, which makes content more accessible to search engines and web page readers.
• CSS provides more flexibillty in working with background images, form elements, and other aspects of a web page.  There are many more attributes available with CSS than what could be specified with the deprecated HTML standard.

With a little practice, you can become adept at using basic CSS to format your web pages.  Becoming an expert with CSS then becomes an issue of accumulating experience with CSS properties and their associated values, and learning the effects of how styles can be applied to tags.  You can polish your CSS skills by experimenting with using CSS to arrange and format page mockups.  If you become good enough, you might even become comfortable designing from scratch using CSS.