Hello. I've been teaching myself CSS with the help of some books, and
I've come across a Firefox problem. From what I've read, it's not
actually a problem, it's FF following the specifications, but it still
bothers me. If you go to
http://www.mexicometro.org/en/line3/indios_verdes/gmap.html , in the
right-hand navigation box, you'll see several icons and links. If you
look at my CSS (sorry if it's messy, I'm learning and experimenting,
and will clean it up soon), you'll see that I've had to drop my icons
4px so that the link underline will be hidden beneath the icon on a
hover over the link. Otherwise, the icon images are also underlined on
hover, as they are part of the link. This -4px movement solution was
found here: http://discuss.joelonsoftware.com/default.asp?joel.3.116512.17
(they have it as -1px, but I found -4px suited my images better), but
I was wondering if there was a more elegant solution. Granted, this
solution is much better than adding wrappers, etc etc, but I'd still
like to be able to do something like this:
a img {text-decoration:none}
I know that this can't be done, but something close to that would be wonderful.
BTW, please ignore the gawdy colors, messy code and layout errors. I'm
still learning, and will put things through different validators once
I feel comfortable that things are as I like them.
THanks! |
Request for Question Clarification by
eiffel-ga
on
13 Jul 2006 03:06 PDT
Hi richardmtl-ga,
The first link you quoted briefly mentions the "obvious" solution
which is to define an additional anchor class (e.g. <a
class="imagelink"...>) and to style this so that it has no underline.
Then, you split your hyperlinks into two. Use <a class="imagelink"...>
for your image hyperlinks, and a simple <a...> for your others.
This solution "goes with the flow" of CSS. If you want to apply two
different kinds of styling, you use two separate hyperlinks of
different classes. And if you have two separate hyperlinks, it's
natural that they should "light up" independently on hover.
Would a solution along these lines be acceptable to you?
Regards,
eiffel-ga
|
Clarification of Question by
richardmtl-ga
on
13 Jul 2006 06:08 PDT
Hi eiffel,
Thanks for the try, but that solution isn't what I'm looking for. I
apologize if my original question wasn't perfectly clear; I was tired
and falling asleep when I wrote it. In fact, I want to keep the
underline on hover on the text, just not on the image. This is the
behaviour in IE (for once, IE does something well, even if it's
against the WC3 recommendations), and it's what I'd like to see in FF
(haven't tried in Opera yet, hopefully that won't give me even more
problems).
I played with two other possible solutions before applying my -4px solution.
1) I tried putting the images in another <a> {display: block;} just to
the left of the text. Problem with this: I don't know how to make the
:hover effect (background-color change) affect both <a> blocks, the
img block and the text block, at the same time, independantly of which
<a> block is being hovered.
2) I put the icons as background-image in the block, to the left and
with proper padding, no-repeat. They were referenced within the
original <a> tag, with the style in each tag (ex: <a
style="background-image (or is it URL???):image.jpg etc">link</a>.
Problem: the background-color change on :hover didn't appear. It
seemed like the style in the <a> tag took precedence over what was
specified in the stylesheet. Oh, and just to clarify a bit more, the
logos are currently all the same, but in fact, they will all be
different (I was just too lazy to put the different ones in when I was
playing with it at the time).
So, I hope that this clarification helps, and I apologize if I am not
being 100% explicit in the code I used in my above examples. As I
said, I'm still learning, and so I made those changes and then erased
them when I saw that they didn't do what I wanted, and I'm not yet
fluent enough in CSS to be able to reproduce what I did with any
accuracy right now.
BTW, what about my liquid header at the top? Pretty neat, eh? I'd like
to thank the CSS Zen garden for my inspiration in doing that. I
haven't seen any other liquid designs of that sort using a center
image like I did, though. Is there any particular reason why not? Some
compatibility issue somewhere?
Thanks!!
|
Clarification of Question by
richardmtl-ga
on
13 Jul 2006 06:25 PDT
Hi again, just another quick clarification.
I do not want a solution that calls for me creating an image file that
is the width of the block, with the icon and the wanted background
color, that I can call on :hover, because that will be too much work
(I have a couple of hundred different icons), and I want to be able to
control the background color purely by CSS.
I know this makes it a bit more complicated, and maybe even
impossible, but I hope someone can find a solution! Otherwise, I'll
stick with my -4px position of my icons.
Thanks!
|
Request for Question Clarification by
eiffel-ga
on
14 Jul 2006 01:32 PDT
Hi richardmtl-ga,
I think your -4 pixel shift is the most practical way to meet your
specific requirements without getting into a ridiculously complicated
solution.
The liquid centered heading is great! I love liquid layouts.
Regards,
eiffel-ga
|
Clarification of Question by
richardmtl-ga
on
14 Jul 2006 05:44 PDT
Ok, thanks for trying anyways!
Is there no way to have a :hover effect "bleed" into a neighboring <a>
block (as I tried to do in my attempt #1 above)?
Thanks again!
|
