Image background color wrong on N7.1 - Help?

Chris Beall

I'm displaying an image that is also a link against a black background.
In Netscape 7.1, the current background color is displayed as a
horizontal bar below the image. This allows :hover effects that change
the background color to have a visible effect, as this bar changes
color. By default, it appears that the color is inherited from the body
color, i.e. with no link style applied, the bar is black, and invisible
against the background.

BUT, I want a different background color for TEXT links, so I specified
something like:
A:link { background-color: red ; } [Color chosen to
illustrate problem...]
On N 7.1 the expected red bar now appears below images, BUT I wanted
that background color only for TEXT links, so I attempt to override the
style above with:
A IMG {background-color: black ; }
which has no effect. I refine that to:
A:link IMG {background-color: black ; }
A:visited IMG {background-color: black ; }
and that has no effect either. The bar is still red.

All style blocks appear in the order shown above, i.e. the non-IMG
blocks appear first.

Testcase at http://pages.prodigy.net/chris_beall.../linktest.html

Am I doing something wrong, or is Netscape 7.1?

Chris Beall

Jul 20 '05 #1

Els

"Chris Beall" <Ch*********@prodigy.net> schreef in bericht
news:fG**************@newssvr32.news.prodigy.com.. .

I'm displaying an image that is also a link against a black
background.
In Netscape 7.1, the current background color is displayed
as a horizontal bar below the image. This allows :hover
effects that change the background color to have a visible
effect, as this bar changes color. By default, it appears that
the color is inherited from the body color, i.e. with no link
style applied, the bar is black, and invisible against the
background.

BUT, I want a different background color for TEXT links,
so I specified something like:
/snip/
Testcase at http://pages.prodigy.net/chris_beall.../linktest.html
Am I doing something wrong, or is Netscape 7.1?

I'm relatively new to this, so if I'm giving wrong info, anyone,
please correct me:
The problem is not the background of the image, I guess it's black. (I
would have to check that with a transparant image :-)).
The problem is the bar below the image, which is not the background of
the image!
You just have to get rid of that bar, this will solve your problem,
right?
So, have a read at
http://devedge.netscape.com/viewsource/2002/img-table/ and notice,
that adding display: block to your images, works outside tables as
well :-)
In your example code:

A:link IMG {
display: block;
background-color: black ;
border-style: none ;
}
A:visited IMG {
display: block;
background-color: black ;
border-style: none ;
}

Hope this helps,

sincerely,
Els

Jul 20 '05 #2

Chris Beall

"Els" <el***************@tiscali.nl.invalid> wrote in message
news:bh*********@reader1.tiscali.nl...

"Chris Beall" <Ch*********@prodigy.net> schreef in bericht
news:fG**************@newssvr32.news.prodigy.com.. .

I'm displaying an image that is also a link against a black
background.
In Netscape 7.1, the current background color is displayed
as a horizontal bar below the image. This allows :hover
effects that change the background color to have a visible
effect, as this bar changes color. By default, it appears that
the color is inherited from the body color, i.e. with no link
style applied, the bar is black, and invisible against the
background.

BUT, I want a different background color for TEXT links,
so I specified something like:

/snip/

Testcase at

http://pages.prodigy.net/chris_beall.../linktest.html

Am I doing something wrong, or is Netscape 7.1?

I'm relatively new to this, so if I'm giving wrong info, anyone,
please correct me:
The problem is not the background of the image, I guess it's black. (I
would have to check that with a transparant image :-)).
The problem is the bar below the image, which is not the background of
the image!
You just have to get rid of that bar, this will solve your problem,
right?
So, have a read at
http://devedge.netscape.com/viewsource/2002/img-table/ and notice,
that adding display: block to your images, works outside tables as
well :-)
In your example code:

A:link IMG {
display: block;
background-color: black ;
border-style: none ;
}
A:visited IMG {
display: block;
background-color: black ;
border-style: none ;
}

Els,

OK, I first tested this by adding:
A IMG { display:block;}
which is a little heavy-handed, but got rid of the bar, which, thanks to
your reference, I now know is descender space on an inline object.
BUT eliminating the descender space also eliminates the hover effect.
I'm still contemplating whether I want to do that or not, but suppose I
wanted to keep it?

Next I removed the above line and added
display: block ;
to both the
A:link IMG
A:visited IMG
styles. That had exactly the same effect, since converting the image to
a block eliminates the descender space and the :hover background has no
effect.

To counteract that, I added:
display: inline ;
to the a:hover, but that had no effect. Of course, the CSS2 spec says,
"User agents are not required to reflow a currently displayed document
due to pseudo-class transitions." so there's a loophole for that one.
Adding the descender space would potentially require reflow of
everything lower on the page.

Which kinda brings me back to the original question:
Why isn't
A:visited
overridden by
A:visited IMG
when they appear in that order, by Netscape 7.1?

