padding not getting applied to <a> link [Archive]

vinpkl

04-19-2015, 08:19 AM

Hi

I want to apply padding to CATEGORY LINK which is inside <li>

Only left padding is getting applied

but Top and Bottom padding is not getting applied

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#leftnav li{list-style:none; background-color:#4b5913; padding:0px; color:#FFFFFF; margin-bottom:2px}
#leftnav ul li{background-color:#FFFFFF; color:#333333; padding:7px; border-bottom:1px dashed #999999}
#leftnav li a{padding:40em 0 40px 40px; text-decoration:none; color:#FFFFFF;}
</style>
</head>

<body>
<ul id="leftnav">
<li><a href="">CATEGORY</a>
<ul>
<li>sublink</li>
<li>sublink</li>
<li>sublink</li>
</ul>

</li>

<li><a href="">CATEGORY</a></li>
<li><a href="">CATEGORY</a></li>
</ul>
</body>
</html>

thanks
vineet

Beverleyh

04-19-2015, 08:37 AM

<a> is an inline element so you need to change the display property to display:block;

vinpkl

04-19-2015, 08:56 AM

<a> is an inline element so you need to change the display property to display:block;

Thanks Beverleyh
All working fine now

vineet

styxlawyer

04-19-2015, 03:31 PM

Did you really mean to do this:

#leftnav li{list-style:none; .....

The list-style property is intended to be applied to the parent list (<ul> or <ol>), not the list elements themselves. Click on this link (http://www.w3.org/TR/CSS21/generate.html#propdef-list-style) for more information.

Beverleyh

04-19-2015, 04:18 PM

Did you really mean to do this:

#leftnav li{list-style:none; .....

The list-style property is intended to be applied to the parent list (<ul> or <ol>), not the list elements themselves. Click on this link (http://www.w3.org/TR/CSS21/generate.html#propdef-list-style) for more information.
I think it's important to clarify that while applying list-style to the parent ul/ol is preferred/recommended (due to more predictable inheritance) there is nothing wrong with applying it to li elements either. Both ways are perfectly valid. The specs only state that it should be applied to the li with care so that the choice of (child/descendant) selector does not produce undesirable results.