Simple browser detect then change visibility of a layer

[W8 4me]

Hi all,

I am using CSS text-shadow but of course IE doesn't like it. I've looked into some methods for achieving the same effect in IE, but it's not at all the same so I've opted for another method...

I'm going to have two layers. In layer1, it will be standard text, shadowed with CSS. I then screenshotted that and will use the resulting jpeg for layer2.

I was then planning to find a script that:

1. Detects if browser is IE
2. If IE, layer2 is visible, layer1 is invisible
3. If not IE, layer1 is visible, layer2 is invisible

The problem is that I can't find a simple script to detect if the browser's IE or not. I can find loads of scripts that check what version of IE someone's using. The version isn't important!

I'll have another look tomorrow (bed time now) but can you point me in the right direction?

thanks guys

[DracoMerest]

Simple... very simple; but maybe not the best.

<div id="ieonly" style="display:none;">You Fail</div>
<div id="others" style="display:none;">very good</div>
<script language="javascript">
which="others";
if(document.all)
 which="ieonly";
document.getElementById(which).style.display="block";
</script>

Otherwise, read up on attributes of the bowser available to JavaScript:

http://www.w3schools.com/js/js_browser.asp

[DracoMerest]

Additional:

IE9 does not support document.all but there is a workaround. However, MS specify that
below is the best way to detect what browser is being used:

if (window.navigator.appName == "Microsoft Internet Explorer")

But this requires another check for version number.

IE9 will let you emulate IE7 with this:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

However, all this technicality is probably pointless because the aim of the exercise is to
determine if the browser is an IE style. If IE9 is HTML5 compliant and does not support
document.all, then that's all you need; probably. Since IE9 does not support document.all
you have been able to determine if the browser is complaint to standards.

http://msdn.microsoft.com/en-us/libr...8VS.85%29.aspx

[W8 4me]

Ok thanks guys. I've tried this

<script type="text/javascript">
if (window.navigator.appName == "Microsoft Internet Explorer") { 
document.getElementById(showie).style.display="block"; 
document.getElementById(showother).style.display="none"; 
}
</script> 
<style type="text/css">
#showie { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 400px; 
height: 400px; 
background-color: yellow; 
}
#showother { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 400px; 
height: 400px; 
background-color: red; 
}
</style>

But it doesn't work.

Theoretically this should work instead?... but it doesn't

<style type="text/css">
<!--[if IE]>
#showie { 
visibility: visible; 
}
#showother { 
visibility: hidden; 
}
<![endif]-->
#showie { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 400px; 
height: 400px; 
background-color: yellow; 
}
#showother { 
visibility: visible; 
position: absolute; 
top: 0px; 
left: 0px; 
width: 400px; 
height: 400px; 
background-color: red; 
}
</style>

I'm going to carry on trying to cram javascript into my head and hopefully I'll overcome this bloody thing in time something so simple...

[W8 4me]

I've got it. I can't use...

<!--[if IE]>...<![endif]-->

...inside a style sheet.

So I resolved it by setting #showother to z-index: 0 and #showie to z-index: 1 and then:

<!--[if IE]>
<div id="showie">Internet Explorer</div>
<![endif]-->
<div id="showother">Other browser........</div>

booya

[DracoMerest]

Yes, that's it. I was most of the way through my explanation below when you posted
your discovery. Here it is anyway.

Ah, I see what you want. You've almost got it but have the implementation wrong.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

The above is the most common way to use the conditional HTML.

Your first example attempts to hide something which is already hidden; or actually does
not even have a display method. Regardless of your efforts the declarations are still
there.

The second example attempts to execute some conditional HTML inside a Style
declaration. This won't work because the conditional HTML is not executed inside the
style /style tags.

Try this (I mean try because I could not be bothered to drag out different browsers to
try myself.

<!--[if IE]>
<style type="text/css">
#ieStyle { height:200px; 
}
</style>
<![endif]-->