Wed, 2016-09-14 12:37
I made a table-like ul and li for my website's categories. When I use Tryit Editor. I use this code:
html :
<html> <head> <style> ul.kateg { list-style-type: none; margin: 0; padding: 0; width: 100%; background-color: transparent; border: 1px solid #b7ac0f; } li.cat a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li.cat { text-align: left; border-bottom: 1px solid #b7ac0f; } li.cat:last-child { border-bottom: none; } li.cat a.active { background-color: #b7ac0f; color: white; } li.cat a:hover:not(.active) { background-color: transparent; color: green; } </style> </head> <body> <ul class="kateg"> <li class="cat"><a class="active">Home</a></li> <li class="cat"><a href="#news">News</a></li> <li class="cat"><a href="#contact">Contact</a></li> <li class="cat"><a href="#about">About</a></li> </ul> </body> </html>
output :
^^^I don't know why there are so many spaces here^^^
and I wanted it to look that way but when I copy it to my WordPress site, it looks like this.
The problem is with the home background as you can see, the background is not full. Is there any mistakes in my code? Please help me 
I am a beginner in CSS
Thank you.
Tue, 2016-09-20 10:24
#1
HI howardlie, You have the
HI howardlie,
You have the background color on the Link.
So to remove the spacing you need to remove the padding from the LI or put the background-color on the LI.