Hyperlinking an Image

[Daniel]

In a table cell (with a background color) I inserted 2 times the same
transparent image (side by side). Everything appeared normal.

I now added a hyperlink to the images and a navy blue border appears
around each image. I would like to know how to remove the border and
all styling so that the images butt up against one another again.

Here is the code for that cell

<a href="http://localhost/web/insp_add.php?inspid=9">
<td class="conf" colspan="2" title="Time: 9:15
Duration: 2:15 hr(s)
Address: Montréal
Status: Confirmed">
<a href="http://localhost/web/insp_add.php?inspid=9">
<img src="images/inspreq.gif" width="10" height="10"
hspace="0" vspace="0" align="left"/>
</a>
<a href="http://localhost/web/insp_add.php?inspid=9">
<img src="images/inspreq.gif" width="10" height="10"
hspace="0" vspace="0" align="left"/>
</a>
</td>
</a>

I have tried the following in my css file

link {
margin: 20px;
padding: 0px;
border:none;
text-decoration:none;
}

a {
text-decoration:none;
border:none;
}

but it doesn't seem to do anything.

Thank you for your help,

Daniel

 

[Jonathan N. Little]

In a table cell (with a background color) I inserted 2 times the same
transparent image (side by side). Everything appeared normal.

I now added a hyperlink to the images and a navy blue border appears
around each image. I would like to know how to remove the border and
all styling so that the images butt up against one another again.

Here is the code for that cell

<a href="http://localhost/web/insp_add.php?inspid=9">
<td class="conf" colspan="2" title="Time: 9:15
Duration: 2:15 hr(s)
Address: Montréal
Status: Confirmed">
<a href="http://localhost/web/insp_add.php?inspid=9">
<img src="images/inspreq.gif" width="10" height="10"
hspace="0" vspace="0" align="left"/>
</a>
<a href="http://localhost/web/insp_add.php?inspid=9">
<img src="images/inspreq.gif" width="10" height="10"
hspace="0" vspace="0" align="left"/>
</a>
</td>
</a>

I have tried the following in my css file

link {
margin: 20px;
padding: 0px;
border:none;
text-decoration:none;
}

Styling the LINK element eh? They have not visual styling they are
located in the HEAD portion of a document.

a {
text-decoration:none;
border:none;
}

What you want is:

/* IMGs that are a child of A, no border */
a img { border: 0; }

 

[Daniel]

First off, thank you!

Secondly, I'm (obviously) a novice at CSS. Could you point me to a
good website or 2 to learn from that cover this type of stuff in
detail and in plain english.

Thank you once again it was exactly what I needed.

Daniel

 

[Jonathan N. Little]

First off, thank you!

Secondly, I'm (obviously) a novice at CSS. Could you point me to a
good website or 2 to learn from that cover this type of stuff in
detail and in plain english.

Thank you once again it was exactly what I needed.

We all started at one time.

Try tutorials at www.htmldog.com

Although not a great read, but very enlightening each time I refer to it...

http://www.w3.org/TR/CSS21/cover.html
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

I find the property index helpful:

http://www.w3.org/TR/CSS21/propidx.html
Full property table

 

[Jukka K. Korpela]

Scripsit Daniel:

In a table cell (with a background color) I inserted 2 times the same
transparent image (side by side). Everything appeared normal.

For some abnormal values of "normal".

I now added a hyperlink to the images and a navy blue border appears
around each image.

Is that your main concern, really? To prevent the user from getting the
slightest clue of there being a link?

<a href="http://localhost/web/insp_add.php?inspid=9">
<img src="images/inspreq.gif" width="10" height="10"
hspace="0" vspace="0" align="left"/>
</a>

That's particularly bad code - an img element without an alt attribute as a
link.

 

[John Hosking]

Here is the code for that cell

<a href="http://localhost/web/insp_add.php?inspid=9">
<td class="conf" colspan="2" title="Time: 9:15
Duration: 2:15 hr(s)
Address: Montréal
Status: Confirmed">
<a href="http://localhost/web/insp_add.php?inspid=9">
<img src="images/inspreq.gif" .../>
</a>
<a href="http://localhost/web/insp_add.php?inspid=9">
<img src="images/inspreq.gif" .../>
</a>
</td>
</a>

The validator accepts this as XHTML? A <td> inside an <a>?

 

[Jonathan N. Little]

The validator accepts this as XHTML? A <td> inside an <a>?

Wow! Or nested <a>'s I don't think so.....