It uses a background color, so the text is getting highlighted when moving the mouse over.
So far, so good. Unfortunately when previewing my webpage in latest IE, also images acting as links have a light shadow.
As soon as having two images one above the other, the appearing shadow moves the bottom picture a few pixels down, which destroys my layout.
Beside removing a background color, I haven’t found a way to work around this. So maybe someone has faced with this problem earlier and found a solution where it was possible to keep the hover background colour ?
It should be worth a try. One of my attempts was to use a “textlink style” action applied to the HTML container that holds the images. But this failed.
Not sure if just disabling borders for images works (in my mind this differs from that kind of shadows I experience), but I’ll check it out and let you know here.
Your a:hover example will effectively add that style to all links on the page. Adding a .class or a #selector tag before the a: will allow you to more specifically target the items you want to style.
a img {
background-color: transparent !important;
}
Input it like atelier said, only instead of ‘border’ put in ‘background-color’ in the name field and give it a value of ‘transparent !important’
You’re probably thinking that “why don’t you you just select background color from the little plus icon and give it a value of none?” Well, I’m not sure it would force the image to have no background color but by adding the !important to the end it’ll make sure of it.
Yes, IE 8 (I said “latest”, because I’m unsure about the sub version or release level on the computer I tested it).
Please find a sample at this URL:
Here’s how to reproduce the error:
Click at the top button to get a row of five buttons below.
Now move the mouse pointer over these buttons and you will see that the associated rollover images will change as well.
On IE however you will see that the yellow shadow around the buttons makes the rollover items to move down a few pixels.
@chuckamuck: On the real page there are too many items placed, so introducing a new class would lead to a high work load, so if that would be the only option, I would simply remove the background color from a:hover.
What I can see, Todd has removed all “a:…” entries from style sheets and instead used “#…” ones to limit the custom text link styles being used by elements with the matching ID only.
However I see a difference in text size comparing his page with mine, which could be a problem. Especially because the original page uses a lot more text formats.
Anyway, I give it a closer look… so next question right away: How can I prevent FW to include the “a:…” entries in CSS ? It seems that they are always there regardless what I defined.
Checked with IE8 and as far as I can tell it works fine.
So what did you do Todd?
I defined the dimensions of the graphic button “a” links by adding
this style:
#SubMenu2Content a img { width: 140px; height: 35px; }
Tobias is correct in that I deleted all the default link styles. This
is probably not necessary and my example may very well work with or
without them. Of the quick glance I took at the CSS there seemed to be
a fair amount of redundancy regarding various link style properties.
If I had more time I would have cleaned it up and (possibly) found the
cause of the original problem.
In any case, when using graphic buttons I always define the dimensions.
fair amount of redundancy regarding various link style properties
Thanks to Freeway. I left managing the CSS styles to FW in the hope that it will clean them automatically when necessary.
Anyway, thank you very much for your help and comments. I’ll check this out and try to apply your solution. So far it seems the only method that allows me to keep the background color.