ThemeShaper Forums » Thematic

[closed]

CSS mystery shock! (Even after firebug inspection!)

(4 posts)
  • Started 7 years ago by proto
  • Latest reply from proto
  • This topic is resolved
  1. proto
    Member

    Hello all,

    I've very reluctantly come here as I'm having a problem with Firefox and my Thematic Child Theme. I've repeatedly used Firebug to find the problem and have come on here as a last resort. When I hover over an image an underline appears in firefox.

    To remove this I've used the following in my child theme style.css file, as well as targeting the ID of the div and adding a img:hover but to no avail:

    a img:hover {text-decoration: none; opacity: 0.5; border: none; border-style: none;}

    I believe "text-decoration: none;" is the key here to remove this? I have inspected it with firebug and here's the mystery, a img:hover appears but it's does not include my "text-decoration" none but it DOES include the opacity reference in firebug. I have looked to see if it's being 'overruled' or inherited from somewhere else and could not see it being overruled or anything! All my other child theme styles are taking precedence anyway - why would this one be different I ask myself!?

    Please take a look in Firefox and help me solve this CSS mystery! Here's my website to look at in Firefox:

    https://www.universalonewebdesign.com/bespoke-design-three/

    Thank you very much - it's driving me mad! :)

    Posted 7 years ago #
  2. It isn't a border issue, so you can delete all that.

    The line you see is caused by the background showing through, there is no height and width on the a element which is causing it.

    try

    #fitness a { display: block; }
    Posted 7 years ago #
  3. proto
    Member

    ScottNix,

    Thanks a lot. As soon as I set it to

    display: block;

    As per your kind suggestion. When I hover over them now they all slightly move, please see the homepage here:

    https://www.universalonewebdesign.com/bespoke-design-three/

    Any ideas as to what's causing this?

    Thanks so much ScottNix, Happy New Year - and thank you!

    I tried just adding a height and width to the #fitness a and #fitness as per your helpful logic but it didn't work!

    Posted 7 years ago #
  4. proto
    Member

    Hello ScottNix,

    I've worked out the problem! I added "border: none;" to #fitness a like so and it worked a treat!

    #fitness a {display: block; border:none;}

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.