PlumberSurplus.com Ecommerce and Entrepreneurship Blog | About | Contact | PlumberSurplus.com Store

Cross-browser Compatibility: Firefox, Internet Explorer, Google Chrome, and Floating Boxes

Posted on May 13, 2009 by Trevor

I try not to discuss technical subjects in my posts because, being a developer, I understand that most of the stuff I find fascinating just wouldn't be interesting to most of you. But sometimes I run across something that's both useful and understandable, and I have to share it. So I hope you'll bear with me.

Cross-browser compatibility is a major headache for web developers. The web is built on standard protocols like HTML, CSS and Javascript. This is great, because it allows all sorts of different computers to communicate with each other. However, there are many different browsers out there to interpret these standards: Internet Explorer, Firefox, Safari, Opera, Chrome, and many more. And each of these browsers comes in multiple versions. And every version of every browser interprets the standards a little differently. Sometimes that's because the standards aren't clear, but usually the browser is simply in error, or a decision was made not to support the standard. So instead of being a simple job of following the standard when developing web sites, a web developer has to consider the unique behavior of the most common browsers to make sure most users see the website correctly. Usually this is done by developing in a more "standards-compliant" browser and then trying to fix the quirks in other browsers while not accidentally introducing any in the original. It's a balancing act that involves a lot of knowledge of the browsers' inner workings.

Troubleshooting Browser Errors

So, I ran across a strange bug on our website, PlumberSurplus.com, that I knew immediately was a browser problem, but hadn't seen the problem before. There were several "divs", or blocks of content, on a page that were displaying differently in different browsers. In Firefox and Internet Explorer, the page looked something like this:


div content displayed in IE and Firefox

However, in Google Chrome, the page looked like this:


div Content displayed in Google Chrome

Obviously, Chrome was displaying the page differently than the others. To understand why, we have to dig into CSS, the standard web language that dictates how pages are formatted. CSS works hand-in-hand with HTML: in CSS, HTML elements are given attributes whose values determine how the elements are formatted. For example, you could take some text in HTML and use CSS to make it bold. In this case, the first div (in red) has a CSS attribute called "display" that's set to "inline-block". That means that the div acts like a solid block, that doesn't wrap or change shape because of things around it, but that it also stays inline, so that if there's text around it, it fits right in as part of the text. We'll revisit this later. The second (blue) div has an attribute called "float" that's set to "right". This means that instead of simply being inserted into the text of the page, the div gets attached to the right side of the page (or the section it's in), and the rest of the content flows around it. The third (green) div has no special attributes associated with it; it's just there to illustrate page flow.

So it looks like what's happening is that the first div is forcing the second div down in Firefox and Internet Explorer, but flowing around it in Chrome. Let's do some tests to find out why. First, let's get some text in there to see better how the content flow works. Here's how Firefox looks:


Content in Mozilla Firefox

As you can see, the first div is right in the content flow where it's supposed to be, and the second div is sitting on the right as the content wraps around it. Looks good so far. Here's Chrome:


Content Google Chrome

This looks pretty much the same except for one subtle change. The second div is one line higher than in Firefox. Why is that? I've colored the text to demonstrate. The black text is all before the floating div. The blue text is actually after the floating div, but since the div floats, it wraps around it so it looks like it comes immediately after the previous text. So the difference between the two browsers is this (and this is important, so I'm setting it out):

In Firefox and Internet Explorer, a floating div floats below all previous content. In Chrome, a floating div only floats below content that is directly above it.

W3C (Wide Web Consortium) Standards

So, which is correct? For that, we turn to the World Wide Web Consortium, W3C, the standards body that determines the specifications for CSS. Now, just as there are several versions of each browser, there are also several versions of CSS. The main version of CSS in use for some time has been CSS2.1, but recent browsers have begun adopting parts of CSS3 (which is itself still in development). However, for our purposes they are identical. They give these rules for positioning floats:

4. A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
8. A floating box must be placed as high as possible.

Those rules are somewhat technical, but the two most important ones here are six and eight. Rule six says that a floating div can't be higher than any line of content that came before it. Rule eight says that, unless another rule conflicts, a floating div should be as high as possible. So, looking at the pictures again, it looks like Firefox and Internet Explorer both line up with the bottom of the previous line of text, whereas Chrome lines up with the top. That means that Firefox and Internet Explorer violate rule eight; Chrome is indeed in the right.

However, now we need to know what to do to fix the issue so that all the browsers display the same thing. There are two ways to do this: we could fix Firefox and Internet Explorer to display correctly, or we could "fix" Chrome to display the same as the other browsers. In this case, I actually wanted all the browsers to put the floating div below the first div rather than to the side, so I chose the second option. My fix was to change the first div from "display:inline-block" to "display:block". This took it out of the content flow and pushes everything after it to the next line, like so:


All Browsers with floating div below the first div

That includes any floating divs below it, so now the second div is positioned the way I want it (as in the first picture) even in Chrome. Since there wasn't any text on the page in that section, it didn't interrupt the content flow. If there was text there, I would have had to find a way to keep the first div as "inline-block" while pushing the float down; possibly by moving the floating div itself lower in the content flow.

If, on the other hand, I had wanted to make Firefox and Internet Explorer work the way Chrome does, allowing the floating div up beside the first, I would simply have to move it to just before the first div in the content. That way it wouldn't be below the div at all: it would be first, and the div would "wrap around" it by staying to its left. Both solutions are relatively easy once you understand why each browser is behaving the way it is, but it took some digging to do that. I wasn't able to find anyone else detailing this discrepancy, so I hope this post is helpful to you web designers out there, and for the rest of you, chalk it up as a glimpse into the life of a developer.
 



The possibilities are endless with a bathroom remodel. Discover your classic side with a clawfoot tub, experiment with fresh bathroom vanities and coordinate it all with matching faucets. Shop PlumberSurplus.com 24 hours a day, 7 days a week for all of your bathroom needs.

blog comments powered by Disqus