Script to detect browser/insert .gif

pcvoyage · #1 12-26-2004, 06:01 PM

Is it possible to have a JS that will detect the browser type, then if a match, cause the web page to add a 'filler' .gif at the top of the page?
It seems that IE puts a 'header' of about 20 pixels at the top of a page. NS, Firefox. etc., put about a 10 pix space. This throws off alignment of a DD menu bar (absolute location) located lower in the page.
Thanks
Keith

mwinter · #2 12-26-2004, 06:34 PM

Quote:

Originally Posted by pcvoyage

Is it possible to have a JS that will detect the browser type, then if a match, cause the web page to add a 'filler' .gif at the top of the page?

No. Browser detection is unreliable.

Quote:

It seems that IE puts a 'header' of about 20 pixels at the top of a page. NS, Firefox. etc., put about a 10 pix space.

In all likelihood, it's a simple matter of setting the CSS margin property on the appropriate element however, without seeing your mark-up it's impossible to comment. Before posting though, please make sure that your document validates. User agents, although intrinsically different, usually render valid documents in much similar fashion than one that invokes quirks-mode.

Mike

cr3ative · #3 12-26-2004, 07:59 PM

Quote:

Originally Posted by mwinter

No. Browser detection is unreliable.

That doesn't really answer his question - because it can be done. Let me explain.

The question of unreliability was raised before (by you?), and is a valid point. But see it this way - 95% of internet users have installed either MSIE, Mozilla or FireFox, which all respond perfectly to browser detection scripts. Fishing after the 5% of people who choose to re-label their browser (for example, Konquerer for Linux changes how it is detected) is not really worth the effort. This 5% know they are going to suffer from some script errors. While reliability is important, we have to keep a perspective.

For more information on browser detection (and redirection in this case), visit
http://www.netmechanic.com/news/vol3...cript_no15.htm

While it sounds like you need to recode your website to be more compliant with standards (hence varying results over different browsers), your actual request can be fufilled:

Code:

<script language="JavaScript" type="text/JavaScript">
 if(navigator.appName == "Netscape")
{
 document.write("<img src='ns.gif'>")
}
 if(navigator.appName == "Microsoft Internet Explorer")
{
 document.write("<img src='ie.gif'>")
}
</script>

This uses ie.gif and ns.gif (Internet Explorer and Netscape respectively) to use a suitable image where the script is placed in the <body> section.

cr3ative

mwinter · #4 12-26-2004, 08:22 PM

Quote:

Originally Posted by cr3ative

That doesn't really answer his question - because it can be done.

Lots of things can be done, but it doesn't mean they should be. If someone is to give advice, they should be able to determine when to give what was asked for, or what was needed. In this case, a script is probably[1] not needed.

Quote:

The question of unreliability was raised before (by you?), and is a valid point.

I'm glad you appreciate that.

Quote:

But see it this way - 95% of internet users have installed either MSIE, Mozilla or FireFox, [...]

Statistics like that vary wildly with the visitors a site might attract. It's hardly a universal truth. Besides, given that you accept the possibility of spoofed user agents, how do you know that those statistics aren't affected? (That is, of course, a rhetorical question).

Quote:

Fishing after the 5% of people who choose to re-label their browser [...]

It's not necessarily the users that choose to spoof their browser, but the manufacturer. You're going to punish the user for something they didn't do? That's hardly fair.

Quote:

is not really worth the effort.

What effort? In this case, we're probably talking about a single rule in a style sheet. That's certainly easier, smaller, and quicker than a robust detection script. Why a hack when there is far more sensible approach?

Code:

<script language="JavaScript" type="text/JavaScript">

The language attribute has been deprecated for over six years. Even so, the type attribute makes it redundant.

Mike

[1] Unless the OP shows the mark-up involved, it's not possible to say with certainty.

pcvoyage · #5 12-27-2004, 08:27 PM

To MWINTER: Thanks a million for the JS - it works perfectly - I used just the NS detection and is does indeed insert the filler pic at the top of the page, thus aligning everything just right. Not only that, Firefox is detected with the same code and it lines up perfectly too! Keith

<script language="JavaScript" type="text/JavaScript">
if(navigator.appName == "Netscape")
{
document.write("<img src='ns.gif'>")
}
</script>

pcvoyage · #6 12-27-2004, 08:28 PM

