473,544 Members | 1,815 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Image background color wrong on N7.1 - Help?

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
5 3462
Els

"Chris Beall" <Ch*********@pr odigy.net> schreef in bericht
news:fG******** ******@newssvr3 2.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
"Els" <el************ ***@tiscali.nl. invalid> wrote in message
news:bh******** *@reader1.tisca li.nl...

"Chris Beall" <Ch*********@pr odigy.net> schreef in bericht
news:fG******** ******@newssvr3 2.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.tisca li.nl...
"Chris Beall" <Ch*********@pr odigy.net> schreef in bericht
news:fG****** ********@newssv r32.news.prodig y.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
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
"Mark Cunningham" <ma*****@REMOVE TOEMAILnetscape .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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

23
7689
by: Erik Schulp | last post by:
Hi all, I am using a background image via a stylsheet. I've used this code: background-image:url("/images/tile.gif"); (which I think is correct) The image doesn't show up however, the path, the filename etc etc, everything checks out ok.
21
20599
by: Dan V. | last post by:
I have tried a number of things including preloading, but the background image (water tile in header) in IE 6 will not display where other browsers will. http://www.officeactivate.com/web-site-design.shtml Any ideas? thanks.
4
5465
by: Gequina | last post by:
Something goes wrong in my script. I'm all new to it so i don't know much yet. I have a set of buttons. And when you click on either of them, the background image will change. Only it's not working. It works when i click on one, but then when i want to click on another, it's not working. What am i doing wrong? thanks in advance
14
11030
by: D. Alvarado | last post by:
Hello, I am trying to open a window containing an image and I would like the image to be flush against the window -- i.e. have no padding or border. Can I make this happen with a single call to a window.open function? I would prefer not to create a separate HTML page. So far all I have is the basic var cwin =...
5
116783
by: Derek Fountain | last post by:
I have a horizontal navigation bar, which is a single row table containing the right images. It "stretches" itself across the screen using a penultimate td like this: <td width="100%" background="images/nav_bar/nb_spacer.gif">&nbsp;</td> which works in all major browsers that I've tried, but doesn't validate. No background attribute to...
40
1950
by: Geoff Jones | last post by:
Hi Can anybody help me with the following? It is driving me crazy!!! I'm trying to produce a non-rectangular form as follows: (1) Produce a bitmap e.g. gif, using paint shop pro 5. (2) The Background color of the bitmap is set to white. (3) Draw a design on the bitmap in a color other than white. (4) Create a windows application.
8
2324
by: Cardman | last post by:
I am hopeful that someone can quickly solve my image alignment issue when things are just not going right and where my attempts to solve this alignment issue have all failed. First of all take a look here... http://www.cardman.com/switches.html In MIE this page looks perfect. Unfortunately both Netscape and Opera show these item photos...
1
3127
by: rsteph | last post by:
I've got some product information pages, with images and text, all setup within a table. I'm trying to add a small image in the upper right hand corner of the content div (where all the important information is). I've got the product name at the top, left aligned and typically as a two lined header, and I'd like to add a small logo to the right of...
9
2155
by: rods | last post by:
I have defined a css stylesheet and have a particular style defined as follows: .main_body_booked { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; font-weight: bold ; text-decoration: line-through; background-color: #FFFF00} When I write some simple HTML code as follows: <span...
0
7371
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
1
7388
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7716
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
5925
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5305
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4925
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3420
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
993
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
676
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.