PDA

View Full Version : Script to detect browser/insert .gif



pcvoyage
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
12-26-2004, 06:34 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?No. Browser detection is unreliable.


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 (http://validator.w3.org/). User agents, although intrinsically different, usually render valid documents in much similar fashion than one that invokes quirks-mode.

Mike

cr3ative
12-26-2004, 07:59 PM
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/javascript_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:

<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
12-26-2004, 08:22 PM
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.


The question of unreliability was raised before (by you?), and is a valid point.I'm glad you appreciate that.


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).


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.


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?


<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
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
12-27-2004, 08:28 PM
Sorry, above thanks was meant for cr3ative
Keith

mwinter
12-29-2004, 01:33 AM
Thanks a million for the JSI knew this would happen. Rather than address the actual issue, the uninformed rush for the quick hack. :(


it works perfectlyNo it doesn't. You just haven't observe it fail.


[...] filler picSpacers - 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.


<script language="JavaScript" type="text/JavaScript">And still the language attribute is present... :(

Mike

cr3ative
12-29-2004, 12:11 PM
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
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
01-01-2005, 07:41 PM
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) (http://www.jibbering.com/faq/faq_notes/not_browser_detect.html) article from the comp.lang.javascript FAQ (http://jibbering.com/faq/) notes. It focuses on browser detection for client-side script execution, but it applies to browser detection as a whole.

From Opera:


As Mozilla (http://www.mlwinter.pwp.blueyonder.co.uk/dd/pcvoyage/opera-mozilla.jpg)
As IE (http://www.mlwinter.pwp.blueyonder.co.uk/dd/pcvoyage/opera-ie.jpg)

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.


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.


but pcvoyage seems happy :)Ignorance is bliss.


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.


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 (http://www.mlwinter.pwp.blueyonder.co.uk/dd/pcvoyage/juxtaposed.jpg) 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.


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.

cr3ative
01-01-2005, 08:18 PM
Thank you for the screenshots and information; it's appreciated.

I am currently upgrading my website to be compliant with standards, and this is all useful information.
edit: It appears that my site is too far gone to even attempt to validate it.

Have a good new year,
cr3ative

mwinter
01-01-2005, 10:11 PM
[To pcvoyage:] The mark-up there is in serious need of revision (sorry, but it is).I've prepared a basic example (http://www.mlwinter.pwp.blueyonder.co.uk/dd/pcvoyage/allied-health.html) that demonstrates the cleaner mark-up I was talking about. I've changed some of the text to remove parts that I think aren't necessary. One example is "Click HERE for details." The W3C have comments (http://www.w3.org/QA/Tips/noClickHere) with regard to that sort of link.

I chose to float the columns, but there are other ways to create the two column layout that you'll find around the Web. Google (http://www.google.co.uk/search?q=%222+%7C+two+column%22+css+layout) for more information.

Hope that helps.



It appears that my site is too far gone to even attempt to validate it.I take it you're referring to http://www.gerryhyh.f2s.com/paul/content/? Your server isn't sending any character set information. My ISP-provided Web server is a pain for that, too (I can set the content type, but I can't add character set info.). You also haven't added a DOCTYPE declaration.

If you can't correct that information now, you can use the extended interface (http://validator.w3.org/detailed.html) to override (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gerryhyh.f2s.com%2Fpaul%2Fcontent%2F&charset=iso-8859-1&fbc=1&doctype=HTML+4.01+Transitional&fbd=1&verbose=1) some of the validation options.


Have a good new yearYou, too!

Mike

pcvoyage
01-03-2005, 04:16 AM
In reply to "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."
Thanks for the critique. One thing should be somewhat obvious here. I've made a web page using old techniques and don't have an education in what you mention. "Strict DTD[1],"? Please point me in the right direction so I might learn what that is. If tables are no good these days, I would love to learn how to get the same effect with CSS. I will have ALT text for all images at some point. The link titles are there to meet ADA needs - they want pop-ups like ALT text. I don't believe ALT text works with links, but that's probably one of many things I don't understand.

mwinter
01-03-2005, 12:47 PM
"Strict DTD[1],"? Please point me in the right direction so I might learn what that is.The HTML Specification (http://www.w3.org/TR/html4/) describes what DTDs and DOCTYPEs are in section 7.2 - HTML version information (http://www.w3.org/TR/html4/struct/global.html#h-7.2). To expand a little on the information there, there are three different "types" (for want of a better name) of HTML, each containing a different set of elements that an author can use: Strict, Transitional, and Frameset.

Transitional is, as the name suggests, an intermediate version. It contains presentational elements like center and font, and attributes like bgcolor and align[1] that were present in HTML 3.2, but were formally deprecated in HTML 4. The intention was that as style sheet support matured, documents would be written according to the Strict DTD. Unfortunately, too many out-of-date resources still teach techniques using Transitional so it's still very common.

Frameset is much like Transitional, but with frame-specific elements.

Strict is supposed to be the goal when authoring new documents. It encourages separating content and presentation by removing the presentational elements I mentioned above. The result should be smaller, cleaner and more meaningful mark-up, rather than nested table nonsense.

It's quite difficult to suggest how someone should learn to move from Transitional to Strict. Certainly, you'll need to have good working knowledge of CSS as that's all you'll be using to layout a document. You'll also have to develop a better understanding of HTML, primarily knowing what the appropriate usage is for the various elements, and what elements shouldn't be used any more. The latter is fairly simple: attach a Strict DOCTYPE (see the second link, above) to your document and validate it (http://validator.w3.org/). That will show you what needs to be corrected or removed. That said, it's better to start simply from the ground-up.

Begin by just writing out the content using semantic (meaningful) mark-up, and ignore presentation and layout completely. After you've done that, and the mark-up validates, start applying style sheet rules. You'll probably find that you need to add extra mark-up, like divs to contain a set of elements and move them as a group. That's fine, but don't start peppering your mark-up with these extra elements - try and keep them to the minimum necessary.

If you have access to Usenet, it might also be a good idea to read the alt.html, comp.infosystems.www.authoring.html and comp.infosystems.www.authoring.stylesheets groups.


If tables are no good these days, I would love to learn how to get the same effect with CSS.I hope I covered that in my last post.


they want pop-ups like ALT text.That's a misconception born out of a browser bug (I forget whether it was IE or Netscape that first started it). Alt[ernative] text is just that; an alternative. It's only supposed to be rendered if the associated element can't be and then it should be a complete replacement, not an annotation. For example, a graph which shows sales trends should have alternative text which describes the trends, not "A diagram showing sales trends for the first quarter of 2004" (or whatever).


I don't believe ALT text works with linksIf you want to annotate an element with a tooltip, use the title (http://www.w3.org/TR/html4/struct/global.html#h-7.4.3) attribute. Virtually every HTML element can have one including links and images. In fact, it's quicker to list those elements that can't have one: base, basefont, head, html, meta, param, script, title.

Mike


[1] The align attribute is allowed on the child/descendant elements of a table (col, tbody, tr, etc) but not on table elements themselves, or other elements like div.

pcvoyage
01-03-2005, 02:30 PM
"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), "
PLease post a link to a web page that complies with this. (CSS, DTD[1], etc. so that I might see the difference. Thanks for your interest and critique

pcvoyage
01-03-2005, 03:13 PM
It's obvious that I have a lot of reading to do. Rather than bug you guys in a script forum, I will start with reading the 4.01 instrustions and begin to build sample pages and have that site validate as I go. What is confusing is that my obsolete code seems to be recognized by a lot of browsers and versions. If I eventually convert my web sites to meet 4.01, is it possible that older browser version will not display (as NS 4.7 doesn't seem to like CSS)? In other owrds, will more or fewer users successfully view a 4.01 page or my old stuff? Also, you imply that a day will come when old code will not display, and is that day sooner than later?

mwinter
01-03-2005, 06:18 PM
"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), "
PLease post a link to a web page that complies with this.I did! The example (http://www.mlwinter.pwp.blueyonder.co.uk/dd/pcvoyage/allied-health.html) I prepared two days ago replicates the layout of the page you posted using semantic mark-up, a Strict DOCTYPE, and CSS. All that's really missing is colour.


DTD[1]The [1] indicated a footnote in the post. It has nothing to do with the acronym itself.


If I eventually convert my web sites to meet 4.01,Every HTML document written after 1999 should meet version 4.01 of the HTML specification irrespective of the DOCTYPE used.


is it possible that older browser version will not displayYour content (which is what's important) will always be rendered as long as you use sensible mark-up...


(as NS 4.7 doesn't seem to like CSS)?...but some ancient browsers won't do much more than respect colour (and perhaps some positioning) information from your style sheet. However, the browsers I'm referring to (like NN4) are thoroughly obsolete and unless a significant proportion of your visitors use that browser you really shouldn't worry. As I said, they'll still be able to read the site, it just won't look the same[1].


Also, you imply that a day will come when old code will not displayNo I didn't. There might be a time when presentational elements are obsoleted from the Specification, but I didn't imply that it will happen, nor did I imply any time scale.

Mike


[1] However, that's generally true. All browsers render documents differently - it's just something about the Web you have to accept.

pcvoyage
01-03-2005, 08:50 PM
Thanks for doing up your version of my page. (Sorry, I missed the post before I commented again). I really do appreciate the time you've taken - you are kind to respond. I'm reading 4.01 and will study the page you made. Happy New Year!

jscheuer1
03-10-2005, 08:02 AM
I'm sort of with Mike on this one, though he and I got into a bit of a debate over another issue. I do however, like the menu and think duplicate content of that type makes it more likely visitors will find what they are looking for. I don't worry too much about things lining up, as long as the page looks OK in both the major browsers, it can look different in each.

Mike, what would you think of a:

body {margin-top:16px;}

or whatever number of pixels the fellow wants - in the stylesheet or in the style section of the page? That way almost all browsers would put the top at the same place, more or less, assuming the page validates. That was another good point.

One thing you should take out of the page is:

<noscript>Your browser does not support script</noscript> (for folks who might not see it, I put his noscript tag here)

Instead you could use a short document.write script to put in the select.jpg for folks with script enabled and a noscript tag to insert a .jpg of the same height with the advice to use the back button to return. I would have used text to render that content though and style to line things up.

They don't need to know they are missing anything, what does show without script is good enough, not as spiffy but, good enough. I only use the noscript tag if there is somethng essential that will be missed without it. And then, only to render that content in an alternate way or to inform the visitor that sorry, they can't see the content without script enabled.

mwinter
03-10-2005, 03:49 PM
Mike, what would you think of a:

body {margin-top:16px;}If you're going to set margins, it's also a good idea to set the padding, too. Particularly with the body element. A user agent can choose to set either, or both, in its default style sheet. Opera, for example, sets the padding (to 10px, I think) for the body element rather than any margin.


That way almost all browsers would put the top at the same place, more or less, assuming the page validates.If you look at the example (http://www.mlwinter.pwp.blueyonder.co.uk/dd/pcvoyage/allied-health.html) I produced and compare IE, Firefox and Opera, the only appreciable difference (other than Opera's generic sans-serif font) is the space around the content. Opera is visually identical to Firefox in terms of layout though, as I mentioned, it has padding not margin.

So, to answer your earlier question, yes. Something that simple may be all that's required, which was the original point I was trying to make.

I won't comment on the script aspect. I've already done that.

Mike

jscheuer1
03-11-2005, 11:03 PM
That example page looks very nice, I like it without all the boxes and without the menu, looks more legible.