Alternate image for alternate browser?

[TeviH]

Hello,

I built a website using a png with transparency. It looks great on all the newer browsers, and even some of the old ones - except for IE6 which is still not very old. It does not show 8-bit transparency.

So, the question is, can I set it -- using css -- to not show the image for certain browsers? Or to show an alternate, instead?

 

[Barrucadu]

The best you can do is make a transparent gif, check the browser with PHP, and then display the correct image accordingly.

 

[Matthew.]

The best you can do is make a transparent gif, check the browser with PHP, and then display the correct image accordingly.

Another idea (using css as requested) would be to use conditional comments.

Example:

<style type="text/css">
div#image { background: white url( image.gif ) no-repeat }
</style> <!-- Code for all browsers -->

<!--[if IE 6]>
  <style type="text/css">
  div#image { background: white url( imageIE6.gif ) no-repeat }
  </style> <!-- Code for IE6 only -->
<![endif]-->

<div id="image"></div>

That will need adjusting to make it actually work (i.e. container dimensions) however that's the theory of it.

Unfortunately for us, since conditional comments are an IE onyl feature there is no "else" equivalent.

This can be done much easier with php however as Mikor says, for example:

<?php
$browser = strlower( $_SERVER['HTTP_USER_AGENT'] );
$image = 'image.gif';

if(strpos($browser, 'msie')) // only actually checking for IE not IE6
{
    $image = 'imageIE6.gif';
}

// $image = (strpos($browser, 'msie')) ? 'imageIE6.gif' : $image;
?>

<img src="<?=$image?>" alt="image" border="0" />

Matt

 

[TeviH]

Thanks guys! Is it a problem if it's a conditional element for IE only, since I only need to replace it for IE? Matthew's solution looked ultra-simple, and would really work, I think. I would just do the style for that particular div, and leave out the background-image.

Basically, I just want to make sure IE 6 and 5 use the correct image - or, rather, none at all.

So- why is it easier to use php than css?

Hmm... I guess I did something wrong. I tried Matthew's suggestion, and it didn't work.

This was the css from the original style sheet:

body {
text-align: center;
background-image:  url(../images/trans-grad-bg01.png);
background-repeat: repeat-y;
background-position: center;
margin: 0;
padding: 0px;
}

And this what I inserted in the HEAD of the HTML document:

<!--[if IE 6]>
<style type="text/css">
body {
text-align: center;
background-image:  url(../images/trans-grad-bg01.png);
background-repeat: repeat-y;
background-position: center;
margin: 0;
padding: 0px;
}
  </style> <!-- Code for IE6 only -->
<![endif]-->

I checked out the results in browsercam, and apparently it didn't work.

Help?

btw - The website in question is the one in my sig

 

[Matthew.]

Well, with the css & conditional comments method we are using a layer (div) with a background as opposed to a standard image, and then actually modifying the stylesheet again to change the image, all of that is server side.

In my mind it's easier to pre-process the image which we are going to use, as that way you use the standard img tag etc etc (i wont write anymore as i have just seen your problem you edited in and the way you are using this actually makes it easier to use CSS)

Anyway, as for the problem. You don't seem to have the code in place on the live version?

Make sure it's after you link to the stylesheet.

Matt

 

[cef]

As an aside, if you keep making changes to your stylesheet but they don't seem to "take", make sure you're not using a browser-cached version of the stylesheet. This drives me nuts. Just the kind of thing that can have you scratching your head at 3 in the morning wondering why something that SHOULD work doesn't.

 

[Barrucadu]

make sure you're not using a browser-cached version of the stylesheet.

To combat that, I just turn off ALL browser caching (even images, browser cache can be terrible with php-generated images you are trying to fix)

 

[Matthew.]

Good old F5/CTRL+F5....heh.

Matt

 

[TeviH]

Oh jeez, I HATE it when I end up with a problem based on cached files...

I have a live version of the file here: http://headlinercreative.com/testing/

The conditional if is being called after the style sheet...

Since I am using a background image on the body of the page, rather than a div with an img, what would be the easiest route?

 

[TeviH]

I think it was working after all! Apparently, a computer is registered by the conditional comments as being the latest version of IE installed on a system, regardless of the IE version being used at the moment! Was able to check it on a computer with an older version of IE, and it worked perfectly!!

