SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot pony's Avatar
    Join Date
    Jul 2000
    Location
    Scotland
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    am I unwittingly working for different browsers

    The following style sheet is partly inherited from some content I'm working on and partly worked out from tidying up that content to be XHTML(transitional) and CSS2 compliant.
    As you can see the link colours are defined three times over. This part is inherited. Is this a waste of space or do these three style definitions catch anomalies in how certain browsers render style sheets?

    <style type="text/css" xml:space="preserve">
    A:link {
    color : #aa0000;
    text-decoration : none;
    }
    A:visited {
    color : #a86d6d;
    text-decoration : none;
    }
    A:active {
    color : #aa0000;
    text-decoration : none;
    }
    A:hover {
    color : #000000;
    text-decoration : underline;
    }
    .introtext {
    letter-spacing : 0.03em;
    line-height : 11pt;
    text-align : justify;
    }
    .maintext {
    text-align : justify;
    }
    A.onlink {
    color : #aa0000;
    text-decoration : none;
    }
    A.onlink:link {
    color : #aa0000;
    text-decoration : none;
    }
    A.onlink:visited {
    color : #a86d6d;
    text-decoration : none;
    }
    A.onlink:active {
    color : #aa0000;
    text-decoration : none;
    }
    A.onlink:hover {
    color : #000000;
    text-decoration : underline;
    }
    body {
    background-color : #ffffff;
    color : #000000;
    font-family : arial, helvetica, sans-serif;
    }
    :link {
    color : #aa0000;
    }
    :visited {
    color : #a86d6d;
    }
    :active {
    color : #aa0000;
    }
    </style>
    the bottoms of my shoes are clean from walking in the rain

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pony...

    the first ones:
    a:link
    a:visited

    are the default link styles. These settings get applied to any HREF tag that is unassigned (more on that in a second). So this:

    <a href="somelink.html">these words</a>

    if unclicked-on would be the color "aa0000" and so on.

    These:
    a.onlink:link

    Are what is called a "pseudo-class". It is basically a way to get extra link colors out of the browser display. The way they work is to "assign" them like so:

    <a href="sometext.html" class="onlink">this word</a>

    and then this link, if unclicked, would be another color.

    However, the person that created these styles did not implement them correctly. They are using the same colors as the normal links which defeats the purpose of the pseudo-class in the first place.

    A good implementation would be to have:

    1) A normal body link which is the same size as your page text, but you set the colors.

    2) A footer link style which sets your font size to smaller than body text.

    3) A "sidebar" link style which is maybve over a color other than your default page color. Thus you can change the colors because the sidebar is darker than your page background.

    folow me?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Zealot pony's Avatar
    Join Date
    Jul 2000
    Location
    Scotland
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup, totally.
    I was just trying to surmise that the person who wrote these styles was using the pseudo classes to get around some browser anomaly I'm unaware of.
    However, Creole, I reckon you're spot on that it's just bad coding - so, I've decided to get rid of the unecessary pseudo classes.
    The extra link styles that come straight after the 'body' style are, oops my fault, from the code tidier I'm using chucking link colours defined in the body tag, of the original file, up into the style sheet.
    the bottoms of my shoes are clean from walking in the rain

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the FIRST thing that I would do would be to do a find through every page of my site to see if onlin is being used anywhere...if it is, then you could safely remove it because it is the same as the default style.

    One thing to point out, the pseudo classes don't work with Netscape. If you create one, it will display the standard "link" color for the piece of text, but nothing else.

    For example:

    a.footer:link {color: green; }
    a.footer:visited {color: red; }

    <a href="christmas.html" class="footer">Merry Christmas</a>

    Netscape would always display the words Merry Christmas in green, no matter what.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Zealot pony's Avatar
    Join Date
    Jul 2000
    Location
    Scotland
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup done that - ah the joys of EditPlus.
    Yeah, the netscape thing is annoying but acceptable - doesn't really effect the functionality of the pages - just takes away the extra usability of changing link colours.
    Is this still in effect with NS6?
    the bottoms of my shoes are clean from walking in the rain


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
  •