Junior Coders
Script to detect browser/insert .gif
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
Elite Coders
No. Browser detection is unreliable.Originally Posted by pcvoyage
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.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.
Mike
Elite Coders
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:
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.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>
cr3ative
A retired member, drop me a line through my site if you'd like to find me!
cr3ative media | read the stickies
Elite Coders
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.
I'm glad you appreciate that.The question of unreliability was raised before (by you?), and is a valid point.
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).But see it this way - 95% of internet users have installed either MSIE, Mozilla or FireFox, [...]
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.Fishing after the 5% of people who choose to re-label their browser [...]
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?is not really worth the effort.
The language attribute has been deprecated for over six years. Even so, the type attribute makes it redundant.Code:<script language="JavaScript" type="text/JavaScript">
Mike
[1] Unless the OP shows the mark-up involved, it's not possible to say with certainty.
Junior Coders
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>
Junior Coders
Sorry, above thanks was meant for cr3ative
Keith
Elite Coders
I knew this would happen. Rather than address the actual issue, the uninformed rush for the quick hack.
No it doesn't. You just haven't observe it fail.it works perfectly
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.[...] filler pic
And still the language attribute is present...<script language="JavaScript" type="text/JavaScript">
Mike
Elite Coders
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
A retired member, drop me a line through my site if you'd like to find me!
cr3ative media | read the stickies
Junior Coders
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
Elite Coders
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.
Then why did you suggest it?I know the script is a bad way to fix a webpage,
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.
Ignorance is bliss.but pcvoyage seems happy
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.
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.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!
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.
You have worse problems there: the menu doesn't appear at all unless Opera is in a spoofing mode.I havne't tried this in Opera, not knowing what they put for head space.
Mike
[1] Transitional is fine if it's needed, but it's not here.
Posting Permissions
Reply With Quote
Bookmarks