Change style based on the browser being used

shaneH

I guess I'll keep it to the point. I am trying to use javascript to set a style position for a graphic when the user is using different browsers.

Here's the code I am using to try and figure out the problem (ie. testing code).

<html>
<head>

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

var bpos = document.getElementById("bpos");
if (navigator.appName=="Netscape") {
	bpos.style.left = "100px";
 }

</script>
<style type="text/css">
<!--
#bpos	{position: relative; left: 0px;}
-->
</style>

</head>
<body>
<div id="bpos">test</div>
</body>
</html>

I could also code it this way (below) but the above technique, I think, will work best for some other functionallity I may wish to add.

if (navigator.appName=="Netscape") {
	document.getElementById("bpos").style.left = "100px";
 }

The books I am using and some sites I have looked at all seem to indicate this should work. I figure I am just overlooking something simple and a fresh pair of eyes might see a mistake I didn't.

Oh, I guess I should also mention the error I am getting

Line: 8
Char: 2
Error: Object required
Code: 0

NogDog

Since we're at PHPBuilder.com, have you considered doing this server-side instead of client-side, using [FONT="Courier New"]$SERVER['HTTP_USER_AGENT'][/FONT] in some PHP code to implement this?

<style type="text/css">
<!--
#bpos	{
   position: relative; 
   left: <?php
echo (stristr($_SERVER['HTTP_USER_AGENT'], 'Netscape')) !== FALSE) ? 100 : 0;
?>px;
}
-->
</style>

JPnyc

You shouldn't need scripting for this at all. Most of the time, all gecko browsers, and Opera, will show it exactly the same. IE is usually the only odd one out, so this can be done entirely with CSS either using the !important hack, or IE's proprietary testing method, which even allows you to test for version.

http://www.quirksmode.org/css/condcom.html here's a tutorial on it

shaneH

NogDog wrote:
Since we're at PHPBuilder.com, have you considered doing this server-side instead of client-side, using [FONT="Courier New"]$_SERVER['HTTP_USER_AGENT'][/FONT] in some PHP code to implement this?

I was affaid that would come up and yes that would be the easy way. As my original post was of some length I left out the story behind it.

If it can be don't with PHP I can do it and I learned how to do most of that from here (phpbuilder.com). Unfortunately, some friends of mine without first consulting me went and purchased a site for the guild they run in a MMORPG game. Let's put it this way the guy who designed it can do insane things as far as the background functionallity. But when it comes to appearance, user friendliness, and costumizability it is a nightmare. I have told every designer I know, that this site has all of the top 10 "do not do's" of web design and he added 5 more.

For example: Several parts of the site are dynamically included, do you think he would use a standard php include, not on his life. The code is parsed, I suspect using javascripts (don't let the .php file extentions fool you), for html comment tags (  ) to include various parts of the page. And to make matters worse he refuses to let anyone use anything outside of HTML and CSS to make changes. But fortunately for the savvy web designer javascript is also available. The worst part of the site is his forums, take for example the forums we are using here. They are very easy to navigate and sort through. But his forums found at http://www.dkpsystem.com/forum.php are horrible if you do not select the category or categoies you want to see you just see all the posts at once. And he thinks they're the forums of the future and will not allow anyone to change them.

After several heated exchanges with him in his forums I am resorting to a more knowlegdeable group for getting this done ( everyone here ). I think for the most part I can hard code, or use javascript to strip apart his code and make a very nice user friendly site.

JPnyc wrote:
You shouldn't need scripting for this at all. Most of the time, all gecko browsers, and Opera, will show it exactly the same. IE is usually the only odd one out, so this can be done entirely with CSS either using the !important hack, or IE's proprietary testing method, which even allows you to test for version.

http://www.quirksmode.org/css/condcom.html here's a tutorial on it

You are right about the browsers, the code I gave above is testing code, I use Firefox for my browser so it was trying to get the code to work there first and then I would modify it to work with IE.

Thanks for the link. I had heard about this but as most of my work is in content managment systems I usually don't deal with how thing look to any major extent. I will take a look and hopefully it will solve my problems.

shaneH

JPnyc, that link was great, it had a quick and simple explanation of how it all worked, wish other tutorials I have used in the past were that simple.

I should also say part of my trouble with my positioning was a missing ":" but I have already found several ways that I will be using what you gave me.

Thx

JPnyc

By the way, it might be simpler if we're talking about just one parameter, to use the !important hack. IE6 does not understand that keyword (not sure about 7) but every other browser does. So you code the value twice, like this:

margin-left:10px !important; margin-left:20px; IE6 will use the last value but gecko and opera will use the 1st