CSS Pro gezocht voor hulp.

Ik zal eerst even mijn stylesheet posten voor ik het uitleg

/* Containers */

#container {
	width: 100%;
	margin: auto;
}

#cont_logo {
	width: 100%;
	margin: auto;
}

#cont_menu {
	padding-top: 20px;
	width: 147px;
	float: left;
}

#cont_content {
	padding-top: 20px;
	width: 76%;
	margin: auto;
}

#cont_right {
	padding-top: 20px;
	width: 147px;
	float: right;
}

#cont_footer {
	width: 100%;
	margin: auto;
	clear: both;
}



/* Logo */

#logo {
	text-align: center;
	padding-top: 20px;
}

#logo h1 a {
	font-size: 33px;
	color: #A80000;
	text-decoration: none;
}

#logo h1 a:visited {
	font-size: 33px;
	color: #A80000;
	text-decoration: none;
}

#logo h1 a:hover {
	font-size: 33px;
	color: #A80000;
	text-decoration: none;
}

#logo h2 {
	font-size: 16px;
}



/* Menu */

#menu {
	text-align: left;
	font: bold 14px arial, helvetica, sans-serif;
	border-width: 1px;
	border-style: solid;
	border-color: #000;
	margin-left: 5px;
}

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu li {
	background-color: #A80000;
}

#menu li a {
	color: #fff;
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	padding-left: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
}

#menu li a:visited {
	color: #fff;
	text-decoration: none;

}

#menu li a:hover {
	color: #000;
	text-decoration: none;
	background-color: #D00000;
}



/* Content */

#content {
	text-align: left;
	font-size: 12px;
	padding-left: 60px;
	line-height: 120%;
}

#content h1 {
	color: #A80000;
	font-size: 25px;
	text-align: left;
	line-height: 75%;
	border-bottom: 2px solid #A80000;
}

#content h2 {
	font-size: 16px;
	color: #000000;
}

#content h3 {
	font-size: 14px;
	color: #000000;
}

#content p {
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#content form {
	text-align: center;
	margin-left: -60px;
}

/* Right */

#right {
	font: bold 14px helvetica, arial, sans-serif;
	color: #fff;
	border-width: 1px;
	border-color: #000;
	border-style: solid;
	margin-right: 5px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #A80000;
	text-align: center;
}

#right a {
	color: #fff;
	border-color: #fff;
	text-decoration: none;
}

#right a:visited {
	color: #fff;
	border-color: #fff;
	text-decoration: none;
}

#right a:hover {
	color: #000;
	border-color: #000;
	text-decoration: none;
}

#right h2 {
	font: bold 13px helvetica, arial, sans-serif;
	color: #fff;
	text-align: center;
	padding-bottom: 4px;
	padding-top: 4px;
}

#right h3 {
	font: bold 12px helvetica, arial, sans-serif;
	color: #fff;
	text-align: center;
	padding-bottom: 2px;
}

#right h3 img {
 	border: 2px solid;
	margin-bottom: 4px;
}


/* Footer */

#footer {
	text-align: center;
	font-size: 11px;
	color: #800000;
}

#footer a {
	color: #B80000;
	font-size: 11px;
	font-style: italic;
	text-decoration: none;
}

#footer a:visited {
	color: #B80000;
	font-size: 11px;
	font-style: italic;
	text-decoration: none;
}

#footer a:hover {
	color: #680000;
	font-size: 11px;
	font-style: italic;
	text-decoration: underline;
}

Ok in firefox werkt deze css style foutloos (Doh)
In winsux IE werkt het niet op diverse punten.

Ok zoals je kunt zien heb ik al wat dingen er dubbel in staan dit is om de meeste IE en andere matige browsers een handje te helpen (ze zijn soms zo dom).

Maar toch heb ik nu nog wat foutjes in IE die er helemaal niet in horen te zitten.
Dit zijn de fouten die ik niet gefixed krijg:

1) Font:
Mijn font is in de meeste gevallen:
"helvetica, arial, sans-serif;"
Hartstikke mooi maar rara in IE werkt het niet en krijg ik een sans font (het verschil tussen sans en sans-serif vind je op google)
Iemand enig idee hoe ik ervoor zorg dat hij WEL het juist font pakt.

2)
Border color:
Als jullie naar mijn right kijken kun je hieruit opmaken dat ik een border heb om mijn image. Deze img heb ik binnen een a href staan (het plaatje is dus een link) en zoals je ziet zit er een 2px border omheen. Het leuke is nu dat ik die border van kleur laat veranderen zodra je op de link gaat staan (zie a:hover in mijn right bijv)
Maar rara dit werkt in firefox maar in IE is de border vrolijk blauw (zoals elke link dus standaard) En hij blijft ook blauw als je eroverheen gaat.
Het leuke is ik heb dit al eens eerder gedaan en toen werkte het wel.

3) Menu:
Mijn menu is niks anders dan gewoon het oude vertrouwde <ul><li> menu zoals je hier ziet:

<html>
<ul>
<li><a href="link1.php">Blabla</a>
<li><a href="link2.php">Blabla</a>
<li><a href="link3.php">Blabla</a>
<li><a href="link4.php">Blabla</a>
</ul>
</html>

Het leuke is nu op een of andere manier zit er tussen de verschillende items een hele lading ruimte (net alsof er een <br> staat). Dit staat natuurlijk nergens en in firefox wordt het menu gewoon getoond met maar 3px tussen de items (zoals ik in de css aangeef). Maar in ie is dit dus veel meer (wel 10px)
Iemand enig idee waar deze bug weg komt.

Deze bugs krijg ik zelf helemaal niet weg. Tevens heb ik ook geen idee waar ze weg zouden kunnen komen.

Ik hoop dat iemand mij kan helpen. Het zou mij iedergeval een hoop werk schelen.
Alvast Bedankt

Groeten,
White