I just spent the last several days troubleshooting this bug and since I couldn't find any information anywhere on the web for this obscure problem, I'm posting it here.

For a new site I'm building I have randomly loading promo buttons which are created in Flash. Since they're random and will appear on multiple pages, they need to be transparent. Nothing out of the ordinary, but when I put the page together I noticed a very peculiar error...

ONLY in Firefox 1.5 on a PC (2.0 was fine, Mac was fine) and ONLY when the swf had it's wmode property set to transparent, the swf would load but then be inoperable. No rollover animation or button click events would fire. It just sat there doing nothing on the page.

I tried everything to make it work... multiple embed methods, different flash publishing settings, etc. Nothing seemed to help until a colleague steered me, oddly enough, toward the CSS for my page.

My Flash promos where in a floated div tag for the left column of my page. The container element for the page columns contained a few styles, one of which was "overflow: auto;". This was being used to help clear the floats. A simple switch to "overflow: hidden;" magically solved the problem.

I’m still not 100% as to why this problem occurred. I was careful with my widths and paddings to make sure there weren’t any actual overflow problems but for some reason older versions of Firefox were just not happy with it. So there it is… if anyone else ever encounters this very odd random bug, check the CSS overflow property for the solution.

Permalink | Posted On March 16, 2007 Comments (0) | TrackBacks (0)

As each year goes by the amount of browser/platform combinations continues to grow and grow. One of the main challenges we face as developers is trying to build sites that look great in all of the new browsers but don't look like a catastrophe in the older ones. What's the cutoff point though? Which browsers do you support and which do you not care about?

I don't really think there's a definitive answer to that question. I'd say that it largely depends on the site you're building and it's demographic. Code Scene, for example, is targeted primarily at web developers so I don't care if it doesn't work in Netscape 6. If you're a developer and your browser of choice is Netscape 6, then you have more problems than Code Scene can solve. On the other hand, if my target audience involved public schools and libraries which may have outdated machines I'd want to make sure that the site was accessible in older browsers.

"Accessible" should be the key word here. You'll go broke and/or crazy trying to get your site to look pixel-perfect in every browser. You should concentrate on making it perfect in the ones that count and making sure that at least the content is accessible (although not 100% pretty) in the others. You can do this with a wide variety of tricks such as using @import to include your CSS files. Modern browsers will render them. Netscape 4 will ignore it completely and render an accessible non-styled text version of the site.

Again, while the answer to the "What browsers should I test in?" question is different for each client, there is no question that some browsers are more important than others so this is my opinion on which should be prioritized when building a new site.

I've based this on browser data from TheCounter, W3Counter, Browser News, Market Share, and the analytics reports of a few sites I've built. If you're re-building an existing site, the analytics reports are a great way of seeing what browsers people are using.

Without further adieu, here are my recommendations for which browsers to prioritize.

Priority 1 - Your site MUST work flawlessly in these browsers since they account for the majority of Internet traffic.
Internet Explorer 6
Internet Explorer 7
Mozilla Firefox 2.0
Mozilla Firefox 1.x

Priority 2 – These browsers are somewhat older and/or less popular but your site should look good and work properly in them. (If you expect large amounts of traffic from Mac or Linux users then you may want to move Safari and Konquerer to Priority 1)
Internet Explorer 5.5
Netscape 7+
Safari 1.2+
Camino 1+
Opera 9+
Mozilla 1.x
Konquerer 3.4+

Priority 3 – These browsers are outdated and not widely used at all. Steps should be taken to make sure the site is accessible and/or downgrades to a text-only version in these browsers.
Netscape 6
Mac Internet Explorer 5.2
OmniWeb
Netscape 4.x
Internet Explorer 4.x
Lynx

Again, these are just general recommendations. Always keep your audience in mind when making the final decision. If you have agree/disagree, leave a comment below.

Permalink | Posted On October 15, 2006 Comments (1) | TrackBacks (0)

What does your website look like in Safari 1.3? How about the Firefox 2.0b1 beta? The Konqueror browser on a Linux box? You really have no idea do you?

Most developers test their pages on the one or two browsers they have installed on their machine but rarely in any others and usually never in any older legacy browsers. This isn't necessarily a sign of laziness. It's just really time consuming and expensive to setup a dozen test machines with different browser configurations. That's where BrowserCam comes in.

BrowserCam is an online service which has all of these platform/browser combinations setup for you. With a BrowCam account you can test how your sites render on the widest range of possible clients and make sure everything is perfect before launch. See BrowserCam's complete list of browsers.

There are two main features available through BrowserCam.

• A Capture server where you provide a URL and a list of options and BrowserCam will give you screenshots of each platform/browser configuration you've chosen.
• A Remote Access service where you can actually log into these machines (through VNC) and use the browsers from your desktop.

To demo, I've used my account to take screenshots of how Code Scene looks in a wide range of browsers.

Linux Konqueror 3.4.0-5
Mac Camino 1.0
Mac IE 5.2
Mac Safari 1.2
Mac Safari 1.3
Mac Safari 2.0
PC AOL 9.0
PC IE 4
PC IE5
PC IE5.5
PC IE6
PC IE7RC1
PC Firefox 1.5
PC Firefox 2.0b1
PC Mozilla 1.6
PC Mozilla 1.7
PC Netscape 4.78
PC Netscape 6.2
PC Netscape 7.2
PC Opera 8.5
PC Opera 9

As you can see, Code Scene looks great in most of the newer browsers while failing miserably in some of the older ones. So what browsers should you really care about? Stay tuned for my next post on that.

For now... if you're a developer and need to QA how your site looks in different browsers, BrowserCam is the cheapest and easiest way to make that happen.

Permalink | Posted On October 7, 2006 Comments (0) | TrackBacks (0)

Christmas has come early this year. A few weeks ago I wrote about the Web Accessibility Toolbar. My main problem with it was that it was IE-only and I'm a Firefox guy. Today my prayers were answered by the Firefox Web Developer Extension. It has everything the accessibility toolbar has plus a lot more and it's strictly a Firefox add-on. If you're a web developer you need to have this. Seriously it will make your life so much easier.

Download the Firefox Web Developer Extension here.

Special thanks go out to my friend and colleague Nik Livadas who pointed this awesome tool out to me. He's a Flash specialist out of Rochester, NY with a standards-based site in the works. I'll keep you all posted on that.

Permalink | Posted On April 27, 2006 Comments (0) | TrackBacks (0)

Most web developers I know are using Mozilla Firefox as their browser of choice these days. If you aren't well, why not?

Anyway, we all love Firefox and we develop our sites for it due to it's better support for standards. Then we make tweaks, hacks, and fixes to support IE since that's still the #1 browser. Sometimes it can be a pain to keep switching back and forth. That's where this handy Firefox extension comes in. Simply use Firefox as you normally do and when you're ready to view/test a page in IE, just right click and select "View This Page in IE".

It's incredibly simple but unbelievable helpful. I find myself using it all the time.

Download the IE View Firefox Extension.

Permalink | Posted On February 23, 2006 Comments (2) | TrackBacks (0)