Chrome 5 has really surged these past few months, as Google has really put a lot of effort into promoting it on their homepage as well as on Youtube, where IE6 is now officially unsupported.

We’ll continue to track browser market shares and adjust our testing matrix accordingly. We are considering retiring very low share browsers such as Firefox 2 and Safari 3.

Currently, free account tests will not be processed for up to 24 hours, however, we are doing everything possible to bring that time down. Apologies again, and happy testing,

Browsera
Follow us on Twitter

Consider the following example:

<div style="border: 1px solid black; width: 200px;">
    <p style="float: left; margin: 0;">This is some text</p>
    <a style="float: right; " href="#">
        <img src="x.png" />
    </a>
    <div style="clear: both;"></div>
</div>

And the resulting rendering in Internet Explorer 7 and Firefox

If the whitespace surrounding the <img> element is removed, IE places the item in the same place as Firefox!

So, next time you find a mysterious extra margin showing up in IE, remember this tip.

P.S. Sometimes it is undesirable to remove the whitespace formatting.  Another workaround is to apply the style “font-size: 0px” to the anchor element.

The Livekick homepage suffers from a common problem in IE6.  Floats are getting wrapped incorrectly due to IE not clipping the image to  its containers width.   IE6 renders the Aerosmith thumbnail as its entire width, even though that causes the containing div, which has width=129px, to expand to fit it.   The code looks like this

<div id=’divHotToursTiles’>

<div class=’tile’>SNIP</div>

<div class=’tile’ style=’width: 129px’>

<div>

<a><img></img></a>

</div>

<div class=’tile’>SNIP</div>

<div class=’tile’>SNIP</div>

</div>

The fix for this is relatively simple.  Just add “overflow: hidden;” to the tile class to prevent IE6 from forcing the image’s parent div to expand.

It seems that even our friends over at TechCrunch have some serious layout problems, even in IE7.  In this situation, the ad sidebar is wrapped way down below where they should be in IE7 (but are in the correct location in IE6).  Techcrunch gets 5.5 million visitors a month, and while a lot of their traffic is Firefox and Safari, at least some of those visitors are using IE7.  I’d even go farther and hypothesize that among customers who run ads on TechCrunch, IE is a higher percentage.

So, if you were an advertiser considering placing an ad at TechCrunch using IE7 and saw the buggy miserable ad placement on the page, you might think twice about the value of buying that ad.  And, all those visitors using IE7 will probably not even see the ads unless they happen to scroll down past the trackbacks.

The fix in this case is simple.  The <div> tags arent close properly in <div id=’col1′> and this leads to undefined behavior across browsers, especially when dealing with floats.  Close the divs properly and the problem goes away.  There are a few other bugs on TechCrunch you can check out, of similar magnitude.

This is the kind of bug that can directly impact revenue, so it’s a good idea to protect yourself by testing your site in Browsera.

An interesting difference was detected on the Building 43 Blog between IE and Firefox.   I spent some time trying to figure out which of the two was the “correct” rendering based on their CSS.  The relevant code looks like this:

<td>

<div class=’js-singleCommentMenu’ style=’float: left;’>[More button]</div>

<div class=’js-singleCommentKarma’ style=’float: left;>

<span>Like this comment?</span>

<span style=’display: none;’>Score: 1 by 1 vote</span>

</div>

</td>

In javascript, the score span is changed to “display: inline” so that it appears.  What could be happening is that in Firefox, the script runs before the layout is complete, and firefox tries to float the div with both spans visible, forcing it to the next line.  In IE, the script doesnt change the display until after the first span is placed to the right of the More button because it fits, and then the Score text is added.   Any other theories on this bug?

Most web developers are no longer supporting Firefox 2, since its market share has all but eroded away, but just in case someone has this problem in a different browser, I thought I’d mention it.  The site wizehive.com uses a very basic float style for their header and back links, however, in Firefox 2, the back link wraps to the next line.  Why?  After doing some digging, it turns out this is because of a change between the CSS 2 -> CSS 2.1 standards. CSS 2 required an explicit width, while CSS 2.1 automatically shrinks the container to fit it’s contents.  So, if you experience this in FF2, or any other browser, set an explicit width on that element to put it back in the right spot.

A few days ago, a test against the home page for cookpad.com revealed a float drop error in Firefox 3, in their main promotion of a user recipe.  Since then, the recipe featured has changed, and thus the bug does not occur any longer.

But, this demonstrates an important point:  if your site features user-generated content, you must be very strict with your presentation layout, because users may contribute content in shapes and sizes you never considered.

We believe this is one of Browsera’s core strengths, its ability to quickly validate hundreds of web pages and automatically detect problems.  Performing a test like this manually against a large number of web pages takes too long and is too error prone.