I am unable to remove some spaces between a td and ul.
Below is the piece of code
<html>
<head>
<link href="gs.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<table width="100%">
<tr>
<td width="100%" class="posMenuLevel1" style="border :1px solid gray;">
<br />
<ul class="menuLevel1">
<li>
<a href="" >ABCD</a>
</li>
<li>
<a href="" >EFGH</a>
</li>
<li>
<a href="" >IJKL</a>
</li>
<li>
<a href="" >MNOP</a>
</li>
</ul>
<br />
</td>
</tr>
</table>
</body>
</html>
gs.css
.posMenuLevel1
{
text-align: left;
vertical-align: top;
}
.menuLevel1 li
{
display: inline;
list-style-type: none;
}
.menuLevel1 li a
{
padding: 5px;
text-decoration: none;
background-color: #EE7600;
color: #000000;
}
.menuLevel1 li a:visited
{
color: #000000;
}
.menuLevel1 li a:hover
{
text-decoration: underline;
}
On running this, you would notice that there is a space on the left, just before the menu/links start.
If I do a right align, the spaces do not appear.
Not sure on why the spaces appear while aligning them to the left
Any help would be appreciated. Thanks
The
ulhas margin/padding by default to provide the indent for list items. You need to reset that:.menuLevel1 {margin: 0; padding: 0;}