1 reply to this topic

[k4m1k4z1]

Hello forum! I have encountered a problem, i am creating a website, and when i try to change the background color of a link when you hover over it, it will just change the color of the background for just a small portion. Its not changing the color of the text, but just the background behind the text changes. Here is a pic. (Sorry for the poor quality)
[ATTACH]3249[/ATTACH]

THIS IS WHAT I WANT IT TO BE LIKE!!!

[ATTACH]3248[/ATTACH]

Here is the code:

body {

	margin-top: 3%;

	margin-left: 10%; margin-right: 10%; 

	margin-bottom: 3%;

	background: url(background2.gif);

}



#logo {

	width: 159px; position:absolute;  

	border-left: 4px solid #D9DAC9;

	border-bottom: 4px solid #C8C8BA;

	border-right: 4px solid #EBECE6; 

	border-top: 4px solid #F1F1F1;

}


#nav {

	height: 60px; border: 1px solid;

	margin-left: 168px;

}


#nav li {

	list-style: none;

	display: inline-block;

	margin-top: 17px;

	padding-left: 20px; padding-right: 20px;

}


a:hover {

	background: #ffffff;

	height: 60px; 	

}

Please tell me how to fix this problem, and as you can notice i have set the display to block.
Thanks for the help guys.
:-P

Attached Files

•  Capture..PNG   9.28K   20 downloads
•  Capture2..PNG   1.75K   16 downloads
•  Capture..PNG   2.19K   44 downloads

[Irfan_A]

Hello...
Please, refer to this reference:
CSS Styling Links
Tryit Editor v1.4

As far as I understand, you should put a:hover after a:link and a:visited to obey CSS's order rules.