Re: underline between anchored img and text

On Mon, 17 May 2004 17:10:53 -0400, Brian
<usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

http://www.julietremblay.com/portfolio/i

I wanted to put both img and text in one anchor element, but the
default underline on the anchor runs into the image, something that I'd
like to change. I'd rather not turn off underlining altogether for the
sake of usability. I removed the white space, and assigned a margin to
the image, but, well, you see the results. Is there anything else I
should try?

Brian, I'm not sure I see the problem in Opera 7.23 or IE6. Both render a
good space between the image and the text. Underlining looks good.

What is it you want to change?

Neal wrote:

On Mon, 17 May 2004 17:10:53 -0400, Brian
usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

http://www.julietremblay.com/portfolio/i

I wanted to put both img and text in one anchor element, but the
default underline on the anchor runs into the image, something that
I'd like to change. I'd rather not turn off underlining altogether
for the sake of usability. I removed the white space, and assigned a
margin to the image, but, well, you see the results. Is there
anything else I should try?

Brian, I'm not sure I see the problem in Opera 7.23 or IE6. Both render
a good space between the image and the text. Underlining looks good.

What is it you want to change?

I see the problem in NS7.1 and Firefox.
But there's another problem there, and that's the wrapping
of those titles. See this screenshot:
http://locusmeus.com/temp/brian.png

Possible solution (not tested), remove the underline of the
link, and put underline on the text only. You won't see the
difference ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

Neal wrote:

On Mon, 17 May 2004 17:10:53 -0400, Brian
usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

http://www.julietremblay.com/portfolio/i

I wanted to put both img and text in one anchor element, but the
default underline on the anchor runs into the image, something that
I'd like to change. I'd rather not turn off underlining altogether
for the sake of usability. I removed the white space, and assigned a
margin to the image, but, well, you see the results. Is there
anything else I should try?

Possible solution (not tested), remove the underline of the link, and
put underline on the text only. You won't see the difference ;-)

Uh.. you will. 'Cause that way the underlining doesn't
disappear when hovering.

Try this in your default.css:

A:link, A:visited{
text-decoration:none;
} /* visited link */

A:link span{
color: #f90 ;
background-color: #fff ;
text-decoration:underline;
} /* normal link */

A:visited span{
color: #c90 ;
background-color: #fff ;
text-decoration:underline;
} /* visited link */

A:hover span, A:focus span{
text-decoration: none ; /* when mouse hovers over link,
turn off underline */
} /* anchors when mouse hovers or given focus by eg keyboard */

And put the text in a span, like this:
<a HREF="a"
TITLE="Age Old Gallery"><img
SRC="thumbnails/bertha.jpg" ALT=""
WIDTH="90" HEIGHT="90"><span>Age Old</span></a>

Works here on Firefox.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Brian wrote:

Els wrote:

Brian wrote:

http://www.julietremblay.com/portfolio/i

I wanted to put both img and text in one anchor element, but the
default underline on the anchor runs into the image

Try this in your default.css:

[code snipped]

Works here on Firefox.

Much thank for writing and testing code. I think I'm going to have to
take a pass on the idea, though. It would make my css much more
complicate (I'd have to link and hover selectors for just that page); it
would not work on MSIE/Win; and the html would be about as complicated
as it would for having 2 anchor elements. I'll probably go with 2 anchor
elements.

Oops, didn't realise it doesn't work in IE. I'm sure it can
be made to work though, but indeed, it doesn't make the html
less complicated than two anchor elements, I'd make the same
choice if I were in your shoes :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Brian wrote:

Els wrote:

Oops, didn't realise it doesn't work in IE. I'm sure it can be made to
work though

Don't be too sure. IE/Win does not do :hover for any element but <a>.

True, but the thing is to not set the hover on the span
a span:hover
but on the a
a:hover span
this should effect the span in an a element which is hovered.

The menu on my site has a span inside the a element, and the
text in that span is displayed below the menu, only when the
a element is hovered.


--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -