How to behave different base on browser type?


Hello group,

I need to call a different class (CSS) base on type of visitor's browser. How can I do that?




Regards,
ak

This is the case:
 
if it is IE:
<img  class="align_img_ie" src="img/start.jpg" alt="Welcome" width="850" height="600" border="0"/>
 
if it is FF:
<img  class="align_img_ff" src="img/start.jpg" alt="Welcome" width="850" height="600" border="0"/>

Open in new window

akohanAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Tomarse111Connect With a Mentor Commented:
or do it through JS via something like:
<img  class="align_img_ie"  id="browserImg" src="img/start.jpg" alt="Welcome" width="850" height="600" border="0"/>
 
<script type="text/javascript">
	if(navigator.appName.indexOf('Internet Explorer')<0){		document.getElementById('browserImg').className='align_img_ff'
	} 
</script> 

Open in new window

0
 
level9wizardCommented:
You can do this in the <head> area and then keep the class the same

See:
http://www.quirksmode.org/css/condcom.html
0
 
RobinSoftware EngineerCommented:
You can use conditional css (see also http://www.quirksmode.org/css/condcom.html)

Use the same class name (e.g. align_img), and define them different for each browser.
<style>
.align_img {
  border:1px solid #f00;
}
</style>
<!--[if IE]>
<style>
.align_img {
  border:1px dotted #00f;
}
</style>
<![endif]-->

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
akohanAuthor Commented:

Is the applied to FF and Safari as well?
how can I do this in Javascript?

Thanks,
ak
0
 
Tomarse111Commented:
The above script simply looks through the navigator.appName. and see if it is NOT internet explorer. If its not then it changes the class to the FF one. This could be mod'ed to cater for individual classes for IE, FF, Safari etc etc
0
 
akohanAuthor Commented:

Hi Tom,

I didn't see your solution sorry! my question was for Robin. But now that I see it my questions is I'm doing such a thing but not getting any output the way I am expecting. Or maybe I'm doing something wrong since I'm learning it.

any idea?

Regards,
ak




In the header:
 
  function a()
  {
        if(navigator.appName.indexOf('Internet Explorer')<0){
		    document.getElementById('browserImg').className='align_img_ff'
  } 
 
In the body:
 
<body onload="a"">
<br/>
   
<img class="align_img_ie"  id="browserImg" src="img/start.jpg" alt="Welcome" width="850" height="600" border="0"/>
 
 
</body>

Open in new window

0
 
Tomarse111Commented:
seems ok but try the folloeing in your body tag. Instead of:

<body onload="a"">

Try

<body onload="a()">
0
 
akohanAuthor Commented:

Yes I did notice that but not changes in output!
0
 
akohanAuthor Commented:


Sorry my bad I found I was missing a closing brace in javascript!!
0
 
Tomarse111Commented:
Does it all work for you now?
0
 
akohanAuthor Commented:

yes but only one of them is visible! it seems table covers the image. function is called when the page is loaded but then table gets rendered and cover the image I guess.

Any comment on this?

Thanks.
0
 
akohanAuthor Commented:

On a second thought I"m confused since <img> is after table in the body. Why is this happening?

0
 
Tomarse111Commented:
could you please post al your code so I can see this table of yours?

:)
0
 
akohanAuthor Commented:

Sure, it is here. Thank you!



 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Welcome to my page - Home</title>
<style type="text/css">
 
.align_img_ff
{
   margin-left:287px;
}
 
.align_img_ie
{
   margin-left:275px;
}
 
 
</style>
 
 
<script type="text/javascript">
   
        function a()
		{
		
           if(navigator.appName.indexOf('Internet Explorer')<0)
		   {
		    document.getElementById('browserImg').className='align_img_ff';
		   } 
        } 
      
</script>
 
 
 
</head>
 
<body onload="a()">
<br/>
 
 
<table width="850" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
   <div  align="center" style="line-height:50px; height:50px; background-color:#640000; font-size:font-size:24px; font-family:Arial, Helvetica, sans-serif;">
      <p><font color='#ffffff'>WELCOME</font></p>
   </div>
 
</td>
</tr>
</table>
 
<div>
<img class="align_img_ie"  id="browserImg" src="img/start.jpg" alt="Welcome" width="850" height="600" border="0"/>
</div>
 
 
</body>
</html>

Open in new window

0
 
RobinSoftware EngineerCommented:
This code looks fine for me in IE7 and FF2.

What do you see in what browser?
0
 
akohanAuthor Commented:

IE7 and FF 3
0
 
RobinSoftware EngineerCommented:
Ok, in FF3 or IE7 I don't see the table covering the image.

Did you try resizing the browser and seeing the difference between the image and the table ? ..
0
 
Tomarse111Commented:
Akohan; I've tried the code as well in both FF3 and IE7 from the original code I gave you and your code above and both seem to work fine i.e. the classes are changing fine (seen through firebug on FF) and the dummy image I'm using works fine.

What exactly do you see? Is the image not showing? If so are you sure the path is correct for it?
0
 
akohanAuthor Commented:

Yes, I tried it in FF using Firebug showing align_img_ff class being used and in IE by checking out the source where is shows align_img_ie is used. However, when I right click on page in FF and check the source it shows align_img_ie is used!

Any idea?

Thanks,
ak
0
 
RobinConnect With a Mentor Software EngineerCommented:
You can test it with the following to be sure:

Firefox should have blue border and in IE a red one.
<style type="text/css">
.align_img_ff
{
   margin-left:287px;
   border:1px solid #00f;
}
 
.align_img_ie
{
   margin-left:275px;
   border:1px solid #f00;
}
</style>

Open in new window

0
 
Tomarse111Commented:
Akohan: The source will be misleading as it shows the code as it was when the page first rendered, not after the onLoad event was triggered. Firebug works differently, in the way it shows you "Live" rendering, so any JS HTML manipulation is shown within the inspect tool even after the page has loaded.

0
 
akohanAuthor Commented:

Hello robinu,

That was nice way to debugging in CSS! thanks for sharing it.

Regards,
ak
0
 
Tomarse111Commented:
Akohan: Didn't you use my function and script to do this? If so point need to be shared.
0
 
akohanAuthor Commented:

Thanks
0
All Courses

From novice to tech pro — start learning today.