How to Create Browser-Specific HTML Code
If you’ve done any website design, you know how frustrating it is to create a beautiful page in one browser, only to have it completely fall apart the moment you access the page from a different browser. The least user-friendly browser has got to be Internet Explorer, although it has improved by leaps and bounds since versions 5 and 6.
Nearly 20 percent for site visitors are STILL using IE6. Why? I don’t know. But as website designers, if we can, it’s a good idea to bend our coding so that IE6 (and other) visitors can still access our site content.
If you find that an aspect of your site is “broken” in ALL versions of Internet Explorer, you can add browser-specific HTML coding that will target ONLY visitors using IE. The tags will only be visible to IE, and all other browsers will ignore it. Say, for example, that you have the following <div> item (an image with a top margin of 10 pixels):
How to Target ALL Versions of Internet Explorer
Perhaps in IE, the top margin is not as big as you’d like for it to be. So you could do the following:
<div style=”margin-top: 20px;”><img src=”images/picture.jpg”></div>
<![endif]--><!-- ENDS TARGET FOR IE BROWSERS -->
<!-- THIS IS YOUR ORIGINAL LINE OF CODE, WHICH YOU STILL NEED FOR NON-IE BROWSERS -->
<div style=”margin-top: 10px;”><img src=”images/picture.jpg”></div>
<!-- ENDS ORIGINAL LINE OF CODE -->
How to Target Everything EXCEPT Internet Explorer
Now you’ve increased the margin to 20px, but only for IE. To make sure that IE doesn’t read BOTH entries, thereby displaying the div/image twice, you’ll need to add another statement that will make the second div/image tag only visible to NON-IE browsers:
<div style=”margin-top: 20px;”><img src=”images/picture.jpg”></div>
<![endif]--><!-- ENDS TARGET FOR IE BROWSERS -->
<!--[if !IE]><!--><!-- THIS TARGETS ALL BROWSERS EXCEPT FOR IE -->
<div style=”margin-top: 10px;”><img src=”images/picture.jpg”></div>
<!--<![endif]--><!--><!-- ENDS TARGET OF ALL BROWSERS EXCEPT IE -->
How to Target a Certain Version of Internet Explorer
What if Internet Explorer 7 and 8 display your code just fine, but when you look at the code with IE6, you notice problems? Here’s the code that will only target specific versions of IE. The example targets IE6, but you can change the numeral that follows “IE” to any version of IE that you wish to target:
<div style=”margin-top: 20px;”><img src=”images/picture.jpg”></div>
<![endif]--><!-- ENDS TARGET FOR IE6 BROWSERS -->
My name is Jamie Gough,
and I'm the owner and operator of Simple Site Guru. I became a website designer because
I know that there is a need for simple, straight-forward website design at an affordable price.
I also thoroughly enjoy doing website design because it combines two of my favorite things:
creativity and problem solving. My goal is to give you a website that reflects your
personality, and that communicates key aspects of your work and lifestyle to your site
visitors. If you'd like to have a conversation about your new website, call me at
(209) 418-7579 or use my quick
contact form.
4 Comments
Trackbacks/Pingbacks
- Download Niche PLR Articles - Valuable Resources... [...]check here, some totally unrelated websites to ours, however, they are most trustworthy sources that we use[...]...
Excellent! Very concise but detailed which is not an easy accomplishment. Thank you for sharing your knowledge about this subject.
Thanks! I hope it’s useful.
Many of blokes want to yammer on about progressive enhancement but in the corporate realm IE6 is still a major demographic. I know we all would like to see IE disappear but face it, its just not going to happen.
Wow, thanks for this article. My site has been rendering errors in certain versions of Internet Explorer (6 & 7) for months. Thanks!