Chrome 5 and Firefox 3.6.3 Browser Support
Jul0
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% |
| Firefox 3.6 | 16.15% |
| Microsoft Internet Explorer 7.0 | 11.43% |
| Chrome 5.0 | 6.48% |
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.
Now Offering non-subscription “Project Plan”
Jan0
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.
Experiencing testing delays
Oct0
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,
Browsera
Follow us on Twitter
Mysterious margins in IE can be caused by document whitespace
Oct1
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.
XBDiff is now Browsera!
Jul3
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.
IE6 Image Size Causes Float Wrap - Livekick Homepage
Jun0
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.
Missing Close Tags Cause Undefined Layout Behavior - Techcrunch Advertising
Jun0
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.
Line Wrap Difference Between IE and Firefox - Building43 Blog
Jun0
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?
Floats Don’t Shrink To Fit in Firefox 2
Jun0
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.
Layout Testing for Dynamic Content
Jun0
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.