Check Browser

[arvind]

Is there a script that checks the users browser and then if its a certain browser shows them a diferent page. What I mean is if you check my blog, it will display incorrectly on the default skin on any IE that's lower than 6. What I need it to do is check the browser and if its lower than IE 6 show them a page with a different skin !

[DarqFlare]

There's a javascript to do it, but I'm none too sure of what it is...

 

Try searching on Google for something like "javascript browser check", or "javascript browser variables."

[borfast]

A better search phrase would be "javascript browser detection" - that's how those scripts are known.

 

Also, a little tip: if you rely on JavaScript, the browser detection may fail, because the user may have JavaScript disabled. I'd go with PHP instead - since it runs on the server, you know you can always count on it.

 

Unfortunately, a good browser detection PHP script is a hard thing to find. I had a hard time myself finding one a couple of months ago but I did find one which is really good. Here's the link:

www.apptools.com/phptools/browser/

Edited January 16, 2004 by TCH-Raul

[DarqFlare]

I thought PHP couldn't detect what browser was viewing it? I'll go back and check through www.php.net's global variables again, maybe I missed it.

 

Yeah, detection would probably be a better word. I was having a difficult time figuring out what search phrases to suggest.

 

I think I'll go check out that page you suggested as well.

[borfast]

You can access the user agent version through $_SERVER['HTTP_USER_AGENT']

Check out that script I mentioned, it's pretty good!

[vangrieg]

Is there a script that checks the users browser and then if its a certain browser shows them a diferent page. What I mean is if you check my blog, it will display incorrectly on the default skin on any IE that's lower than 6. What I need it to do is check the browser and if its lower than IE 6 show them a page with a different skin !

There's a much better way to solve your problem described here, for example.

 

Browser detection should be avoided, IMO, whenever possible. First of all, it's not that easy to detect all browsers. Second, you may run into problems with new versions. Third, people who access you site from, say, a smartphone may have a browser your script doesn't know.

 

Write standards-compliant pages, use hacks for outdated IE5-, and you should be fine.

[borfast]

Hey that's nice!! That's really nice! I really can't believe that MS has something for the web that is both good and works on all .... err... wait... oops...

This feature requires Microsoft® Internet Explorer 5 or later.

I guess Microsoft is still the same, after all...

[borfast]

I forgot to mention: I agree with vangrieg about avoiding browser detection and being better to write standards compliant web pages.

 

If you want an awsome book about this subject, get a copy of "Designing With Web Standards", by Jeffrey Zeldman. I bought it a couple of months ago and just finished reading it for the second time. It's absolutely brilliant.

[vangrieg]

.... err... wait... oops...

This feature requires Microsoft® Internet Explorer 5 or later.

True, but look: you can set some code for IE5+, for example, lower versions will just ignore it because it's inside the comment tags!

[arvind]

wow thanks for all the answers ! lol this is where my problem gets harder. Rather than people having and IE lower than 6 getting a msg box telling them to change the skin (as from what I can figure out from the msdn page - thanks for the link) I it to automatically change the skin.

 

I can use the if command which works great but I just wanna know how to redirect them to change the skin all they need to do to change the skin is goto a specific page and it does it automatically. Could some 1 help ! BTW thanks a lot everyone this is a great help !

[borfast]

you can set some code for IE5+, for example, lower versions will just ignore it because it's inside the comment tags!

Then what's the use, if every single browser other than IE 5+ will simply ignore it? Don't you want to show your web site to eveyone who visits it? Then why do you close your eyes to the tons of people who will visit your site with a browser other than IE? Is your mind so closed, are your eyes so blind that you really think everyone has the same opinions about which software they want to use? Don't you think people are free to chose whatever browser they want to use?

 

By the way, when you said "lower versions", it reminded me of the first thing I noticed on that MSDN page, the typical MS mentality: IE5+ is their "uplevel" browser; anything other than that is a "downlevel" browser.

"Our browser is the upper level, all the others are the lower lever. We are good. All others... wait, what others?"

Duh... This is something that always ticked me off about MS. They think of themselves as the center of the universe and simply don't care about the rest! One of the strongest reasons that made me move away from the M$/Windows world...

 

Arvind, IMHO you should stick with the PHP detection script. You know it will work, regardless of the browser your visitors use and even if their JavaScript is turned off. Tell me exactly what you want to do and I'll be glad to show you the code to do it.

Edited January 17, 2004 by TCH-Raul

[vangrieg]

Ouch. I remind somebody of Microsoft. That hurts. No, you got me all wrong. The author of the thread was asking about distinguishing between IE versions, and I answered that question. I also said that browser detection should be avoided.

 

If I were him, I would rather edit the skin than detect browsers. Most probably it's CSS, which causes problems in old IE. There are tons of workarounds available.

[arvind]

yes well i've tried and this is the css I'm using :

>body {
margin: 0px 0px 20px 0px;
background-color: #4B4633;
       	text-align: center;
       
}

