Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Issue with links on my pages...Help!

    Hi all,

    I have a problem with my links on my pages: www.caffevinci.com

    They're appearing as an underline but I only want them to have an underline when the mouse hovers over them. And I don't want them to change at all once they've already been selected (e.g. I don't want them changing to a different colour)

    The other problem is, I have different links at the bottom of the page which I want styled differently. In Firefox they are working fine but in IE they are changing to a blue colour once selected.

    Please help!

    Here is my style sheet: http://www.caffevinci.com/stylesheet.css

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    They're appearing as an underline but I only want them to have an underline when the mouse hovers over them. And I don't want them to change at all once they've already been selected (e.g. I don't want them changing to a different colour)
    You may define specific rules using the anchor pseudo classes, refer http://www.w3schools.com/CSS/css_pseudo_classes.asp
    The other problem is, I have different links at the bottom of the page which I want styled differently. In Firefox they are working fine but in IE they are changing to a blue colour once selected.
    IE requires the anchor pseudo classes in the order link, visited, hover, active (LoVe-HAte). So, we need to add them in order in our CSS, even though some of them do not contain any specific css properties.
    Last edited by abduraooft; 11-20-2009 at 01:28 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    How do I link "Home" and "Resources" at the top of the page without making their font size/color change (I'd only want it to change to the red colour on rollover)? http://www.caffevinci.com/links_hotels.html

    This is the code:

    Code:
    .cssDivNavigations_StorePage {
    width: 800px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom-style: solid;
    border-bottom-color: #BF0D0D;
    border-bottom-width: 1px;
    vertical-align: top;
    text-align: left;
    line-height: 14px;
    font-family: "Times New Roman",Times,serif;
    font-size: 10px;
    font-weight: bold;
    color: #000000;
    }
    Last edited by grahamy84; 11-20-2009 at 02:10 PM.

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    The link abduraooft gave you has the answer. Use :hover.
    Are you a Help Vampire?

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    The link abduraooft gave you has the answer. Use :hover.
    Do I just insert it into the CSS above?

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Read the page abduraooft gave you and try the demo there. This is something that you should learn and it won't take you long to understand it.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •