Using <comment> tag to reverse IE conditional comments

I want an image to be used in IE, but a different one to be used in other browsers. I can get the IE image to display only in IE by using conditional comments. I can also get the non IE image not to display in IE by using the non-standard <comment> tag.
The problem with this is that it makes my HTML invalid. My solution was to enclose the <comment> tag and its corresponding </comment> in conditional comments, so that Firefox et al ignored it, making the page valid once again.
The idea seems sound to me, but sadly the closing </comment> does not work in a conditional comment. Probably because IE is waiting for the closing comment before it evaluates the condition. My code is below. Any solutions to this?


<!--[if IE]>
  <img src="img/IEImage.jpg" alt="This image should be displayed only in IE">
  <img src="img/OtherImage.png" alt="This image should never be displayed in IE">
<!--[if IE]>

Open in new window

LVL 10
Who is Participating?
ollyatstithiansConnect With a Mentor Author Commented:
So with a lot of fiddling I have found a way to do conditional comments to be ignored by IE but not other browsers that actually validates.
Essentially you need to close the comment and re-open it either side of the IE ignored code.
<!--[if !IE]>-->
  <p>This will be rendered by non-IE5+ browsers. The conditional comments will appear as 
    HTML comments to the validator and other browsers</p>

Open in new window

ollyatstithiansAuthor Commented:
BTW I am looking for a way to choose one image over another in an <img> tag. I am aware I can use CSS as a workaround.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.