.offsite {
   padding-right: 9px;
   background: url(http://www.arvind-satya.com/images/outside.gif) no-repeat right; 
   color: darkgreen;
}

a {

text-decoration:none;

}

a:link {
color: #CCCCCC;
}

a:visited {
color: #CCCCCC;
}

a:active {
color: #CCCCCC;
}

a:hover {
color: #FF9900;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

#container {
 margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 700px;

background-color: #6F6F4F;
border: 1px solid #FFFFFF;
}

#banner {
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color: #5F5944;

text-align: left;
padding: 15px;
border-bottom: 1px solid #FFFFFF;
height: 39px;
}

#banner a {
color: #FFFFFF;
text-decoration: none;
}

#banner h1 {
font-size: x-large;
font-weight: bold;      
   


}

#banner h2 {
font-size: small;

}

#left {
 float: left;


width: 200px;
background-color: #6F6F4F;

overflow: hidden;
}

#center {
 float: left;
width: 500px;


}

.content {
padding: 15px 15px 5px 15px;
background-color: #6F6F4F;

color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: small;
}

.sidebar {
padding: 15px;
}



.content p {
color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: small;
font-weight: normal;
 	line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

.content blockquote {
 	line-height: 150%;
               background-color: #4B4631;
               border:1px dotted #999;
        margin: 5px;
               color:#999;
               font-family:verdana, arial, sans-serif;
               font-size:x-small;
               padding:5px;
       	}

.content li {
 	line-height: 150%;
}

.content h2 {
color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: x-small;
border: 1px solid #999999;
text-align: left;
font-weight: bold;


margin-bottom: 10px;
padding: 3px;
}

.content h3 {
color: #D0B254;
font-family: Arial, sans-serif;
font-size: medium;

text-align: left;
font-weight: bold;


margin-bottom: 10px;

}

.content p.posted {
color: #CCCCCC;
font-family: Arial, sans-serif;
font-size: x-small;

text-align: left;



margin-bottom: 25px;
line-height: normal;

}

#calendar {
 	line-height: 140%;
color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: x-small;



 	padding: 2px;
text-align: center;
margin-bottom: 30px;
}

#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}

#calendar caption {
color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: x-small;
border: 1px solid #999999;
text-align: center;
font-weight: bold;


padding: 3px;
letter-spacing: .3em;
}

#calendar th {
text-align: center;
font-weight: normal;
}

#calendar td {
text-align: center;
}

.sidebar h2 {
color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: x-small;
border: 1px solid #999999;
text-align: center;
font-weight: bold;


padding: 3px;
letter-spacing: .3em;
}

.sidebar ul {
padding-left: 0px;
margin: 0px;
margin-bottom: 30px;
}

.sidebar li {
color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: x-small;
text-align: left;
line-height: 150%;



margin-top: 10px;
list-style-type: none;
}

.sidebar img {
border: 0px solid #999999;
}

.photo {
text-align: left;
margin-bottom: 20px;
}

.link-note {
font-family: verdana,arial,helvetica;
font-size: x-small;
line-height: 150%;
text-align: left;
padding: 2px;
margin-bottom: 15px;
color: #E9F7DD;
}

#powered {
font-family: Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
color: #FFFFFF;
margin-top: 50px;
}

#comment-data {
float: left;
width: 180px;
padding-right: 15px;
margin-right: 15px;
text-align: left;
border-right: 1px dotted #BBB;
}

 

If you use IE 6.0+ Mozilla, Opera anything that's not IE5 etc. it looks fine. But using a version thats ie5 ish all the posts on my blog go rite to the bottom and the sidebar doesn't function properly. The calendar looks weird. Basically loads of problems. Use something that's lower than IE6.0 and you'll see what happens !

[vangrieg]

It's hard to say anything without seeing the HTML code. But most probably it's the box model problem if the layout breaks in IE5-.

 

Here's the deal. IE5- browsers for Windows (Mac versions are unaffected) have a buggy implementation of CSS box model. If you have an element with width, padding and border specified with CSS, IE5- will include padding and border in the width, which is wrong.

 

The most popular workaround is this. IE5 for Windows luckily has another bug in parsing CSS files. If it meets two rules defining the same property it ignores the last one, and shows the first one. That is, if you have

 

width: 50px;

width: 40px;

padding: 10px;

 

IE5/Win will work with the first width declaration, unlike every other browser! Which means that your box will look the same everywhere, because all other browsers will obey the last width declaration, and you get a 40px box with 10px padding everywhere.

[borfast]

You are absolutely right, vangrieg. My appologies for my previous words, they were too harsh, even if you would have said what I thought you did - I was a bit upset with something that has got nothing to do with this but I ended up venting out on that post

Once again, I'm sorry.

 

Just one thing: I didn't mean that you reminded me of MS. It were the words "lower version" that reminded me of what I had read on that MSDN page. I wasn't saying that it was your type of mentality as well.

 

Anyway, once again, I'm sorry. Didn't want to offend you.

 

Arvind, forget what I said, if it's only IE you're looking for, then that code would work. But I do agree with vangrieg in that you should fix the skin instead of sniffing the browser.

Here's the original box-model hack invented by Tantek Çelik:

http://tantek.com/CSS/Examples/boxmodelhack.html

Edited January 17, 2004 by TCH-Raul