Is this css okay?

[jvanree]

Hi,

I have all links set to underline in my stylesheet, but I don't want to have the images underlined (this is on a testdrive store, locally hosted, so I have no link, I'm sorry)

I just wanted to ask if I can use the following css code to prevent underlining of images:

img, a:link img, a:visited img, a:hover img, a:active img {
text-decoration: none !important;
border: none !important;
}

If this is the right code should I put it right after the first part of the stylesheet, or somewhere else?

And if it's not the right code, do you know a good one?

Thank you in advance!

Juliet van Ree

[kuroi]

This would over-ride underlining for most image links and should deal with all the ones you currently have on your site, wherever you put it in the stylesheet (other than in the middle of another set of styles).

However, it's conceivable that other links could creep in if their styles are defined in a more specific way. For example: "#navEZPagesTOC ul li a:hover" is more specific than "a:hover img" and could receive higher priority in some or all browsers if you popped images inside those links.

These are extreme cases though, to be dealt with only if they actually occur.

[jvanree]

Thank you very much Kuroi!

[jvanree]

Well I added the whole css code, and it's fine in ie but firefox still sees reason to underline my images. I've browsed the forum a bit and saw the vertical align middle solution, tried that one out, but since I have transparent png's for images I was stuck with a line trough instead of underline. So I took that one out again. Does anybody know a solution to this firefox specific problem?

[kuroi]

Do you have a specific example, as I can't find any on your site!

[jvanree]

I'm sorry Kuroi... it's not on my main sites... just a side project.. I've put it online, you can view it here http://hamster.julietvanree.com It is a zc, but will serve as a cms. It's completely in dutch, but luckely it;s only about the pictures...lol.

[kuroi]

Sorry, you did explain that it was a local site in your original post.

I'm afraid that the news is not what you're looking for. There is not an easy way to take the underlining of the those images where it occurs without also taking it off the text.

The reason for this is that there is a single A tag wrapped around both the image and text beneath it, and the underlining applies to the A tag and not to the image. Unfortunately there is no way of applying it to just a part of the A tag.

You are seeing different outcomes in different browsers because they have different views as to what the bottom of the A tag is. Some see it as a box and just underline the bottom, others see it as a series of elements and underline the bottom of each of them (i.e. what Firefox is doing).

This problem isn't obvious in a default install of Zen Cart as underlining is turned off and hovers use a change of text color which only affects the text part of the link.

The most comprehensive solution (and that one that I usually end up doing) is to dig back into the code and separate the two parts of the link into separate A tags, each of which can then be given their own styling.

If it's any consolation, I have been assured that this will no longer be necessary in Zen Cart 2.0.

[jvanree]

Kuroi, thank you very much for your answer! From what I read I've heard ZC 2.0 is due to be released in Beta in just days from now, so I think I'm not going to bother digging trough all the code. Since this website is just a cms for my hobby hamster breeding it will be an excellent place for me to test the new version of zc, so I'll just wait for that one.

Thank you again for all your help!

BTW... I never talk about my hamsters here... because hamsters and zc... well weird combination. But every time I run into your name somewhere I have to smile because I have a little Kuroi here... this is her picture:

[kuroi]

LOL.

She's cute. But I'll have to keep the picture away from my daughter. Hamsters are a hot topic at the moment!

[rstevenson]

I've always wondered what Kuroi looked like.

Rob

OMG!! This is post 1000!