Webmaster Secrets logo
The Curse of the Underlined Graphic

By Brett McCarron, webmaster
Blamepro.com

 
You've probably noticed web graphics with small underscores next to, or in between them. It looks to the untrained eye like sloppy coding, but it can easily be fixed. In fact, I'll show you two ways to fix the problem!


Example 1this is image 1 this is image 2 this is image 3
HTML CODE: <a href="http://www.freebies2go.com"><img src="IMG1.GIF" width=88 height=32 border=0 alt="this is image 1"> <img src="IMG2.GIF" width=88 height=32 border=0 alt="this is image 2"> <img src="IMG3.GIF" width=88 height=32 border=0 alt="this is image 3"></a>


Notice those little underlines between the graphics? You guessed correctly that the link tag (shown in green in the example above) is causing it. The webmaster wanted to place white space in between the graphics to make them more visually appealing. The browser is merely doing what it was told: placing an underline in the spaces because they are links, too.

If you're using Internet Explorer, you will only see an underline between the two upper graphics. If you're using Netswcape, you'll also see an underline after the second (blue) graphic.

The fix is to add link tags to each graphic, then separate them with a space. If this is done, the result appears as in Example 2.


Example 2this is image 1 this is image 2 this is image 3
HTML CODE: <a href="http://www.freebies2go.com"><img src="IMG1.GIF" width=88 height=32 border=0 alt="this is image 1"></a> <a href="http://www.freebies2go.com"><img src="IMG2.GIF" width=88 height=32 border=0 alt="this is image 2"></a> <a href="http://www.freebies2go.com"><img src="IMG3.GIF" width=88 height=32 border=0 alt="this is image 3">
</a>


This looks much better, EXCEPT for viewers who browse at your site with Netscape. those users will see a small little underline after the last graphic. The cause? The closing link tag (</a>) must be on the same line as the rest of the code. If it is on a line of its own, Netscape treats the line wrap as a space, and you get the little underline link character.

Example 3this is image 1 this is image 2 this is image 3
HTML CODE: <a href="http://www.freebies2go.com"><img src="IMG1.GIF" width=88 height=32 border=0 alt="this is image 1"></a> <a href="http://www.freebies2go.com"><img src="IMG2.GIF" width=88 height=32 border=0 alt="this is image 2"></a> <a href="http://www.freebies2go.com"><img src="IMG3.GIF" width=88 height=32 border=0 alt="this is image 3"></a>


This is a good argument for proofing your pages with Internet Explorer and Netscape. While industry statistics show that Netscape is no longer the dominant browser, Netscape users account for roughly a third of the activity at my site. That to me is worth the few extra lines of code to make the pages appear the same to my users.



Webmaster Secrets



Copyright © 1996-2017 Blamepro.com
Trademarks and copyrights used herein are the property of their respective holders.