I have a nested table with around 5 jpegs and href's. Whenever I do a mouse over on these images you will see the effects of the a:hover pseduo-class on the lower section of the images. How can I fix this issue in Firefox? IE works fine. By the way, I'm a newbie. Have mercy!
Um... What you could do is set up different styles for image links like this... a:link.my_images { text-decoration : none; } And then in the image in your table... <a href = "" class = "my_images"><img src = "" /></a> BTW, you should probably learn how to use DIVs. To say it one way, tables are generally frowned upon.
As BushMackel suggested, you should create a separate class for these anchors, in addition to your existing anchors. Also note that "background-color: none;" is not valid coding! You should use "background-color: transparent;" or omit the background-color property. The use of the border property is also redundant and can be omitted. I strongly suggest you to use the excellent and free CSS Validation Service from the W3C to validate you CSS coding and I suggest to use the colour chart provided by W3Schools. Personally, I think that changing both the underlining and the background-colour upon hovering your mouse over a hyperlink is overdone. In short: a:link { color: #0000FF; background-color: transparent; text-decoration: none; } a.my_images:link { color: #FF0000; background-color: transparent; text-decoration: none; } a:visited { color: #0000FF; background-color: transparent; text-decoration: none; } a:hover { color: #FFFFFF; background-color: #1C2A10; text-decoration: underline; } Code (markup): BTW, do realise that it's an issue (one of many) in Internet Explorer, not Firefox!
First off, your code should look more like this You don't need those other rules in there Also, don't use color:white etc as AFAIK Safari doesn't support them, though I may be wrong. You don't need to state a:link and a:hover have no Bg color as they don't have one to start with. You can combine css rules that are the same by using a comma and then listing the other tag. You shouldn't use <img> for naviagtion either you should use the CSS property of background-image as the image has no actual relevance to the site other than layout. Finally, I'm not quite sure what you mean Send me a link and i'll have a quick peek.
You can even make your code simpler: /* This sets all anchor pseudo-classes to the same thing */ a{ color: blue; text-decoration: none; } /* This overrides the anchor hover pseudo-class */ a:hover { color: white; background-color: #1c2a10; text-decoration: underline; }
You could but a:link and a:visited are the proper semantic ways to describe the links. I didn't think of that as I learned to always use a:link etc . Aha, i got a better one: You don't need to set the colour to blue as that's it's default. I win, where's my free chocolate?
LawnchairLarry, Thanks for the help, I really appreciate it. I would also like to thank everyone else. Although I have an IT background, I just started studying HTML and CSS. I just finished a Sitepoint and Head First Labs book. The CSS validator has helped, I was able to correct the CSS mistakes. I plan on using a CSS-based design on my next project. For some odd reason, my company's SEO consultant really isn't into CSS. Consequently, I used a table-based layout for my site. It's only 31 pages, do you think I should redesign it in CSS? Nesting tables is a royal pain in the ass.
This works as well.... a { color: #0000FF; text-decoration: none; } /*This overrides the anchor hover pseudo-class*/ a:hover { color: #FFFFFF; background-color: #1c2a10; text-decoration: underline; } /*This fixes my images on the index page in Firefox*/ a.nav_img { background-color: #FFFFFF; } Code (markup): I may take Lawnchair's advice and 86 background-color in a:hover.