image class ruins link?

[Keith Wiley]

I have the following:

<A HREF="picture.jpg"><IMG SRC="pictureIcon.jpg" CLASS="imgFrame" BORDER=0
WIDTH="64" HEIGHT="87"></A>

with the class:

..imgFrame {
position: relative;
top: 90px;
padding: 2px;
margin: 5px;
border-style: solid;
border-color: 666666;
border-width: 1px
}

I am using a class to define a simple nice frame around the image by using
the border property. It works great. However, putting the class in the
IMG tag makes the image unclickable. The cursor doesn't turn into a hand
when I move it over the image, and the image is no longer a clickable
link. If I remove that, everything works fine again.

What the heck is wrong here?

________________________________________________________________________
Keith Wiley (e-mail address removed)
http://www.unm.edu/~keithw http://www.mp3.com/KeithWiley

"Yet mark his perfect self-contentment, and hence learn his lesson,
that to be self-contented is to be vile and ignorant, and that to
aspire is better than to be blindly and impotently happy."
-- Edwin A. Abbott, Flatland
________________________________________________________________________

 

[Keith Wiley]

Actually, I'm getting really confused now. I think the code works, but
the positioning is ruining it. The cursor turns to a hand in a different
part of the screen than the location of the image. It's as if the image
has move according to my desired position, but the link clickable area is
still in the original position.

The image is inside a table, and I am discovering strange things with
table positioning. For example, it doesn't need a top attribute in order
to position "relativel" nicely down the page, but it does need a left
attribute. It's all kinda of random.

Any thoughts?

________________________________________________________________________
Keith Wiley (e-mail address removed)
http://www.unm.edu/~keithw http://www.mp3.com/KeithWiley

"Yet mark his perfect self-contentment, and hence learn his lesson,
that to be self-contented is to be vile and ignorant, and that to
aspire is better than to be blindly and impotently happy."
-- Edwin A. Abbott, Flatland
________________________________________________________________________

 

[Mark Parnell]

Sometime around Tue, 11 Nov 2003 17:22:15 -0700, Keith Wiley is reported to
have stated:

Actually, I'm getting really confused now. I think the code works, but
the positioning is ruining it. The cursor turns to a hand in a different
part of the screen than the location of the image. It's as if the image
has move according to my desired position, but the link clickable area is
still in the original position.

That's what your position: relative; and top: 90px; does. (Would have been
nice if you had included at least some of the text you were replying to,
BTW). If this is not what you intended, then I would suggest that as usual,
a URL would be helpful, so we can see what the actual problem is, not your
perceived solution.

The image is inside a table, and I am discovering strange things with
table positioning.

Any thoughts?

http://www.allmyfaqs.com/faq.pl?Tableless_layouts

 

[Mark Parnell]

Sometime around Tue, 11 Nov 2003 17:17:06 -0700, Keith Wiley is reported to
have stated:

<IMG SRC="pictureIcon.jpg" CLASS="imgFrame" BORDER=0
WIDTH="64" HEIGHT="87"></A>

border-style: solid;
border-color: 666666;
border-width: 1px

You have specified border="0" in your HTML, then added a border with CSS.
Besides being completely illogical (and border is deprecated anyway), this
could cause unpredictable results. Nothing to do with your question, of
course, but this _is_ Usenet.

 

[rf]

I have the following:

<A HREF="picture.jpg"><IMG SRC="pictureIcon.jpg" CLASS="imgFrame" BORDER=0
WIDTH="64" HEIGHT="87"></A>

with the class:

.imgFrame {
position: relative;
top: 90px;
padding: 2px;
margin: 5px;
border-style: solid;
border-color: 666666;
border-width: 1px
}

I am using a class to define a simple nice frame around the image by using
the border property. It works great. However, putting the class in the
IMG tag makes the image unclickable. The cursor doesn't turn into a hand
when I move it over the image, and the image is no longer a clickable
link. If I remove that, everything works fine again.

What the heck is wrong here?

You need to read up on what position: relative does.

You have a link somewhere on the canvas and then you position the image
inside that linke somewhere else on the canvas. The link is still there (as
you have discovered) but is no longer where the image is.

Why are you positioning stuff like this? At the very least it is the <a>
element that should be positioned.

Cheers
Richard.

 

[Keith Wiley]

Sometime around Tue, 11 Nov 2003 17:22:15 -0700, Keith Wiley is reported to
have stated:


That's what your position: relative; and top: 90px; does. (Would have been
nice if you had included at least some of the text you were replying to,
BTW).

Actually, I would assume that you are the only person who had difficulty
comprehending that I was merely amending my original question in the
original post.

If this is not what you intended, then I would suggest that as usual,
a URL would be helpful, so we can see what the actual problem is, not your
perceived solution.

Oh what a clever idea, except that there is no URL, since the website in
question is still "in dev" and as such only resides on a local harddrive
presently.

http://www.allmyfaqs.com/faq.pl?Tableless_layouts

I'll check it out.

________________________________________________________________________
Keith Wiley (e-mail address removed)
http://www.unm.edu/~keithw http://www.mp3.com/KeithWiley

"Yet mark his perfect self-contentment, and hence learn his lesson,
that to be self-contented is to be vile and ignorant, and that to
aspire is better than to be blindly and impotently happy."
-- Edwin A. Abbott, Flatland
________________________________________________________________________

 

