Turning off link styles for images

[Greg Raven]

I styled my links just the way I want them using CSS, but now my linked
images have picked up these same styles. I've tried turning the styles
off for the images with:

a img
{
text-decoration: none;
outline: none;
margin: 0px;
padding: 0px;
border-width: 0;
border-style: none;
}

.... to no avail. I should mention that this CSS code is at the bottom of
my style sheet, which I understand should give it some measure of
preference.

What am I missing?

[Andrew Thompson]

"Greg Raven" <gr**@racquettech.com> wrote in message
news:gr************************@tribune.sj.sys.us. xo.net...
| I styled my links just the way I want them using CSS, but now
my linked
| images have picked up these same styles. I've tried turning the
styles
| off for the images with:
|
| a img
| {
| text-decoration: none;

I _suspect_* this is because the properties
you are seeing are not being applied to the
image itself, but to the link that encloses it..

* ..waiting for someone who knows lots
about styles to either..
a) confirm that or
b) call me a turkey and tell me to leave it
for those who know ;-)

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

[Eric Bohlman]

"Andrew Thompson" <an******@bigNOSPAMpond.com> wrote in
news:Ch******************@news-server.bigpond.net.au:

| a img
| {
| text-decoration: none;

I _suspect_* this is because the properties
you are seeing are not being applied to the
image itself, but to the link that encloses it..

On the contrary, the properties are being applied to the image, not the
link, and that's the problem. CSS doesn't provide any means to select an
element based on its descendants; there's no way to say "style an <a> that
contains an <img> differently from one that doesn't."

I think the OP will have to resort to putting a class attribute on links
that contain images.

[Andrew Thompson]

"Eric Bohlman" <eb******@earthlink.net> wrote in message
| "Andrew Thompson" <an******@bigNOSPAMpond.com> wrote in
|
| >| a img
| >| {
| >| text-decoration: none;
| >
| > I _suspect_* this is because the properties
| > you are seeing are not being applied to the
| > image itself, but to the link that encloses it..
|
| On the contrary, the properties are being applied to the image,
not the
| link, and that's the problem.

Miscommunication on my part?
That is actually what I meant.

But just to clarify, the OP is _seeing_ the
border and such of the <a>, rather than the
<img> that is inside the <a>?

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

[Nick Theodorakis]

On 20 Jan 2004 16:15:24 EST, Greg Raven <gr**@racquettech.com> wrote:

I styled my links just the way I want them using CSS, but now my linked
images have picked up these same styles. I've tried turning the styles
off for the images with:

a img
{
text-decoration: none;
outline: none;
margin: 0px;
padding: 0px;
border-width: 0;
border-style: none;
}

... to no avail. I should mention that this CSS code is at the bottom of
my style sheet, which I understand should give it some measure of
preference.

What am I missing?

That seems needlessly complicated (although a url with an example
would be helpful here). Have you tried just :

a img
{
border: none;
}

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

[Spartanicus]

"Andrew Thompson" <an******@bigNOSPAMpond.com> wrote:

| >| a img
| >| {
| >| text-decoration: none;
| >
| > I _suspect_* this is because the properties
| > you are seeing are not being applied to the
| > image itself, but to the link that encloses it..
|
| On the contrary, the properties are being applied to the image,
not the
| link, and that's the problem.

Miscommunication on my part?
That is actually what I meant.

But just to clarify, the OP is _seeing_ the
border and such of the <a>, rather than the
<img> that is inside the <a>?

No, the border on a hyperlinked image is a property of the image.

--
Spartanicus

[Neal]

On 20 Jan 2004 16:15:24 EST, Greg Raven <gr**@racquettech.com> wrote:

I styled my links just the way I want them using CSS, but now my linked
images have picked up these same styles. I've tried turning the styles
off for the images with:

a img
{
text-decoration: none;
outline: none;
margin: 0px;
padding: 0px;
border-width: 0;
border-style: none;
}

... to no avail. I should mention that this CSS code is at the bottom of
my style sheet, which I understand should give it some measure of
preference.

What am I missing?

What you've done is stripped the images of all borders, which means no
link-colored border will be there.

a img {
border: 4px;
}

To restore colors, assign colors to a:link img, a:visited img etc.

[DU]

Greg Raven wrote:

I styled my links just the way I want them using CSS, but now my linked
images have picked up these same styles. I've tried turning the styles
off for the images with:

a img
{
text-decoration: none;
outline: none;
margin: 0px;
padding: 0px;
border-width: 0;
border-style: none;
}

... to no avail. I should mention that this CSS code is at the bottom of
my style sheet, which I understand should give it some measure of
preference.

What am I missing?

Others have already answered you on how to achieve borderless
link-images. But I advise against doing so. Just consider the
perspective of your visitors who know nothing of your site. How can they
figure out easily where are clickable images if you remove the color
around links (unvisited, visited, hovered ones) when these are clickable
images? Borderless link-images just diminishes the usability and
navigability of your site.

Same thing with outline. Even though outline is right now poorly
supported (only Opera 7.x supports it), I would advise not to remove the
default outline declaration of browsers for the same reasons: visual
feedback, easy identification of the last element with focus.

DU