Referring to http://www.w3.org/TR/REC-CSS2/cascade.html#specificity, it
appears that the first of these has a specificity of 11, while the
second has a specificity of 12, which wins.

Chris Beall

Jul 20 '05 #3

Els

Chris Beall wrote:

"Els" <el***************@tiscali.nl.invalid> wrote in message
news:bh*********@reader1.tiscali.nl...

"Chris Beall" <Ch*********@prodigy.net> schreef in bericht
news:fG**************@newssvr32.news.prodigy.com ...

Testcase at

http://pages.prodigy.net/chris_beall.../linktest.html

Am I doing something wrong, or is Netscape 7.1?

I'm relatively new to this, so if I'm giving wrong info, anyone,
please correct me:
The problem is not the background of the image, I guess it's black. (I
would have to check that with a transparant image :-)).
The problem is the bar below the image, which is not the background of
the image!
You just have to get rid of that bar, this will solve your problem,
right?
So, have a read at
http://devedge.netscape.com/viewsource/2002/img-table/ and notice,
that adding display: block to your images, works outside tables as
well :-)
In your example code:

A:link IMG {
display: block;
background-color: black ;
border-style: none ;
}
A:visited IMG {
display: block;
background-color: black ;
border-style: none ;
}

Els,

OK, I first tested this by adding:
A IMG { display:block;}
which is a little heavy-handed, but got rid of the bar, which, thanks to
your reference, I now know is descender space on an inline object.
BUT eliminating the descender space also eliminates the hover effect.

Sorry, but I don't understand which hover effect
you are talking about; if the background color is
effected by the hovering, you won't be able to see
that. _if_ you mean the background of the image,
that is...

If you want a hover effect like a border on the
image, try:

a:link {text-decoration: none;
color: red;
}

a:visited {text-decoration: none;
color: blue;
}

a:hover {text-decoration: none;
color: green;
}

a:link img{border-color: black;
border-width: 5px;
}

a:visited img{border-color: red;
border-width: 5px;
}

a:hover img{border-color: white;
border-width: 5px;
}

I put my test on
http://home.tiscali.nl/~elizabeth/test/test4.html,
so you can see if that's what you wanted for a
hover-effect.
BTW: no display: block involved...
I couldn't reproduce the 'bar' that was below the
image anymore, so I compared and compared again
and I found it: if you put text-decoration: none
in your img styles, the bar (which seems to be a
link underline!) disappears!

So, back to your hover effect: is the a.m. example
what you want?

Sincerely,
Els

Jul 20 '05 #4

Mark Cunningham

Chris Beall wrote:

I'm displaying an image that is also a link against a black background.
In Netscape 7.1, the current background color is displayed as a
horizontal bar below the image. This allows :hover effects that change
the background color to have a visible effect, as this bar changes
color. By default, it appears that the color is inherited from the body
color, i.e. with no link style applied, the bar is black, and invisible
against the background.

BUT, I want a different background color for TEXT links, so I specified
something like:
A:link { background-color: red ; } [Color chosen to
illustrate problem...]
On N 7.1 the expected red bar now appears below images, BUT I wanted
that background color only for TEXT links, so I attempt to override the
style above with:
A IMG {background-color: black ; }
which has no effect. I refine that to:
A:link IMG {background-color: black ; }
A:visited IMG {background-color: black ; }
and that has no effect either. The bar is still red.

All style blocks appear in the order shown above, i.e. the non-IMG
blocks appear first.

Testcase at http://pages.prodigy.net/chris_beall.../linktest.html

Am I doing something wrong, or is Netscape 7.1?

Chris Beall

How about using classes to address each type of link? I played with it a
little bit, see the attached link. You'll need to modify to fit your
specific needs of course, but it should get the idea across.
http://bellsouthpwp.net/m/a/macunni/sandbox/link.htm
--

Mark Cunningham
http://bellsouthpwp.net/m/a/macunni/

Jul 20 '05 #5

Chris Beall

"Mark Cunningham" <ma*****@REMOVETOEMAILnetscape.net> wrote in message
news:r0******************@fe04.atl2.webusenet.com. ..

Chris Beall wrote:

I'm displaying an image that is also a link against a black background. In Netscape 7.1, the current background color is displayed as a
horizontal bar below the image. This allows :hover effects that change the background color to have a visible effect, as this bar changes
color. By default, it appears that the color is inherited from the body color, i.e. with no link style applied, the bar is black, and invisible against the background.

BUT, I want a different background color for TEXT links, so I

specified
(snip) How about using classes to address each type of link? I played with it a little bit, see the attached link. You'll need to modify to fit your
specific needs of course, but it should get the idea across.
http://bellsouthpwp.net/m/a/macunni/sandbox/link.htm

Mark,

That technique (using a border-bottom for the :hover highlight) works
for both IE and Netscape.

Thanks,
Chris Beall

Jul 20 '05 #6