#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Lithuania
    Posts
    192
    Rep Power
    14

    Angry CSS and HTML driving me nuts!


    Grrrr, css is such an easy thing and stuff, but it just won't work, it's so damn weird...
    here's my css:
    Code:
    a { text-decoration: none; color: #000000; }
    
    a:link { text-decoration: none; color: #999999; }
    
    a:hover { text-decoration: underline; color: #999999; }
    according to that file, all links should be colored in #999999 and not underlined, italic or bold. When you hover it, it underlines. the color is still the same, though.

    BUT when I upload this:

    Code:
    <a href="<? echo"$PHP_SELF?function=unimog";?>"><font face="Verdana" size="1">UNIMOG</font></a>
    and look at it, the text is black and when you go over the link, it gets #999999 and underlined, just as it should be, now why is it black and not #999999 when you are not over it?

    AND when I make images as links, they get a fat big purple border as well...uhhh...it's so ugly. And I can't fix it, i just don't get what could be wrong...please help me
    Last edited by Justas G; July 31st, 2001 at 06:20 PM.
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    CT, USA
    Posts
    7
    Rep Power
    0

    Cool Give this a shot


    Hi, Justas

    Give this a shot it may work for you.

    For the images as anchors make sure you specify border=0 in your img tag. That one has gotten me a number of times. I forget to define the border and I get that ugly purple border.

    For the text link problem try placing your font tags outside of the anchor tag. When the browser sees the font tag inside the anchor tag it may decide to display the text in the pages default font color.

    Hope that helps!
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Lithuania
    Posts
    192
    Rep Power
    14
    Thanks man

    the images are fixed, but the text link still doesn't work...
    Code:
    <font color="#999999" face="Verdana" size="1"><a href="<? echo"$PHP_SELF?function=unimog";?>">UNIMOG</a></font>
    Ás you can see the font tag is outside, but it still doesn't change
    I even removed the whole font tag, but the link still was black and only changed the color when going over it...Got any more tips?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    New York
    Posts
    122
    Rep Power
    14
    Justas:

    I don't see any problem with your css when I cut and paste to a html doc and test. I did remove some of your whitespace though.

    Just a small comment regarding the code snippet you included. Why are you mixing CSS and <font> tags? There's really no reason to do it. I'm a professional developer and I haven't used a <font> tag in a couple of years. Most of our clients specify that we don't use things like <font>, <b>, <i>, etc. While they're still supported by most browsers, the are DEPRECATED - so I would suggest a 100% CSS approach to text styling.

    Your css definition for <a> tags could be:

    a {font-family:verdana;font-size:10pt;text-decoration:none;color:#000000;}

    You can also define custom classes using the .classname syntax:

    .cust_links {font-family:verdana;font-size:20pt;text-decoration:none;color:#000000;}
    or
    a.cust_links {font-family:verdana;font-size:20pt;text-decoration:none;color:#000000;}

    And you can associate style definitions with the #elementid syntax

    #custom_style {font-family:verdana;font-size:20pt;text-decoration:none;color:#000000;}

    <a id="custom_style">...</a>


    Just a suggestion.
    Last edited by szarecor; July 31st, 2001 at 07:06 PM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Lithuania
    Posts
    192
    Rep Power
    14
    Yeah I know about this 100% way, but since I'm doing a very small site, I thought I'll just do a css for the links...btw, I just changed a. { color: #000000; } to #999999 and now the links are grey, lol, this doesn't make snese does it?
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    CT, USA
    Posts
    7
    Rep Power
    0

    Post Seems to work for me


    Hi again.

    I made a style sheet, and a quick test php page, and it seems to work for me. That is if I have this correct -- the link should always be grey, and underlined only upon mouseOver?

    Here is the style sheet I used:

    named test.css

    a { text-decoration: none; color: #000000; }

    a:link { text-decoration: none; color: #999999; }

    a:hover { text-decoration: underline; color: #999999; }


    Here is my test php script. Named linkTest.php3

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <link rel="stylesheet" href="test.css">
    </head>

    <body>
    Here is some text.<br><br>

    Next comes a link:<br><br>

    <font color="#999999" face="Verdana" size="1"><a href="<? echo"$PHP_SELF?function=unimog";?>">UNIMOG</a></font>



    </body>
    </html>

    Good luck!
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Posts
    2
    Rep Power
    0
    try taking out the

    a { text-decoration: none; color: #000000; }

    line, cuz a:link should take care of it.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Posts
    63
    Rep Power
    15
    starvingartist is correct. The a style is overiding the a:link one which is why it appears black.

    Here's something from the W3C:

    Code:
    A:link    { color: red }    /* unvisited links */
    A:visited { color: blue }   /* visited links   */
    A:hover   { color: yellow } /* user hovers     */
    A:active  { color: lime }   /* active links    */
    Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Lithuania
    Posts
    192
    Rep Power
    14

    Smile


    Hey cool, it works now I pasted and edited the W3C code and it works now, woohoo!
    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo