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):
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 -->
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 -->
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 -->
8 Responses to “Creating Browser-Specific HTML Code”
Leave a Reply
Simple Site Guru’s Social Networks
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.