Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
Like Tree1Likes
  • 1 Post By Fireproofgfx

Thread: links dotted underline when hover HELP!

  1. #1
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times

    links dotted underline when hover HELP!

    this is normally simple enough but WOW its driving me nuts lol

    I have a few links id like to style in a set way. but basically i want them to have no underline at all until you hover over them...

    Magician in Grimsby - James Kirman Magician

    the email address and facebook pages are links and should have a dotted grey underline when you put your cursor over them.. but nope

    the same is happening on the links on my footer...

    please help.

    oh and the weird thing is they work when i press F12 for preview via dreamweaver

    thanks again
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Your links are working just fine online, I've checked in firefox and chrome, don't worry
    If not working when test, try to delete cache or refresh page with ctrl+r or ctrl+F5. This should load fresh content.
    Next time you are asking please give more details. In what browser not working or so...

    P.S.
    I can see you've implemented 'highlight' class in menu

    EDIT:
    If problem persist, maybe css style for hover is somewhere overwritten by another class. To fix that put absolute path to your a tag, or !important, although I don't like !important at all. So, something like:
    .footerlinks a.footernav:hover { ... }
    or
    .bigwelcomelinks:hover {
    border-bottom: 2px dotted #666666 !important;
    ...
    }
    this will force the style. And don't forget to clear the browser cache or force reloading bye ctrl+R....
    Last edited by sasha_bolcina; Sep 09th, 2014 at 04:31 PM.

  4. #3
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    its not working in ie...

    its confusing the hell out of me lol
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  5. #4
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    839
    Member #
    31498
    Liked
    171 times
    Hmmm it works fine in Chrome, but I see, it is wrong in IE, which most things are lol. At first I noticed your footer links were written using <A href> instead of <a href> and I thought maybe IE might have picked up on that but that is not the case since the other links were done with the lower case a.

    I found the issue though


    This is your current code:

    .footernav:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom:#FFFFFF dashed 1px; letter-spacing:2px;
    }

    This is what you need:

    .footernav:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration-style:dotted; (double, wavy, dashed)
    border-bottom:#FFFFFF dashed 1px; letter-spacing:2px;
    }


    For a better understanding check out text-decoration | CSS-Tricks

    Let me know if this works for you!
    Last edited by Fireproofgfx; Sep 09th, 2014 at 06:40 PM.
    sasha_bolcina likes this.

  6. #5
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Older versions of IE have problems with "hover" on everything else than "a" tag.
    If suggestion of Fireproofgfx not help, try to implement hover on a directly, like:
    .emailbig a:hover { ... }
    .fbbig a:hover {...} and
    .footerlinks a:hover { ... }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com