473,699 Members | 2,697 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Eliminating background color on img link hover

If I have simplified html (I have removed height, weight, alt, etc...
attributes to simplify the example) such as:

<div id="header">
<a href="blah.html "><img src="img/blah.jpg"></a>
</div>

and the following CSS rule to apply a background color to text links on
hover:

a:hover {color: #007ebd; background-color: #ebf4ff;}

then I notice a small background coloring at the bottom of the above
image when I hover over it.

The following rule fixes the problem:

#header a:hover {color: #000000; background-color: transparent;}
The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.

a:hover img {color: #000000; background-color: transparent;}

almost cuts it but obviously doesn't work (since it sets the background
image of the img not the anchor on hover).

It doesn't seem possible but who knows....

Thanks,

--Nikolaos

Jul 20 '05 #1
6 17485
Els
Nikolaos Giannopoulos wrote:
If I have simplified html (I have removed height, weight, alt, etc...
attributes to simplify the example) such as:

<div id="header">
<a href="blah.html "><img src="img/blah.jpg"></a>
</div>

and the following CSS rule to apply a background color to text links on
hover:

a:hover {color: #007ebd; background-color: #ebf4ff;}

then I notice a small background coloring at the bottom of the above
image when I hover over it.

The following rule fixes the problem:

#header a:hover {color: #000000; background-color: transparent;}
The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.

a:hover img {color: #000000; background-color: transparent;}

almost cuts it but obviously doesn't work (since it sets the background
image of the img not the anchor on hover).

It doesn't seem possible but who knows....


Maybe a:hover img {color:transpar ent; background-color:
transparent; text-decoration:none ;} will do the trick?
You didn't provide a url, and with the code you gave, I
couldn't reproduce the effect...
--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #2
Nikolaos Giannopoulos wrote:
If I have simplified html (I have removed height, weight, alt, etc...
attributes to simplify the example) such as:

<div id="header">
<a href="blah.html "><img src="img/blah.jpg"></a>
</div>

and the following CSS rule to apply a background color to text links on
hover:

a:hover {color: #007ebd; background-color: #ebf4ff;}

then I notice a small background coloring at the bottom of the above
image when I hover over it.

The question is: Is there a single rule that could elminate this
background effect for all links that contain images?


I ran into this, too. To solve it, I defined the image as block.
Since I was floating it left, explicitly assigning display: block
did not otherwise affect the layout. I just retested, Moz 1.3/Win,
and that makes the difference. If you are not floating the image,
this solution will not work for you.
--
Brian
follow the directions in my address to email me

Jul 20 '05 #3
In article <YZ************ ********@magma. ca>,
Nikolaos Giannopoulos <ni******@solma r.ca> wrote:
then I notice a small background coloring at the bottom of the above
image when I hover over it. .... The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.


http://mozilla.org/docs/web-developer/faq.html#gaps

--
Henri Sivonen
hs******@iki.fi
http://www.iki.fi/hsivonen/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html
Jul 20 '05 #4
Nikolaos Giannopoulos wrote:

The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.


Thanks to all for their feedback. I'll respond to everyone here and
include online test cases "when hover over the solmar logo":
http://solmar.ca/temp5/test0.html
Suggestion: The default do nothing explicitly case
+ Moz 1.3 - faint blue border appears underneath logo
+ IE6 - footer jumps about the size of the logo height (bizarre)
+ IE5 - no problems appear

Suggestion: The one that I presented (found on the net)
http://solmar.ca/temp5/test1.html
+ Moz 1.3, IE6, IE5 - no problems appear
Great except I was looking for a simpler rule <<


Suggestion: from Henri and Brian - use display: block
NOTE: Brian explicitly stated that this does not work with non-floated
elements but since Henri's link didn't explicitly talk about non-floated
elements I decided to test it out anyways.
http://solmar.ca/temp5/test2.html
+ Moz 1.3, IE6, IE5 - faint blue box appears to the far right of logo
between software box and right hand column - may need to widen browser
window to see it. Interestingly enough although this did help in the
vertical sizing of the logo as the link explains it produced an ugly
side effect as well.

Suggestion: Els' first suggestion
http://solmar.ca/temp5/test3.html
+ *Same* results as default case - and as one might guess since the img
would be what would be styled on the hover not the anchor itself which
is responsible for the faint background effect.

Suggestion: Els' second suggestion
http://solmar.ca/temp5/test4.html
+ *Same* results as default case - same as test3.

So far the only thing that works reliably is setting the background of
the anchor on hover to transparent for each case that arises. The
block:display may work for floated elements (I'm not sure and I didn't
bother testing this case).

If anyone has any other ideas I can quickly try them.... ;-)

Thanks again,

--Nikolaos

PS all browser versions tested above on win boxes.

Jul 20 '05 #5
Nikolaos Giannopoulos wrote:
The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.
http://solmar.ca/temp5/test0.html
Suggestion: The default do nothing explicitly case
+ Moz 1.3 - faint blue border appears underneath logo


I cannot replicate this, Moz 1.3/Win2k.
Suggestion: from Henri and Brian - use display: block
NOTE: Brian explicitly stated that this does not work with non-floated
elements but since Henri's link didn't explicitly talk about non-floated
elements I decided to test it out anyways.
No, it works fine with non-floated elements. What I meant was that,
since I had already floated the container element on my page,
declaring the image display: block did not change the layout. I was
not sure if you could declare your image as block without affecting
the layout in other (undesirable) ways.
http://solmar.ca/temp5/test2.html
+ Moz 1.3, IE6, IE5 - faint blue box appears to the far right of logo
between software box and right hand column - may need to widen browser
window to see it. Interestingly enough although this did help in the
vertical sizing of the logo as the link explains it produced an ugly
side effect as well.


Cannot replicate the behavior you report, neither in Moz 1.3/Win2k nor
in MSIE 5.0/Win2k.

Unrelated: your design creates a font size smaller than what I have
chosen. The absolute positioning of the right hand links overlaps the
rest of page at narrow widths.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #6
Brian wrote:
Nikolaos Giannopoulos wrote:

http://solmar.ca/temp5/test0.html
Suggestion: The default do nothing explicitly case
+ Moz 1.3 - faint blue border appears underneath logo
I cannot replicate this, Moz 1.3/Win2k.


I see this on Moz 1.3/NT4. Can anyone else who has Moz 1.3 confirm this
behaviour exists or doesn't exist?

No, it works fine with non-floated elements. What I meant was that,
since I had already floated the container element on my page, declaring
the image display: block did not change the layout. I was not sure if
you could declare your image as block without affecting the layout in
other (undesirable) ways.


Sorry. I got it now. BTW do you see the problem that I described when
block was used?

http://solmar.ca/temp5/test2.html
+ Moz 1.3, IE6, IE5 - faint blue box appears to the far right of logo
between software box and right hand column - may need to widen browser
window to see it.


Cannot replicate the behavior you report, neither in Moz 1.3/Win2k nor
in MSIE 5.0/Win2k.


Once again can anyone else confirm or deny this?

Do you by any chance utilize a user style sheet that may be masking this
effect - I don't know for certain this is just a wild guess.

Anyone else with Moz 1.3 care to help out here.

Thanks,

--Nikolaos

Jul 20 '05 #7

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

Similar topics

1
3189
by: Shannon | last post by:
Hi there, I have an HTML page with one large background image in the left corner. I've got various links positioned randomly on the image, and I use <span> tags to display text on another section of the page when hovering over the links. Here's an example of the code: <head> <title>My Title</title> <style type="text/css">
1
6756
by: dhunter | last post by:
I'm kind of new to CSS and hope someone knows how to fix a problem I've been fighting with for days. I'm trying to create a mouseover navbar with CSS which inserts a colored background JPG that fills a transparent cell using "a:hover" and inserts a different colored JPG after you click on the link and are on the linked page ("a:active" I assume). My current test works fine (at least on the "a:hover" part) but the background won't fill...
1
2289
by: CMAR | last post by:
I have a design of a frameless page on my practice website: http://home.ne.rr.com/thespar/designerN.htm The idea is to have a #left navigation bar which is absolutely positioned and which contains a series of vertical placed unordered lists of links. To the right of the #left navigation bar is the #content section. I want the background in the #left section to extend to the bottom of the browser window.
4
4096
by: Franklin | last post by:
WITHOUT KNOWING ANYTHING ABOUT THE CURRENT COLORS, I want to swap the foreground/background colors of a link when someone hovers over it. Is this possible with HTML, CSS, DOM, & JavaScript? If so, how? See my HTML below (or go to my test page at http://fmbbowen.com:39353/misc/Misc.html). I also tried treating ..color as a number and subtracting the current color from 0xFFFFFF but that did not work either. The numerous examples I...
8
1988
by: johkar | last post by:
I have two problems I cannot work out in the following tab code with Netscape 6. Problems are marked with all cap comments. One is that the background image is not shown in NS 6 (two places in CSS). The second problem is that the top right rounded corner is not showing up in the Tier 2 tabs. Could you have a look and tell me if it is possible to correct? This code seems to work fine in IE 5+ and Firefox. Note that since I can't post...
2
4539
by: chris_culley | last post by:
Hi there, I've got a gif with (highly) irregular shapes (lots of jigsaw pieces) that I want to map so that each piece is a link... The pieces are currently just a frame drawing, but as they are hovered over I want them to be coloured in. I thought the easiest way to do this would be to change the background image of the entire map (since it's a bit of a pain trying to select each piece out of the image and
2
2616
by: mdejac | last post by:
I was wondering why the background color is not showing up in Mozilla. When I view the page there is a light blue background, when it should be black. Thank you for any help. http://www.myspace.com/mdejac <style type="text/css"> body { font-family: helvetica, arial, sans-serif; font-size: 62.5%; background-color: black; } table, td {
16
4930
by: stevedude | last post by:
CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of "background" or "background-image", the positioning only works with specifying pixels. If I specify the vertical position in pixels, the image gets cut-off at the bottom. I don't know what to do and would appreciate anyone's help. Specifically the code...
10
5754
by: VividWeb | last post by:
Hi. I am relatively new to CSS and HTML but have a basic understanding of most things. One of my backgrounds is not positioning correctly in IE 7 or AOL. The background behind the content (small chocolate area) is positioning slightly down the page instead of at the top. I have used the same techniques in the navigation and it positions fine. Its fine in Fire Fox Opera & Safari. I have run my HTML & CSS through W3c and all is clean. ...
0
8687
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8615
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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9034
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
7750
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 launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6534
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5874
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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4376
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3057
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2009
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.