CSS Trickery - Removing lower padding on list items?

[MagSafe]

Hi there,

Having a bit of trouble with a list i've made with css and html. Whats happening is i have a horizontal list with all the styling disabled so it is just a line of words and IE is insisting the list items should have around 10 pixels of bottom padding on each of them which i'm trying to figure out how to get rid of?

I've tried setting the margin and padding of both the <ul> and <li> tags to 0, setting vertical align to bottom, some other stuff like that but just cannot figure out how to stop IE doing it?

I've posted the css code for my list/drop down menu and was hoping someone that might have tried to fix this error before to give me a hand?

Thanks

.campaignsmenu
{
	margin: 5px 0 0 16px;
	padding: 0;
	position: relative;
	z-index: 2;
	height: 30px;
	background: #ffffff;
	font: normal 8pt arial, helvetica, sans-serif;
	color: #658dbd;
}

/* remove all the bullets, borders and padding from the default list styling */
.campaignsmenu ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.campaignsmenu ul ul
{
	width: 104px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.campaignsmenu li
{
	margin: 0;
	padding: 0;
	float: left;
	/*width: 100px;*/
	position: relative;
	line-height: 10px;
}

/* style the links for the top level */
.campaignsmenu a, .campaignsmenu a:visited, .campaignsmenu a:active
{
	display: block;
	font: normal 8pt arial, helvetica, sans-serif;
	text-decoration: none;
	color: #658dbd; 
	background: #ffffff;
}

/* style the second level background */
.campaignsmenu ul ul a.drop, .campaignsmenu ul ul a.drop:visited, .campaignsmenu ul ul a.drop:active
{
	background: #ffffff url('graphics/menu/menubackground1.jpg') repeat-x;
	color: #658dbd;
}

/* style the second level links */
.campaignsmenu ul ul a.drop, .campaignsmenu a.drop:visited, .campaignsmenu a.drop:active
{
	background: #ffffff url('graphics/menu/menubackground1.jpg') repeat-x;
	color: #658dbd;
}

/* style the second level hover */
.campaignsmenu ul ul a.drop:hover
{
	background: #ffffff url('graphics/menu/menubackground2.jpg') repeat-x;
}

/* style the third level background */
.campaignsmenu ul ul ul a, .campaignsmenu ul ul ul a:visited, .campaignsmenu ul ul ul a:active
{
	background: #ffffff url('graphics/menu/menubackground1.jpg') repeat-x;
}

/* style the third level hover */
.campaignsmenu ul ul ul a:hover
{
	background: #ffffff url('graphics/menu/menubackground2.jpg') repeat-x;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.campaignsmenu ul ul
{
	visibility: hidden;
	position: absolute;
	height: 0;
	top: 14px;
	left: 0px;
	width: 150px;
}

/* same as above except pushes drop-downs left for end menu */
.campaignsmenu ul ul.endmenu
{
	left: -31px; 
}

/* another hack for IE5.5 */
* html .campaignsmenu ul ul
{
	top: 13px;
	t\op: 14px;
}

/* position the third level flyout menu */
.campaignsmenu ul ul ul
{
	left: 140px; 
	top: -1px;
	width: 140px;
}

/* position the third level flyout menu for a left flyout */
.campaignsmenu ul ul ul.left
{
	left: -140px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.table1 table
{
	position: absolute;
	top: 0;
	left: 0;
}

/* style the second level links */
.campaignsmenu ul ul a, .campaignsmenu ul ul a:visited, .campaignsmenu ul ul a:active
{
	background: #ffffff url('graphics/menu/menubackground1.jpg') repeat-x; 
	color: #658dbd; 
	height: auto; 
	line-height: 1em; 
	border: 1px solid #658dbd; 
	border-width: 0 1px 1px 1px;
	padding: 5px 10px; 
	width: 119px;
}

/* yet another hack for IE5.5 */
* html .campaignsmenu ul ul a
{
	width: 140px;
	w\idth: 119px;
}

/* style the second level third-level drop-down hover */
.campaignsmenu ul ul a:hover
{
	color: #658dbd; 
	background: #ffffff url('graphics/menu/menubackground2.jpg') repeat-x;
}

/* style the top level hover */
.campaignsmenu a:hover
{
	color: #658dbd; 
	background: #fff;
}

/* make the second level visible when hover on first level list OR link */
.campaignsmenu ul :hover ul
{
	visibility: visible; 
}

/* keep the third level hidden when you hover on first level list OR link */
.campaignsmenu ul :hover ul ul
{
	visibility: hidden;
}

/* keep the fourth level hidden when you hover on second level list OR link */
.campaignsmenu ul :hover ul :hover ul ul
{
	visibility: hidden;
}

/* make the third level visible when you hover over second level list OR link */
.campaignsmenu ul :hover ul :hover ul
{ 
	visibility: visible;
}

/* make the fourth level visible when you hover over third level list OR link */
.campaignsmenu ul :hover ul :hover ul :hover ul
{ 
	visibility: visible;
}

 

[probedb]

Try setting the padding and margin on your anchors within the list elements to zero, failing that try setting the line-spacing to zero, maybe play with the line-height. Might work.

 

[Augmented]

There's a known bug in IE that can cause it to interpret whitespace in your markup as whitespace it should render visually.

Try removing whitespace (space/tab/linebreaks) between list elements in your markup and see if that fixes your particular issue.

 

[Sic]

ooh ooh. try ending your lists with a space...so instead of:

<li>blah blah blah</li>

you have:

<li>blah blah blah </li>

had that very same problem this morning

also...there's such a thing as too much commenting

 

[MagSafe]

ooh ooh. try ending your lists with a space

had that very same problem this morning

also...there's such a thing as too much commenting

I can't really do that, the list is a massive drop-down menu system so in between the <li> tags is about 15 lines of code with a table and another couple of lists ... I did try it but it's not quite the same (and doesn't work unfortunatly), but thanks

The massive amount of commenting is because i'm re-designing & developing my companies website and my boss and the rest of the web team need to know what i've done so they can make improvements etc. etc. in the future ... plus, its handy for me in general, always good to know what everything does.