FAQ: My image links have these little blue dashes next to them. Also I keep getting spaces between them and I want them to be flush up against each other. I don't understand... it works right in Browser B.
A: Most browsers interpret a carriage return between images as a space. A few browsers don't. It's that simple. The little blue dash (seen in some browsers) is simply the link underlining an empty space. The cure is to eliminate carriage returns right before or right after the image.
This is the markup for the above images:
<p align="center">
<a href="myhome.html">
<img src="myhome.gif"
width="66" height="23"
border="0" alt="Home">
</a>
<a href="mailto:me@my.house">
<img src="myemail.gif"
width="66" height="23"
border="0" alt="Email">
</a>
<a href="mylinks.html">
<img src="mylinks.gif"
width="66" height="23"
border="0" alt="Links">
</a>
</p>
If we were to change it to this we would eliminate the little blue dashes:
<p align="center">
<a href="myhome.html"><img
src="myhome.gif"
width="66" height="23"
border="0" alt="Home"></a>
<a href="mailto:me@my.house"><img
src="myemail.gif"
width="66" height="23"
border="0" alt="Email"></a>
<a href="mylinks.html"><img
src="mylinks.gif"
width="66" height="23"
border="0" alt="Links"></a>
</p>
Another adjustment and the spaces disappear too:
<p align="center">
<a href="myhome.html"><img
src="myhome.gif"
width="66" height="23"
border="0" alt="Home"></a><a
href="mailto:me@my.house"><img
src="myemail.gif"
width="66" height="23"
border="0" alt="Email"></a><a
href="mylinks.html"><img
src="mylinks.gif"
width="66" height="23"
border="0" alt="Links"></a>
</p>
Take the time to understand what's going on in the above examples.
Is this a pain in the butt? Only if you don't understand what's happening and how to fix it. Is Browser A a crappy browser? Not necessarily, it's just different than Browser B. Browsers sometimes do different things with the same markup.