SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict jamesglewisf's Avatar
    Join Date
    Sep 2000
    Location
    Big D
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover Links and Macintoshes

    Is there something about using a a style sheet to create hover links that doesn't work with a Mac?

    My hoverlinks work great on PCs, but on my graphic designer's Mac they don't work properly.

    Basically, the hover aspect doesn't work except on visited links. In other words, an unvisited blue link stays blue (instead of turning red) when hovered, but a visited purple link turns red when hovered.

    I've attached the CSS file. A sample page is http://findalink.net/links/50best.php.

    Thanks for the help.
    Jim Lewis
    To BE or Not to BE, or: How I Learned to Stop Worrying and Love the Barium Enema
    FrappyDoo Forums

  2. #2
    SitePoint Addict jamesglewisf's Avatar
    Join Date
    Sep 2000
    Location
    Big D
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think I can attach my file, so here is the linkstyle.css code.
    Code:
    #all A:active {
      COLOR: #000080 ; 
      font-size: 10pt ;
      font-weight: bold ;
      font-family: "Arial, Helvetica" ;
      line-height: 14pt ;
      text-decoration: none
    }
    #all A:visited {
      COLOR: #990099 ;
      font-weight: bold ;
      font-size: 10pt ;
      font-family: "Arial, Helvetica";
      line-height: 14pt ;
      text-decoration: none
    }
    #all A:hover {
      cursor: hand;
      COLOR: #ff0000;
      font-weight: bold ;
      font-size: 10pt ;
      font-family: "Arial, Helvetica";
      line-height: 14pt ;
      text-decoration: none
    }
    #all A:link {
      COLOR: #000080;
      font-weight: bold ;
      font-size: 10pt ;
      font-family: "Arial, Helvetica";
      line-height: 14pt ;
      text-decoration: none
    }
    Jim Lewis
    To BE or Not to BE, or: How I Learned to Stop Worrying and Love the Barium Enema
    FrappyDoo Forums

  3. #3
    SitePoint Addict jamesglewisf's Avatar
    Join Date
    Sep 2000
    Location
    Big D
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, he has a Mac with OS9 and Internet Explorer 5.0 or 5.1.
    Jim Lewis
    To BE or Not to BE, or: How I Learned to Stop Worrying and Love the Barium Enema
    FrappyDoo Forums

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't go right through the html and css, but from what I did see, I'd say the code is a mess. Sorry.

    The short answer...

    The problem isn't actually with the Mac, but with your code.
    Put the a:link attributes at the top of each set.

    IE Mac is very fussy about its code. It is very unforgiving of non-compliant code.

    Believe it or not, this is a good thing.
    It forces web-designers (amateur and professional) to write standard-compliant code which is good for the long-term health of the web.

    The 'correct' order for the link attributes to go in is a:link, a:visited, a:hover, a:active.

    See W3Schools / CSS Pseudo-classes for more info.


    The long answer...

    Your code is using a lot of redundant methods (such as giving the body tag an id and giving a tags a css hand/pointer cursor) and there are some bad practices in there too.

    There is only one body so there is no need to give it an id so it has a unique name.
    You can simply refer to it in the CSS as body.


    Also, seeing as you're specifying the pseudo-classes, you don't need to 'attach' them to the body

    Code:
    a:link {
      color: #000080;
      font-size: 10pt ;
      font-weight: bold ;
      font-family: Arial, Helvetica;
      line-height: 14pt ;
      text-decoration: none
    }
    a:visited {
      color: #990099 ;
    }
    a:hover {
      color: #ff0000;
    }
    You only need to list those elements in the :visited, :hover and :active that differ from the :link.
    In your case you do not need to define the :active at all as it is identical to the :link.

    ---

    Font-family:
    Quotes are only needed to define fonts with names that are more than one word.
    Code:
    font-family: arial, "lucida console", sans-serif
    ---

    Your CSS file cleaned up looks like this...
    Code:
    .thtcolor {
    color: #ff0
    }
    
    .dt {
    font-weight: bold ; 
    color: indigo ;
    font-family: Arial, Helvetica ;
    font-size: 12pt
    }
    
    .dd {
    margin-left: 30px
    }
    
    h {
    color: midnightblue
    }
    
    a:link {
    color: #000080 ;
    font-size: 10pt ;
    font-weight: bold ;
    font-family: Arial, Helvetica ;
    line-height: 14pt ;
    text-decoration: none
    }
    a:visited {
    color: #909
    }
    a:hover {
    color: #f00
    }
    
    
    #cat A:link {
    color: #fff
    }
    
    
    #side a:link {
    color: #000080
    }
    #side a:hover {
    color: #f00
    }
    ---

    There are also mistakes in the html itself.

    Code:
    <meta name="description" content="The Internet's 50 best sites according to FindaLink.net."
    ">
    Notice the extra double-quote at the end. Get rid of that and bring the > back upto the end of the line it belongs.

    There are possib;y more, but as I said, I didn;t go through the html too deeply.

    I may be the first person to say this to you (but, I seriously doubt that I'll be the last) but you should consider familiarising yourself with hand-coding *or* using another wysiwyg editor.
    FrontPage has a very bad reputation for making bad and messy code.

    It is not a good piece of software to rely on while building your skills.

    Just a thought.

    ---

    Anyway, fixing the running order of the CSS a:links, etc... will fix the problem you are having.

    Hope this helps
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Addict jamesglewisf's Avatar
    Join Date
    Sep 2000
    Location
    Big D
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. I don't use FP anymore. I switched to dreamweaver and code mostly by hand. I just haven't had time to clean everything up.
    Jim Lewis
    To BE or Not to BE, or: How I Learned to Stop Worrying and Love the Barium Enema
    FrappyDoo Forums

  6. #6
    SitePoint Addict jamesglewisf's Avatar
    Join Date
    Sep 2000
    Location
    Big D
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried using your version of the cleaned up css. When I did, the visited links ended up Times Roman, non-bold, and underlined in IE 6.0.
    Jim Lewis
    To BE or Not to BE, or: How I Learned to Stop Worrying and Love the Barium Enema
    FrappyDoo Forums

  7. #7
    SitePoint Addict jamesglewisf's Avatar
    Join Date
    Sep 2000
    Location
    Big D
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't talked to my Mac user yet, so I don't know if that cleared it up for me. I'll let you know.

    Thanks.
    Jim Lewis
    To BE or Not to BE, or: How I Learned to Stop Worrying and Love the Barium Enema
    FrappyDoo Forums

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by jamesglewisf
    I tried using your version of the cleaned up css. When I did, the visited links ended up Times Roman, non-bold, and underlined in IE 6.0.
    I can see no reason why IE6 would be doing that.

    The CSS is correct.

    It's working fine and dandy for me on Mac IE5 (a good measure of good code)

    Try changing the a:visited declaration to...

    Code:
    a:visited {
    color: #909 ;
    font-family: Arial, Helvetica, sans-serif ;
    font-size: 10pt ;
    font-weight: bold ;
    line-height: 14pt ;
    text-decoration: none ;
    }
    and adding...

    Code:
    #side a:visited {
    color: #000080 ;
    }
    ...to the second set.


    It really shouldn't need it at all, but try it and let me know if it works for IE6 PC.

    It should still only change those aspects that differ from the declaration in the a:link.

    Doubling up and repeating it in the a:visited might just 'remind' IE6 how it should handle visited links.


    As I said, it works fine on Mac IE5.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

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