[Keith Wiley]

Sometime around Tue, 11 Nov 2003 17:17:06 -0700, Keith Wiley is reported to
have stated:



You have specified border="0" in your HTML, then added a border with CSS.
Besides being completely illogical (and border is deprecated anyway), this
could cause unpredictable results. Nothing to do with your question, of
course, but this _is_ Usenet.

Well, I'm trying to do something very specific. I have been giving my
images border=0 marks for a long time because I hate having an ugly blue
border drawn around an image when it's used as a link. I am alternatively
trying to draw a different kind of border around it using the description
in the css code. There is no way to describe a border in the HTML, only
in the css.

________________________________________________________________________
Keith Wiley (e-mail address removed)
http://www.unm.edu/~keithw http://www.mp3.com/KeithWiley

"Yet mark his perfect self-contentment, and hence learn his lesson,
that to be self-contented is to be vile and ignorant, and that to
aspire is better than to be blindly and impotently happy."
-- Edwin A. Abbott, Flatland
________________________________________________________________________

 

[Keith Wiley]

Why are you positioning stuff like this? At the very least it is the <a>
element that should be positioned.

Aside from the remark that the <A> tag should be position instead of the
image, you seem to think that there is something really wrong with
position a link-image this way. What is it that you are referring to?
How else would one place a link-image in a particular location?

________________________________________________________________________
Keith Wiley (e-mail address removed)
http://www.unm.edu/~keithw http://www.mp3.com/KeithWiley

"Yet mark his perfect self-contentment, and hence learn his lesson,
that to be self-contented is to be vile and ignorant, and that to
aspire is better than to be blindly and impotently happy."
-- Edwin A. Abbott, Flatland
________________________________________________________________________

 

[David Dorward]

Aside from the remark that the <A> tag should be position instead of the
image, you seem to think that there is something really wrong with
position a link-image this way. What is it that you are referring to?
How else would one place a link-image in a particular location?

Usually one would let normal flow drop it in to place. Rarely, absolute
positioning would be used. I've never seen relative positioning be used to
place something "in a particular location" though.

 

[Steve R.]

Keith Wiley wrote in message ...

What the heck is wrong here?
http://www.unm.edu/~keithw

What an awful website. You've chosen *art* over *function*. The menu is irritating to work around
and very dark unless you pass the mouse over the selection.

I gave up.

 

[Hywel Jenkins]

Actually, I would assume that you are the only person who had difficulty
comprehending that I was merely amending my original question in the
original post.

What original post? How do you know that Mark's mail server served
him the original message? How do you know that anyone's mail server
served the original? How do you know how Mark has threads displayed
in his news client? In fact, do you know whether he threads his
messages at all? What if a reader is using Google, possibly the most
unreliable usenet tool in the world.

If you want help, don't be an arse.

 

[rf]

Usually one would let normal flow drop it in to place. Rarely, absolute
positioning would be used. I've never seen relative positioning be used to
place something "in a particular location" though.

Relative positioning does not and indeed can not place something in "a
particular location". It moves the something from here to to x,y pixels over
there, from where it would have been.

 

[rf]

Aside from the remark that the <A> tag should be position instead of the
image, you seem to think that there is something really wrong with
position a link-image this way. What is it that you are referring to?
How else would one place a link-image in a particular location?

As David said, why position anything. Let the browser decide. Trying to
position things defeats the whole concept of liquid design. The web is not a
piece of desktop publushing paper.

Cheers
Richard.

 

[rf]

Keith Wiley wrote in message ...

What an awful website. You've chosen *art* over *function*. The menu is irritating to work around
and very dark unless you pass the mouse over the selection.

I gave up.

AAaarkk. You just prompted me to look at it. Awful is too mild a term.

Cheers
Richard.

 

[Warren Oates]

:As David said, why position anything. Let the browser decide. Trying to
osition things defeats the whole concept of liquid design. The web is not a
iece of desktop publushing paper.

Well that depends on your use of it, and what you need to get from it,
doesn't it? Pixel-by-pixel control (à la Quark) is an extremely good use
of CSS.

 

[Mark Parnell]

Sometime around Wed, 12 Nov 2003 07:52:24 -0500, Warren Oates is reported
to have stated:

Pixel-by-pixel control (à la Quark) is an extremely good use of CSS.

No, pixel by pixel control is what PDF is for.

 

[Kris]

Pixel-by-pixel control (à la Quark) is an extremely good use of CSS.

No, pixel by pixel control is what PDF is for.[/QUOTE]

Or, an image.

 

[Eric Bohlman]

AAaarkk. You just prompted me to look at it. Awful is too mild a term.

Actually, I'd have to say that the opening page does a good job of creating
the effect it was meant to. It's an effect that I do not personally like
at all (I find it quite tedious), but that I know really appeals to some
people. However, there's no excuse for the cramped text used in the footer
menu on at least the "about me" page; it's barely readable and requires
unnecessarily precise positioning to hit the right button (there are very
few things that can make web sites inaccessible to people with motor
difficulties; too-small link target areas are one of them). Unlike the
opening page design, I don't think this one is purely a matter of taste.