Thanks guys!

p.s. - do you agree that only offering alternate styles for IE 5, 5.5, and 6 are enough? That any other browsers that don't yet support png are miniscule (or probably not my future client??)??

Thanks again for your help!

 

[cef]

I'm surprised you're still even bothering with 5 and 5.5

I think you're more than covered.

 

[TeviH]

heheh... I'm just trying to make it accessible.

btw, comments about the website? I know this isn't the critique forum, but just like some general opinions.

 

[cef]

Site looks awesome. Easy to use, easy to read, nice to look at. Really great.

Works fine on the Mac in Safari, Camino, Firefox and Opera. Passes the w3c html validator (4.01 transitional??? ok, we'll cut you some slack because you are 100% tableless ), only one minor snag on the css validator:

URI : http://www.headlinercreative.com/styles/brown-styles.css
43 #top_nav Value Error : top only 0 can be a length. You must put an unit after your number : 188

 

[TeviH]

thanks cef!!

Fixed the error

...erm, what's html 4 "transitional", and why is it bad?

 

[cef]

every (good) html document has a DOCTYPE definition. This definition give the browser some hints as to how it should interpret and display the content.

a document can be either html or xhtml. An html document is more "forgiving" in terms of syntax. Uppercase tag names, unclosed tags, all are ok. Browsers take great liberties when interpreting html doctypes, making it possible for them to display even poorly-crafted html exactly the way the coder intended. By way of example, in html, <BR> is a perfectly acceptable way to define a hard break in html.

xhtml documents adhere to xml standards, and so come with a few requirements: for example, lowercase tag names and fully-closed tags are required. The way you specify <BR> in xhtml is <br />

It's fairly easy (if not sometimes tedious) to convert html to xhtml, and it's well worth doing. The main benefit of using xhtml is that it is more consistently parsed across different browsers and different platforms. This makes it easier to develop pages that will display well in any browser on any OS on any platform (mind you, this isn't always the case in practice, but it's far better with xhtml than html).

As an adjunct to the x/html specification you must specify a "strictness" as to how the data is to be interpreted. The three levels for this are "transitional," "strict," and "frameset".

"Frameset" means your page uses frames. "Strict" means that your page adheres to the strict definition of the x/html version you are using. Strict is often overkill and impractical. For example, you cannot use _target or iframes in strict (the w3c recommends using Javascript). Some over-the-top purists insist on always using xhtml 1.0 strict because it seems "cooler" to do this, but in truth I use it when possible, and don't try to turn my site on its ear just to get rid of the odd iframe or _target.

The compromise to "strict" is "transitional", which allows a slightly more lax mix of code and presentation, including _target and iframes.

When in doubt, go for xhtml 1.0 transitional, but regardless of doctype, it's far more important to have your page pass the validation suite at the w3c to show that it contains well-formed, error-free syntax.

And your page passes.

 

[Christopher Hunt]

Hey, TevH,

nice site! you mention on it you have done some simple CMS for your clients ... what do you use?

thanks!

 

[TeviH]

the best ultra-cheap and fully-rebrandable thing I've found is WebEdit by interspire. http://www.interspire.com/webedit/

They also have another system if you prefer which might be better for a web developer who has many clients: http://www.interspire.com/sitecenter/

WebEdit is basically just a simple file manager with a WYSIWYG editor. You can lock out regions using Dreamweaver Template Comments so they can't be changed accidentally.

SiteCenter is better than WebEdit in that you can use it for all your websites, and different site owners can log in using a specific username and password. They simply browse to the page they want to change, and click "edit".

Both are installed on your server and the user can login online. You can even create templates so the user can create new files. And both are fully rebrandable,with complete user guides and manuals to give to your clients. Their customer service is pretty good, too.

I recommend Macromedia (Adobe) Contribute, if only one person will be making changes from one specific computer.

thanks for the explanation, CEF! I will try to go in make the changes to proper xhtml

Thanks for all your help guys!

 

[TeviH]

p.s. - I made the changes to make it XHTML validated :wave:

 

[cef]

Awesome! You're on the way to becoming an xhtml snob like the rest of us :lol: