Detect IE8, IE7, Safari, FireFox with jQuery 1.3+?

Question

I need to change a value based on each browser since they all render differently.

if (navigator.appName == 'Netscape'){
  top = 17;
}

This was working but unfortunately both Firefox and Safari show up as "Netscape"

How would I use jQuery 1.3.2 to detect all these? I couldn't find any info under jquery.support now that jquery.browser is gone.

Thanks!

Answer 1

What are they rendering differently? Is there a way you can use capability detection rather than browser sniffing? It's less prone to breakage when new browsers come along, and more tolerant of the fringe.

Answer 2

They all renders the tooltip's top css value differently.

var container = $('<div id="personPopupContainer">'
 + '<div id="personPopupContent">'
 + '</div>'
    + '</div>');

var pos = $(this).offset();
var width = $(this).width();
var reposition = { left: (pos.left - width) + 'px', top: pos.top + msg + 'px' };

container.css({
                    top: reposition.top
             });

Answer 3

Are you, or have you considered, using a reset.css stylesheet to set all browsers' defaults to zero? If not I recommend you do so since it might solve your current problem, as well as potential future ones.

It may help because it would set all browsers to a baseline zero, so when you apply padding or positioning, it should have the same effect in all browsers.

Answer 4

If you must have browser detection (despite the warnings against it), ppk's routine is current (even up through Chrome and iPhone).

Answer 5

you can use the jQuery.browser object. It's deprecated in jQ 1.3 in favour of the jQuery.support, but there's no immediate plans to remove it altogether, so you should be safe.

That said, using browser sniffing, while very easy and tempting, isn't usually the best way to do things. Since it sounds like you're having problems with some browsers doing CSS differently, you might want to look at jQuery.support.boxModel.