Content dependant on browser

[Grantmitch1]

Okay, Well I am developing a website for a friend, but the style relies on PNG images for there transparency and greater picture quality. I have tied GIF but the quality was poor.

The problem is older browsers of Internet Explorer do not like PNG images, and thus, the transparency is ignored, making the site look rediculous.

Now I have a simple piece of code to say to Internet Explorer users to make sure they have the latest update.

<fieldset style="border:1px dashed #FF0000; padding:2px; ">
<legend align="center"><font color="#FFFFFF" size="2">
<span style="background-color: #000000">Internet Explorer Users</span></font></legend>
<font size="2" color="#FFFFFF">Please note: If you are using an outdated version 
of internet explorer your browser may not show the images correctly. In 
order to prevent this please download the latest version of Microsoft 
Internet Explorer:</font><font size="2"> </font>
<a href="http://www.microsoft.com/downloads/details.aspx?FamilyId=9AE91EBE-3385-447C-8A30-081805B2F90B&displaylang=en">
<font size="2">Click Here for the latest release</font></a></fieldset></form>

Now, I only want that code shown to Internet Explorer users, I dont want Fire Fox, or Opera users to be able to see that.

Now I have used these tags before to prevent Style Sheets from being viewed by Internet Explorer, so I tried them with this content:

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

But obviously I failed to work. As you can tell im an amatuer, but any help will be appreciated.

[MidiMagic]

That is nonstandard code that works in IE, but not other browsers. So of course, the other bowsers ignore the codes.

Why not just use more compatible images.

If you won't do that, put a short disclaimer in the alt= part of the image tag. Then it displays only if the image can't.

[Grantmitch1]

The image is very important to the design of the site. There are four images in total which form its appearance.

The code does show up on Opera, Fire Fox etc. I have tested myself. I cant seem to hide it from the browsers though.

[buddylee17]

Use javascript:

<script type="text/javascript">
if (navigator.appName == "Microsoft Internet Explorer") 
{
document.write('If you are using an outdated version of internet explorer your browser may not show the images correctly. In order to prevent this please download the latest version of Microsoft Internet Explorer:<a href="http://www.microsoft.com/downloads/details.aspx?FamilyId=9AE91EBE-3385-447C-8A30-081805B2F90B&displaylang=en"><font size="2">  Click Here for the latest release</font></a>');
}
</script>

[MidiMagic]

People are not going to upgrade their browsers just to see your page, especially if that means they have to buy new computers.

The alt attribute in the img tag doesn't display unless the image can't. It is an ideal way to tell the user to upgrade if he can.

[MidiMagic]

The code does show up on Opera, Fire Fox etc. I have tested myself. I cant seem to hide it from the browsers though.

There are no html codes that hide code or text that work on all browsers. The code you are trying to use works on Internet Explorer, but it is seen as plain text on all other browsers.

The hard way is to write a javascript program to write special text onto a page.

An easier way is to have javascript hide or show a tag pair containing the text, by changing the active style for that tag.

The easiest way is to use the alt attribute of the image tag to display text when the image can not be displayed by the browser. You could even add a tiny fifth image that is invisible against (matches) the background if the browser can show it, but displays the text if the browser can't display that kind of image

Example:

<img src="blah.png" alt="Upgrade your browser to display images." />

[Grantmitch1]

Use javascript:

<script type="text/javascript">
if (navigator.appName == "Microsoft Internet Explorer") 
{
document.write('If you are using an outdated version of internet explorer your browser may not show the images correctly. In order to prevent this please download the latest version of Microsoft Internet Explorer:<a href="http://www.microsoft.com/downloads/details.aspx?FamilyId=9AE91EBE-3385-447C-8A30-081805B2F90B&displaylang=en"><font size="2">  Click Here for the latest release</font></a>');
}
</script>

hhahaha excellent. It works, there is only one problem. Can you add a colour to it. Make the text white please. I tried using my CSS code for it, didnt work.

[Grantmitch1]

There are no html codes that hide code or text that work on all browsers. The code you are trying to use works on Internet Explorer, but it is seen as plain text on all other browsers.

The hard way is to write a javascript program to write special text onto a page.

An easier way is to have javascript hide or show a tag pair containing the text, by changing the active style for that tag.

The easiest way is to use the alt attribute of the image tag to display text when the image can not be displayed by the browser. You could even add a tiny fifth image that is invisible against (matches) the background if the browser can show it, but displays the text if the browser can't display that kind of image

Example:

<img src="blah.png" alt="Upgrade your browser to display images." />

I have nearly got the complete solution, The dude above wrote out the javascript for me...
Im quite ticked off I didnt think of that myself...

The problem with using alt images is the site will look absolutely rediculous. The CSS uses Images for the style...

[Grantmitch1]

Thank you buddylee17,

I have done the adjustments myself :D

Cheers people