IE Link Problem (html, css)

[MagSafe]

Hey folks, requiring a bit of help here.

Basically i'm trying to get menu links in IE to not have any lower padding on them, so that the area below them don't overlap the drop-down's. As you can see from the pic's Firefox doesn't put any lower padding on it, which is what it's suppost to look like, and is what i'm trying to stop IE doing.

Viewing in IE

Viewing in Firefox

So far i've tried...

• setting the drop-down sections z-index to -1, so they'll tuck behind the top links
• setting the padding and margins of the top links to 0
• setting the height of the top links (which messes things up completey)

I'm pretty much stumped on what to try next, was hoping someone could have a quick look? I've included the css code below. Thanks.

/* style the outer div to give it width */
.campaignsmenu
{
	margin: 5px 0 0 11px;
	padding: 0;
	position: relative;
	z-index: 2;
	height: 30px;
	background: #000000;
	font: normal 8pt arial, helvetica, sans-serif;
	color: #658dbd;
}

/* remove all the bullets, borders and padding from the default list styling */
.campaignsmenu ul
{
	padding: 0;
	margin: 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
{
	float: left;
	/*width: 100px;*/
	position: relative;
}

/* 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: #afafaf;
}

/* 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: 15px;
	left: 0px;
	width: 150px;
}

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

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

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

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

/* 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: 129px
}

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

/* style the top level hover */
.campaignsmenu a:hover, .campaignsmenu ul ul a:hover
{
	color: #658dbd; 
	background: #f4cef5 url('graphics/menu/menubackground2.jpg') repeat-x;
}

/* 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;
}

 

[MagSafe]

Thanks for that ... I just tried line-height there and still nothing I also looked at this this but thinking i'd solved it but nope, IE is still forcing a lower area onto each link.

I guess it's nothing major but it would be nice to get it working