Mærkeligt mellemrum mellem div og table
Hej Eksperter,Jeg har en side med et div i toppen med en tabel i og en stor meget kompliceret tabel under. Af uforståelige årsager skaber den et mellemrum mellem tabellen i toppen og den tabellen under.
CSS filen er:
---------------
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/background1.jpg);
vertical-align:top;
}
.oneColLiqCtr #container {
width: 1000px; /* this will create a container 80% of the browser width */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}
.oneColLiqCtr #header {
text-align: center;
height: 180px;
}
.oneColLiqCtr #footer {
text-align: center;
height: 100px;
}
.oneColLiqCtr #middle {
text-align: center;
height: 715px;
float:inherit
}
.oneColLiqCtr #lefttext {
width: 200px;
height: 100%;
color: #2a166f;
background-color: #95b5f8;
text-align: justify;
font-size: 10px;
}
.oneColLiqCtr #righttext {
width: 250px;
height: 100%;
color: #2a166f;
background-color: #FD830C;
text-align: justify;
font-size: 10px;
}
.oneColLiqCtr #boxheaders {
/*width: 200px;*/
color: #FFFFFF;
text-align: left;
font-size: 11px;
text-indent: 4px;
font-weight: bold;
}
.oneColLiqCtr #left1 {
text-align: left;
width: 200px;
height: 220px;
color: #FFFFFF;
}
.oneColLiqCtr #left2 {
text-align: left;
width: 200px;
height: 135px;
color: #FFFFFF;
}
.oneColLiqCtr #left3 {
text-align: left;
width: 200px;
height: 100px;
color: #FFFFFF;
}
.oneColLiqCtr #left4 {
text-align: left;
width: 200px;
height: 160px;
color: #FFFFFF;
}
.oneColLiqCtr #left5 {
text-align: left;
width: 200px;
height: 100px;
color: #FFFFFF;
}
.oneColLiqCtr #right1 {
text-align: left;
width: 250px;
height: 110px;
color: #FFFFFF;
}
.oneColLiqCtr #right2 {
text-align: left;
width: 250px;
height: 110px;
color: #FFFFFF;
}
.oneColLiqCtr #right3 {
text-align: left;
width: 250px;
height: 125px;
color: #FFFFFF;
}
.oneColLiqCtr #right4 {
text-align: left;
width: 250px;
height: 85px;
color: #FFFFFF;
}
.oneColLiqCtr #right5 {
text-align: left;
width: 250px;
height: 200px;
color: #FFFFFF;
}
.oneColLiqCtr #right6 {
text-align: left;
width: 250px;
height: 85px;
color: #FFFFFF;
}
.oneColLiqCtr #topnavigator {
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
margin: 0;
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
}
.oneColLiqCtr #centerarea {
text-align: left;
width: 550px;
height: 715px;
color: #FFFFFF;
}
-------------
Og selve html'en er her:
-------------
<!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=utf-8" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColLiqCtr">
<div id="container">
<div id="header">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="23" height="35"> </td>
<td width="477" height="35"> </td>
<td width="477" height="35"> </td>
<td width="23" height="35"> </td>
</tr>
<tr>
<td width="23" height="145" background="images/topleft.gif"> </td>
<td width="477" height="145" bgcolor="#2A166F"> </td>
<td width="477" height="145" bgcolor="#2A166F"> </td>
<td width="23" height="145" background="images/topright.gif"> </td>
</tr>
</table>
</div>
<table width="1000" height="715" border="0" cellspacing="0" cellpadding="0" valign="top" >
<tr>
<td width="200" height="715" valign="top">
<div id="left1">
<table width="200" height="220" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="28" background="images/lefttopround.gif">
<div id="boxheaders">
Holiday homes
</div>
</td>
</tr>
<tr>
<td width="200" height="164" bgcolor="95b5f8">
<div id="lefttext">
<table width="200" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
There is definitely something wrong with ninety nine percent of all cycles in this area.
But we like to dance and sing all night long.
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="200" height="28" background="images/leftlowround.gif"> </td>
</tr>
</table>
</div>
<div id="left2">
<table width="200" height="135" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="28" background="images/lefttopround.gif">
<div id="boxheaders">
Holiday makers
</div>
</td>
</tr>
<tr>
<td width="200" height="79" bgcolor="95b5f8">
<div id="lefttext">
<table width="200" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
There is definitely something wrong with ninety nine percent of all cycles in this area.
But we like to dance and sing all night long.
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="200" height="28" background="images/leftlowround.gif"> </td>
</tr>
</table>
</div>
<div id="left3">
<table width="200" height="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="28" background="images/lefttopround.gif">
<div id="boxheaders">
Home owners
</div>
</td>
</tr>
<tr>
<td width="200" height="44" bgcolor="95b5f8">
<div id="lefttext">
<table width="200" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
There is definitely something wrong with ninety nine percent of all cycles in this area.
But we like to dance and sing all night long.
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="200" height="28" background="images/leftlowround.gif"> </td>
</tr>
</table>
</div>
<div id="left4">
<table width="200" height="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="28" background="images/lefttopround.gif">
<div id="boxheaders">
Blank
</div>
</td>
</tr>
<tr>
<td width="200" height="104" bgcolor="95b5f8">
<div id="lefttext">
<table width="200" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
There is definitely something wrong with ninety nine percent of all cycles in this area.
But we like to dance and sing all night long.
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="200" height="28" background="images/leftlowround.gif"> </td>
</tr>
</table>
</div>
<div id="left5">
<table width="200" height="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="28" background="images/lefttopround.gif">
<div id="boxheaders">
Holiday Agents
</div>
</td>
</tr>
<tr>
<td width="200" height="44" bgcolor="95b5f8">
<div id="lefttext">
<table width="200" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
There is definitely something wrong with ninety nine percent of all cycles in this area.
But we like to dance and sing all night long.
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="200" height="28" background="images/leftlowround.gif"> </td>
</tr>
</table>
</div>
</td>
<div id="centerarea">
<td width="550" height="715" valign="top" bgcolor="#FFFFFF">
demo </td>
</div>
<td width="250" height="715">
<div id="right1">
<table width="250" height="110" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="28" background="images/righttopround.gif">
<div id="boxheaders">
Weather
</div>
</td>
</tr>
<tr>
<td width="250" height="54" bgcolor="95b5f8">
<div id="righttext">
<table width="250" border="0" cellspacing="0" cellpadding="4">
<tr>
<td valign="top">
Text </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="250" height="28" background="images/rightlowround.gif"> </td>
</tr>
</table>
</div>
<div id="right2">
<table width="250" height="110" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="28" background="images/righttopround.gif">
<div id="boxheaders">
Rent a car
</div>
</td>
</tr>
<tr>
<td width="250" height="54" bgcolor="95b5f8">
<div id="righttext">
<table width="250" border="0" cellspacing="0" cellpadding="4">
<tr>
<td valign="top">
Text </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="250" height="28" background="images/rightlowround.gif"> </td>
</tr>
</table>
</div>
<div id="right3">
<table width="250" height="125" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="28" background="images/righttopround.gif">
<div id="boxheaders">
Contact us
</div>
</td>
</tr>
<tr>
<td width="250" height="69" bgcolor="95b5f8">
<div id="righttext">
<table width="250" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
There is definitely something wrong with ninety nine percent of all cycles in this area.
But we like to dance and sing all night long.
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="250" height="28" background="images/rightlowround.gif"> </td>
</tr>
</table>
</div>
<div id="right4">
<table width="250" height="85" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="28" background="images/righttopround.gif">
<div id="boxheaders">
newsletter
</div>
</td>
</tr>
<tr>
<td width="250" height="29" bgcolor="95b5f8">
<div id="righttext">
<table width="250" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
Text
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="250" height="28" background="images/rightlowround.gif"> </td>
</tr>
</table>
</div>
<div id="right5">
<table width="250" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="28" background="images/righttopround.gif">
<div id="boxheaders">
Blank
</div>
</td>
</tr>
<tr>
<td width="250" height="144" bgcolor="95b5f8">
<div id="righttext">
<table width="250" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
Text
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="250" height="28" background="images/rightlowround.gif"> </td>
</tr>
</table>
</div>
<div id="right6">
<table width="250" height="85" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="28" background="images/righttopround.gif">
<div id="boxheaders">
About us
</div>
</td>
</tr>
<tr>
<td width="250" height="29" bgcolor="95b5f8">
<div id="righttext">