Sorry, above thanks was meant for cr3ative
Keith

mwinter · #7 12-29-2004, 01:33 AM

Quote:

Originally Posted by pcvoyage

Thanks a million for the JS

I knew this would happen. Rather than address the actual issue, the uninformed rush for the quick hack.

Quote:

it works perfectly

No it doesn't. You just haven't observe it fail.

Quote:

[...] filler pic

Spacers - another kludge. The inventor of the technique has publically apologised for popularising it. If that doesn't convince just how bad they are, I don't think anything will.

Quote:

And still the language attribute is present...

Mike

cr3ative · #8 12-29-2004, 12:11 PM

Quote:

Originally Posted by mwinter

No it doesn't. You just haven't observe it fail.

Hi Mike,

Please could you post an example (screenshot or environment) where you see this script fail? I'm interested.
(I know the script is a bad way to fix a webpage, but pcvoyage seems happy

)

Cheers
cr3ative

pcvoyage · #9 12-29-2004, 05:59 PM

Thanks for your interst, both of you. I know I'm using old and in the way, but it is simple and seems to work. The page I'm dealing with is
http://www.pcvoyage.com/hcc2/allied
Without the filler, the menubar overlaps the top of the table (in NS and FF). With the filler, it lines up. Why IE has a 14 pixel larger header by default than the other 2, I don't know, nor want to know! I havne't tried this in Opera, not knowing what they put for head space. Keith

mwinter · #10 01-01-2005, 07:41 PM

Quote:

Originally Posted by cr3ative

Please could you post an example (screenshot or environment) where you see this script fail? I'm interested.

Before I start, considering reading the Browser Detecting (and what to do instead) article from the comp.lang.javascript FAQ notes. It focuses on browser detection for client-side script execution, but it applies to browser detection as a whole.

From Opera:

You'll notice that it fails on two counts:

The "detection" fails to realise that the browser is actually Opera.
Instead of helping to bring the browser into line with IE's rendering, it actually makes it worse in the second case.

Just so you know, by default Opera spoofs IE. That would mean that any Opera user that hasn't altered their configuration would actually see an incorrectly laid-out version of the page. It's even worse if they set it to specify Opera correctly, like I do (I'll come to that later).

Of course, what if any script "solution" encounters another browser altogether. What will it do when ICEBrowser, Lynx, Safari, or Konqueror loads the page? Will the page appear as expected, will it exhibit the problem as it was originally encountered, or will the "solution" make it even worse?

As I've said previously, browser detection is a solution worth considering only if there are no others. In the majority of possible cases, there are. Whether or not you agree that browser detection is an approach which is always doomed to failure (and you'd be disagreeing with a lot of people that are more knowledgable than either of us), you cannot dismiss that last fact.

Quote:

I know the script is a bad way to fix a webpage,

Then why did you suggest it?

If you know a better way of solving a problem, but don't have the necessary information to propose a complete solution, then ask for it. It doesn't do anyone any good to provide sub-standard information.

Quote:

but pcvoyage seems happy

Ignorance is bliss.

Quote:

Originally Posted by pcvoyage

http://www.pcvoyage.com/hcc2/allied/

The mark-up there is in serious need of revision (sorry, but it is). You should be using a Strict DTD[1], CSS (not tables) for layout, certainly there should be no font elements anywhere (even if you were using Transitional), and I really see no point in using link titles that are exactly the same as the link text. Oh, and you don't have alt text (which is required) on any of your images.

Quote:

Without the filler, the menubar overlaps the top of the table (in NS and FF). With the filler, it lines up. Why IE has a 14 pixel larger header by default than the other 2, I don't know, nor want to know!

It's simply the intrinsic differences in rendering between all browsers. It's why pixel-perfect positioning is a ridiculous goal. It's just not possible. A screenshot I took shows the issue clearly. Firefox 1.0 is the browser on the left-hand side; IE 6 is on the right.

Personally, I don't see the point in the menu at all. You already have the links in place, so you're just duplicating content - almost 30KBs of script to show an unnecessary, unreliable (see below), and inaccessible menu.

Quote:

I havne't tried this in Opera, not knowing what they put for head space.

You have worse problems there: the menu doesn't appear at all unless Opera is in a spoofing mode.

Mike

[1] Transitional is fine if it's needed, but it's not here.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search