Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 10:24 PM
Greg Raven
Guest
 
Posts: n/a
Default Turning off link styles for images

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?
  #2  
Old July 20th, 2005, 10:24 PM
Andrew Thompson
Guest
 
Posts: n/a
Default Re: Turning off link styles for images

"Greg Raven" <greg@racquettech.com> wrote in message
news:greg-A09E92.13153120012004@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


  #3  
Old July 20th, 2005, 10:24 PM
Eric Bohlman
Guest
 
Posts: n/a
Default Re: Turning off link styles for images

"Andrew Thompson" <andrew64@bigNOSPAMpond.com> wrote in
news:ChhPb.20737$Wa.14304@news-server.bigpond.net.au:
[color=blue]
>| 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..[/color]

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.
  #4  
Old July 20th, 2005, 10:24 PM
Andrew Thompson
Guest
 
Posts: n/a
Default Re: Turning off link styles for images

"Eric Bohlman" <ebohlman@earthlink.net> wrote in message
| "Andrew Thompson" <andrew64@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


  #5  
Old July 20th, 2005, 10:24 PM
Nick Theodorakis
Guest
 
Posts: n/a
Default Re: Turning off link styles for images

On 20 Jan 2004 16:15:24 EST, Greg Raven <greg@racquettech.com> wrote:
[color=blue]
>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?[/color]

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
nick_theodorakis@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu
  #6  
Old July 20th, 2005, 10:24 PM
Spartanicus
Guest
 
Posts: n/a
Default Re: Turning off link styles for images

"Andrew Thompson" <andrew64@bigNOSPAMpond.com> wrote:
[color=blue]
>| >| 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>?[/color]

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

--
Spartanicus
  #7  
Old July 20th, 2005, 10:24 PM
Neal
Guest
 
Posts: n/a
Default Re: Turning off link styles for images

On 20 Jan 2004 16:15:24 EST, Greg Raven <greg@racquettech.com> wrote:
[color=blue]
> 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?[/color]

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.
  #8  
Old July 20th, 2005, 10:24 PM
DU
Guest
 
Posts: n/a
Default Re: Turning off link styles for images

Greg Raven wrote:
[color=blue]
> 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?[/color]

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
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles