Hej NG.
Jeg står med et problem jeg ikke lige kan gennemskue. Jeg har opbygget en
side i XHTML 1.1 og CSS 2. Jeg bruger CSS til at layoute med, ikke tabeller.
Imellem to givne div-tags er der en masse mellemrum, som jeg ikke kan finde
ud af hvor stammer fra. Det mellemrum vil jeg gerne have væk.
Et billede af "fejlen". Den sorte pil markerer hvad jeg mener:
http://www.voller.dk/rod/fejl.gif
Koden bag filen:
----------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>: Hidden :</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/standard.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="graa-bar-top"> </div>
<div id="image-holder">
<div id="logo"><img src="grafik/logo_top.gif" alt="ALT-tekst" width="300"
height="78" /></div>
<div id="random-image">
<img src="grafik/img01.jpg" alt="Random image-thing" width="346"
height="124" />
</div>
</div>
<div id="menu">
<span class="menu-width">Punkt 1</span>
<span class="menu-width">Punkt 2</span>
<span class="menu-width">Punkt 3</span>
<span class="menu-width">Punkt 4</span>
<span class="menu-width">Punkt 5</span>
<span class="menu-width">Punkt 6</span>
<span class="menu-width">Punkt 7</span>
<span class="menu-width">Punkt 8</span>
<span class="menu-width">Punkt 9</span>
<span class="menu-width-slut">Punkt 10</span>
</div>
</div>
</body>
</html>
----------------------------------------------
Og CSS-filen:
----------------------------------------------
body {
margin: 0px;
padding: 0px;
text-align: center;
}
#container {
width: 750px;
margin-right: auto;
margin-left: auto;
border: 2px solid #CCCCCC;
}
#graa-bar-top {
background-color: #CCCCCC;
clear: both;
float: left;
height: 42px;
width: 750px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
}
#logo {
float: left;
height: 124px;
width: 50%;
padding-top: 23px;
padding-bottom: 23px;
text-align: left;
}
#random-image {
float: right;
height: 124px;
width: 50%;
text-align: right;
}
..menu-width {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
background-color: #CCCCCC;
text-align: center;
float: left;
width: 74px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
}
..menu-width-slut {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
background-color: #CCCCCC;
text-align: center;
float: left;
width: 74px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#menu {
width: 750px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #CCCCCC;
float: left;
clear: both;
}
#image-holder {
clear: both;
float: left;
width: 750px;
}
----------------------------------------------
Det underlige (og på sin vis heldige) er at alle de browsere (IE, Opera,
Mozilla) jeg har testet siden i, viser "fejlen" med det store mellemrum. Så
der er sikkert en fejl i koden et sted. Hvem kan spotte den...?
Tak på forhånd.