We’ve added Chrome 5 and Firefox 3.6.3 browser support to our matrix. According to NetMarketshare, the current browser share breakdown looks like this:
|Microsoft Internet Explorer 8.0||26.87%|
|Microsoft Internet Explorer 6.0||16.97%|
|Microsoft Internet Explorer 7.0||11.43%|
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.
We’ve heard your feedback! We now offer a non-recurring plan, the Project Plan. For those of you who would only need to use Browsera for a short period of time when you make website revisions, we now offer a plan with a one-time charge of $39. This will give you access to Browsera for 14 continuous days. At the end of the period, you won’t be charged again until you renew or purchase a subscription. Check out the new plan details.
Hey there everyone, we’ve been mentioned on Twitter by @smashing_mag, and it’s been retweeted numerous times! Thanks for all the support and checking us out. Unfortunately, our servers weren’t quite prepared for all of the testing requests, so we apologize for the delay. We’re working on adding more capacity so we can deliver a better and faster turn around time.
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,
Follow us on Twitter
Images not lining up right in IE? If it appears that there is a mysterious margin in IE even when your margins are set to “0″, you’re probably affected by this. Internet Explorer treats whitespace as significant inside of anchors.
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.
We’re happy to announce that XBDiff is now called Browsera. XBDiff was short for ‘Cross-Browser Differences’, and was the working name for the initial project. The new name, Browsera, signifies the new Browser Era of applications. We know that developing applications for web browsers is hard, and we believe that any tools we can build to make it easier will benefit everyone. So, let us know if you have suggestions or ideas.
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 class=’tile’ style=’width: 129px’>
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.
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:
<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>
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.