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 7 of 7

Thread: border-hover

  1. #1
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts

    border-hover

    Look at my code. Not sure wheter correct.
    Code:
    <style>
    a:link,a:visited {color:blue}
    a:hover {border:1px dotted;color:green}
    </style>
    ALWAYS remember to validate your code

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    W3C CSS Validator Results for file://localhost/TextArea
    No error or warning found
    it should be ok

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    While there are no CSS errors, that code does contain an (X)HTML error. The style element requires a type attribute. Example:

    Code:
    <style type="text/css">
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    That should work though you should also specify a color for the border.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    a:link,a:visited {
    color:blue;
    }
    a:hover {
    border:1px dotted #00F;
    color:green;
    }
    </style>
    </head>
    
    <body>
    <a href="#">link</a>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    That should work though you should also specify a color for the border.
    That’s not really necessary since if the border-color is not specified it defaults to the value of the color property. Thus, when not specified, the border color will end up being green in this case.

    I did notice something with both sets of CSS code as used on _Aerospace_Eng_’s example though: neither Internet Explorer 6 nor 7 seem to display the border correctly; only the left and right sides are visible. If you set the border to be ten pixels wide, it even ends up appearing as if the border isn’t there. If I change the anchor element display property to inline-block, then the border appears as intended. Yet another reason to hate Internet Explorer…
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    That’s not really necessary since if the border-color is not specified it defaults to the value of the color property. Thus, when not specified, the border color will end up being green in this case.

    I did notice something with both sets of CSS code as used on _Aerospace_Eng_’s example though: neither Internet Explorer 6 nor 7 seem to display the border correctly; only the left and right sides are visible. If you set the border to be ten pixels wide, it even ends up appearing as if the border isn’t there. If I change the anchor element display property to inline-block, then the border appears as intended. Yet another reason to hate Internet Explorer…
    Further things...
    Could you just give me the code to make the border-hover link a bit wider?
    ALWAYS remember to validate your code

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Try padding-left and padding-right? That will only make it appear wider inside the border though. To put the extra space outside of the border, you could apply the padding to the span element in the following:

    Code:
    <span><a></a></span>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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