Internet Explorer (IE) and Firefox (FF) both use layout engines, which means they use a piece of software that takes the content—the website's code, image files, and formatting information—and shows it on the monitor. Right. No surprise there, you knew that. They both come at the web with a modular approach, meaning that they break the information down into separate modules. The engine portion takes care of the URL, cookies, scripts and plug-ins. The user interface (what you the user sees) takes care of the menu bars, bookmarks, address bar—you know, the graphic things. The HTML code tells how the web pages should be formatted, where images are located and how it all should be viewed (sizes, colors, spacing, etc.) Each browser uses a different layout engine to show you what the web has to offer. The differences that you may see on a website, when viewed on the two different browsers, comes back to the two layout engines that are the base. While they do the same essential thing, their approach in translating the information is where you get the differences in how a web page looks.
When a website is built using HTML, one way of formatting it is to build tables, rows and columns, to place the desired information. FF and IE treat these differently sometimes. In the examples here, you can see that FF creates cells that are not padded with extra space, unless you tell it otherwise. IE takes the same code and gives a bit more elbow room within the individual cells. How does that affect the end website? Too much space where you weren't planning on it is never a good thing.
The most fun of all (says the designer with great sarcasm) is when FF and IE can't agree on something called "rowspan." That is when, in the building of an HTML table, you want a cell to span more than one row—hence the name of the command. What will look great in one browser will look like a kindergartener coded it in the other.
Here's another example of IE and FF assuming different things: the top margin is not specified here. FF assumes that none is wanted, while IE gives a margin of about 15 pixels unless you tell it not to.
Spacing is also an issue when bulleted lists are involved. FF loves to give extra space for bullet lists, whether you ask for it or not. IE wants to be told that it needs to make a line break, but when FF looks at it, it thinks "Two breaks! Double space!" and so you get more space between your bullets for FF. In the FF example, you can see how the additional space in the bullet list breaks the other graphics surrounding it, in a bit of a ripple effect.
Sometimes, the differences between how the browsers render a website can be tracked down to simple syntax. What IE calls "alpha transparency" Firefox calls "opacity." Both terms do the same exact thing as a end result. Think of it this way: what is the name of a big sandwich with lots of toppings? Some people call it a "hoagie" and some people call it "sub." Two different names for the same sandwich. But those differences change the way the programmer must code, therefore potentially altering how the site details come out.
So, you ask, how do designers deal with all of this? We deal with a lot of grumbling, griping and occasional cursing, that's how. We work hard on your site, thinking it looks great. Then we test it in another browser and – gah!- it's fubar. We love that when it happens, no, really. Then we suck it up, re-code and re-test until it is correct. Is it a pain? You bet. But if we're worth our salt as designers, we will always be striving to provide you with a site that you love, and therefore we want you to have a consistent website. While it would be incredible if the browsers looked at the interwebz the same, the fact that they do not is why they exist. They each offer pros and cons, and designers have to adjust to suit each.
No comments:
Post a Comment