09:40 AM
Connect Directly
Repost This

Those Cross-Browser Blues: How To Develop Web Sites For Both Internet Explorer And Firefox

If you're trying to develop sites that will be compatible with IE, Firefox, and Opera, watch out -- there are still a lot of speed bumps out there. We examine six of them and let you in on some solutions.

Quirky Implementations Of Layout Functions

This is the most common place where people run into issues. They create something in one browser, and then find that the way it's rendered in another simply isn't the same because there are different unspoken assumptions at work about how the standard is to be implemented.

The first thing to do is find out specifically what's not implementing correctly. If you're looking at a page in IE and text is not flowing correctly or behaving as it's expected to within a box, such as a DIV or SPAN, there's a chance you may be dealing with IE's quirky box model, which handles boxes a little differently from the Mozilla method. There's also a key difference in the way IE and Firefox handle an overflowing box, and IE's odd handling of non-enclosed floats (another box-related issue) is something that still persists with IE 7. The pages I've linked to here dissect the problems in detail and demonstrate a couple of workarounds.

A great many examples of these kinds of deviations can be seen on the QuirksMode site, but it has not been updated recently -- the compatibility grids don't mention IE 7 at all. But you can run live tests against many different HTML, CSS, and JavaScript standards and functions, and see how they behave (or don't behave) in any given browser. There's also a detailed discussion of this sort of thing (from the POV of a Firefox-friendly designer) on the Computer Gripes site. He goes into some detail about specific sites that have caused trouble for Firefox, and describes specific behaviors that may vary (such as horizontal rules created with the HR tag).

Proprietary IE-Only HTML Tags

IE's implementation of Web standards includes a whole slew of ad hoc additions to the HTML tag library that don't show up elsewhere. Most of these seem to have been on the wane, but every now and then you run across a site where they still haven't been eliminated.

The only viable long-term solution is to move away from proprietary tags, since the few that are really worth using often implement functionality that can be done in a proper cross-browser fashion anyway. Those that aren't cross-browser are usually frivolities.

A simple example: The bgproperties attribute for the body tag allowed you to keep a background image on a page stationary while someone scrolls through the page. This particular method doesn't work in other browsers other than IE, but there is a CSS style attribute -- background: fixed -- that accomplishes the same thing on both IE and Mozilla.

Another proprietary tag I've seen used in IE, but not widely (thank goodness), and that can and should be done away with, is the CSS font / image filter system. This employs the filter: statement in a CSS style declaration to add various kinds of post-processing to images and fonts directly on a Web page. There are some examples on David J. Hark's Web site; view this page in IE and then in Firefox to see the differences. This is the sort of thing that can be dropped into the same trash can as the blink tag, if only in the name of good taste.

2 of 5
Comment  | 
Print  | 
More Insights
The Agile Archive
The Agile Archive
When it comes to managing data, donít look at backup and archiving systems as burdens and cost centers. A well-designed archive can enhance data protection and restores, ease search and e-discovery efforts, and save money by intelligently moving data from expensive primary storage systems.
Register for InformationWeek Newsletters
White Papers
Current Issue
InformationWeek Elite 100 - 2014
Our InformationWeek Elite 100 issue -- our 26th ranking of technology innovators -- shines a spotlight on businesses that are succeeding because of their digital strategies. We take a close at look at the top five companies in this year's ranking and the eight winners of our Business Innovation awards, and offer 20 great ideas that you can use in your company. We also provide a ranked list of our Elite 100 innovators.
Twitter Feed
Audio Interviews
Archived Audio Interviews
GE is a leader in combining connected devices and advanced analytics in pursuit of practical goals like less downtime, lower operating costs, and higher throughput. At GIO Power & Water, CIO Jim Fowler is part of the team exploring how to apply these techniques to some of the world's essential infrastructure, from power plants to water treatment systems. Join us, and bring your questions, as we talk about what's ahead.