CSS probleem kom er niet uit

Door Jeroen van de Ven op 05-01-2007 12:43

872 views

Ik heb dit:

html:

<!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" />
<link rel="stylesheet" type="text/css" title="default" href="resultstyle.css" />
<title>Untitled Document</title>
</head>

<body>
 
<ul>
	<li class="bg1">
		<ul>
			<li class="bg1_left"><a href="/user/l06b58qt/ph"><b>Something</b></a><br />

				<b><small>Something</small></b><br />

			</li>
			
			<li class="top">
				<div style="float: left;">
					<a href="/topic/7c917rcc#p7c917rcc" class="msg"><b>Nickname schreef op Date:</b></a>
				</div>
				
				<div style="float: right;">

					<a href="/topic/47ndbn43/?p=reply&amp;q=trqfkrqf"><img src="/i/f/q.gif" alt="Citeer bericht in db2" /></a>
					<a href="/topic/47ndbn43/?p=reply&amp;q=trqfkrqf"><img src="/i/f/q.gif" alt="Citeer bericht in nb2" /></a>

				</div>
			</li>
			
			<li class="ms">		
				Message
			</li>
			
			<li class="bottom">
				<div style="float: left;">

					Something
				</div>
			</li>

		</ul>
	</li>
</ul>

</body>
</html>

css:

.bg1 {
	background-color : #e6e7ec;
}
.bg2 {
	background-color : white;
}
body {
	margin : 5px;
	border : 0;
}
a {
	color : blue;
	border : 0;
	margin : 0;
	padding : 0;
}
b {
	color : blue;
	border : 0;
	margin : 0;
	padding : 0;
}
a:hover {
	color : blue;
	text-decoration : none;
	border : 0;
}
img {
	border : 0;
}
ul {
	list-style : none;
	padding : 0;
	margin : 0;
	width : 800px;
}
ul li {
	border-style : solid;
	border-color : #485780;
	border-width : 1px 1px 0 1px;
	margin : 0;
	padding : 0;
}
ul li ul {
	list-style : none;
	padding : 0;
	margin : 0;
}
ul li ul .bg1_left {
	display : block;
	width : 130px;
	height : 200px;
	float : left;
	padding : 5px;
	margin : 0;
	border : 0;
	border-right : 1px solid #485780;
	background-color : white;
}
ul li ul .bg2_left {
	display : block;
	width : 130px;
	height : 200px;
	float : left;
	padding : 5px;
	margin : 0;
	border : 0;
	background-color : #e6e7ec;
}
ul li ul .top {
	display : block;
	width : 650px;
	height : 40px;
	border : 0;
	border-bottom : 1px solid #485780;
	padding : 0;
	margin : 5px;
	font-size : 12pt;
}
ul li ul .bottom {
	display : block;
	width : 650px;
	height : 40px;
	border : 0;
	border-top : 1px solid #485780;
	padding : 0;
	margin : 5px;
	font-size : 10pt;
}
ul li ul .tp a {
	color : blue;
	border : 0;
}
ul li ul .tp a:hover {
	color : blue;
	text-decoration : none;
	border : 0;
}
ul li ul .ms {
	display : block;
	width : 650px;
	height : 100px;
	border : 0;
	padding : 5px;
	margin : 0;
	font-size : 12pt;
}

In firefox krijg ik steeds dat onder de bovenste lijn (border) nog ruimte zit voordat de <li class="bg1_left"> komt en daarmee dus de border-right van die <li> een stukje lager schuift. In iexplore zit hij wel tegen de bovenkant maar is de rest een stukje groter. Ik heb alllees wat ik weet al geprobeerd, daarna ben ik gaan zoeken naar andere oplossingen maar ik kom er nou echt niet meer uit.