Solved

How to behave different base on browser type?

Posted on 2009-03-30
26
206 Views
Last Modified: 2013-11-19

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

0
Comment
Question by:akohan
  • 11
  • 8
  • 4
  • +1
26 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 24022142
You can do this in the <head> area and then keep the class the same

See:
http://www.quirksmode.org/css/condcom.html
0
 
LVL 16

Expert Comment

by:robinu
ID: 24022159
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
 
LVL 15

Accepted Solution

by:
Tomarse111 earned 125 total points
ID: 24022194
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
ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

 

Author Comment

by:akohan
ID: 24022217

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

Thanks,
ak
0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 24022268
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
 

Author Comment

by:akohan
ID: 24022397

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
 
LVL 15

Expert Comment

by:Tomarse111
ID: 24022502
seems ok but try the folloeing in your body tag. Instead of:

<body onload="a"">

Try

<body onload="a()">
0
 

Author Comment

by:akohan
ID: 24022527

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

Author Comment

by:akohan
ID: 24022550


Sorry my bad I found I was missing a closing brace in javascript!!
0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 24022595
Does it all work for you now?
0
 

Author Comment

by:akohan
ID: 24022617

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
 

Author Comment

by:akohan
ID: 24022658

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

0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 24022688
could you please post al your code so I can see this table of yours?

:)
0
 

Author Comment

by:akohan
ID: 24022750

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
 
LVL 16

Expert Comment

by:robinu
ID: 24023046
This code looks fine for me in IE7 and FF2.

What do you see in what browser?
0
 

Author Comment

by:akohan
ID: 24023517

IE7 and FF 3
0
 
LVL 16

Expert Comment

by:robinu
ID: 24025931
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
 
LVL 15

Expert Comment

by:Tomarse111
ID: 24026530
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
 

Author Comment

by:akohan
ID: 24030323

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
 
LVL 16

Assisted Solution

by:robinu
robinu earned 125 total points
ID: 24030628
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
 
LVL 15

Expert Comment

by:Tomarse111
ID: 24030692
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
 

Author Comment

by:akohan
ID: 24031911

Hello robinu,

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

Regards,
ak
0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 24084651
Akohan: Didn't you use my function and script to do this? If so point need to be shared.
0
 

Author Closing Comment

by:akohan
ID: 31564482

Thanks
0

Featured Post

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to reference objects of the calling class without passing them as parameters 29 177
Border and image sizing 5 20
Jquery keyup 4 20
JavaScript let vs var 5 27
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question