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.

Home Email Links

A: Some browsers (most browsers?) interpret a carriage return between images as a space. A few browsers don't. It's that simple. The little blue dash 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:

<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> </CENTER>

If we were to change it to this we would eliminate the little blue dashes:

<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> </CENTER>
Home Email Links

Another adjustment and the spaces disappear too:

<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> </CENTER>
HomeEmailLinks

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.


Another way to link is to link not just to a page, but to a specific part of a page. Click here to be magically transported to where we first talked about URLs. Since it would be kind of hard to have you build an example, I'll just do the best I can to explain how it's done.

First start with the spot you want people to be transported to. Pick a word and wrap it in the <A> tags.

<A>Add</A> the URL and you're done!

Next give that spot a NAME.

<A NAME="upabit">Add</A> the URL and you're done!

What you have done is marked that spot. Now that spot can be referenced and linked to.


Start building the link.

Click <A>here</A> to be magically transported...

Add the document to be referenced...

Click <A HREF="lesson12.html">here</A> to be magically transported...

And lastly, add the anchor NAME like so...

Click <A HREF="lesson12.html#upabit">here</A> to be magically transported...

And that's all there is to it! Not exactly brain surgery is it??

<< BACK         NEXT >>