...

View Full Version : border-hover



codingmasta
12-23-2006, 09:37 AM
Look at my code. Not sure wheter correct.


<style>
a:link,a:visited {color:blue}
a:hover {border:1px dotted;color:green}
</style>

croatiankid
12-23-2006, 09:43 AM
W3C CSS Validator Results for file://localhost/TextArea
No error or warning found it should be ok

Arbitrator
12-23-2006, 08:00 PM
While there are no CSS errors, that code does contain an (X)HTML error. The style element requires a type attribute. Example:


<style type="text/css">

_Aerospace_Eng_
12-23-2006, 09:13 PM
That should work though you should also specify a color for the border.

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

Arbitrator
12-23-2006, 09:49 PM
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Ö

codingmasta
12-24-2006, 06:19 PM
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?

Arbitrator
12-25-2006, 03:21 AM
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:


<span><a></a></span>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum