Weird height with div box - html

Question

One of my div is acting weird when I'm testing it in IE.
Here is the picture of it:
image http://img10.imageshack.us/img10/1395/mmmbme.png
The weird thing is that I have height: 1px;. I have no idea of fixing this, I've looked around for a long time for this issue.
Here is my CSS:
body{
background-image: url(images/bakgrund.png);
background-position: center;
background-repeat: no-repeat;
}
#main{
margin: 0px auto;
width: 1870px;
}
#fb{
position: absolute;
height: 69px;
width: 70px;
margin-top: 505px;
margin-left: 790px;
}
#nyheter{
position: absolute;
width: 460px;
height: 210px;
margin-top: 30px;
margin-left: 500px;
}
#nyheter a{
color: white;
}
#nyheter a:hover{
color: #c4c4c4;
}
h4{
font-size: 20px;
color: white;
}
#nyheter p{
margin-top: -25px;
}
h3{
font-weight: 800;
font-size: 20px;
}
#nyheter a:hover{
}
h2{
color: white;
font-family: "Bebas Neue";
font-weight: 400;
font-size: 50px;
position: absolute;
}
#fb:hover
{
}
#twitter a{
}
#twitter{
position: absolute;
height: 69px;
width: 70px;
margin-top: 505;
margin-left: 880px;
}
#banner {
height: 200px;
width: 1000px;
margin-top: -10px;
border: 1px solid transparent;
background-image: url(banner.png);
background-repeat: no-repeat;
background-position: center;
border: thin ridge #3a3a3a;
margin: 0px auto;
margin-left: 450px;
}
/*
#element1{
position: relative;
width: 1000px;
height: 710px;
margin: auto;
background-color: black;
filter:alpha(opacity=85);
-moz-opacity:.85;
opacity:.85;
z-index: 1;
} */
#content1{
width: 1000px;
height: 610px;
color: white;
text-align: left;
font-family: Makisupa;
z-index: 1;
border: thin ridge #3a3a3a;
background-color: black;
float: left;
margin-top: -2px;
margin-left: 450px;
}
#content2{
width: 1000px;
height: 100px;
margin-left: 450px;
position: relative;
color: #a8a8a8;
z-index: 2;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
margin-top: 0.4px;
border: thin ridge #3a3a3a;
background-color: black;
}
#textcontent{
margin-left: 10px;
margin-top: 10px;
position: absolute;
}
#test:hover{
}
#test{
}
#copy{
margin-left: 855px;
margin-top: 60px;
position: absolute;
}
#kodad{
margin-left: 320px;
position: absolute;
margin-top: 70px;
font-size: x-small;
}
a{
text-decoration: none;
color: #a8a8a8;
}
a:hover{
color: white;
}
#textoperation{
margin-top: 15px;
margin-left: 20px;
}
#nyhet{
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #bfbfbf;
font-size: 14px;
margin-left: 10px;
margin-top: 50px;
}
#huvudtext{
margin-top: -10px;
}
#rubrik h3{
font-size: 15px;
font-weight: 400;
}
#textinled{
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #bfbfbf;
font-size: 15px;
margin-left: 20px;
margin-top: 130px;
}
#video{
position: absolute;
margin-left: 20px;
margin-top: 295px;
}
h2{
color: white;
font-family: "Bebas Neue";
font-weight: 400;
font-size: 40px;
position: absolute;
}
#nyhettext{
position: absolute;
margin-top: -23px;
margin-left: 10px;
}
#huvudtext{
}
#underline{
background-color: #3a3a3a;
position: absolute;
margin-top: 20px;
margin-left: 10px;
position: absolute;
width: 220px;
height: 3px;
}
#mitten{
position: absolute;
height: 570px;
width: 3;
background-color: #3a3a3a;
margin-top: 10px;
margin-left: 470px;
}
/*
#element2{
width: 1000px;
height: 50px;
margin: auto;
margin-top: -671px;
background-color: black;
filter:alpha(opacity=85);
-moz-opacity:.85;
opacity:.85;
z-index: 1;
}
*/
h1{
color: white;
font-family: "Bebas Neue";
font-weight: 400;
font-size: 50px;
position: absolute;
}
#cssmenu{
margin-top: 170px;
}
#cssmenu ul
{
margin: 0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
#cssmenu li
{
display:block;
float:left;
margin:0;
padding:0;
}
#cssmenu li a
{
display:block;
float:left;
color: white;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
#cssmenu li a:hover
{
color: #c4c4c4;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
#cssmenu li.active a
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
Here's my HTML code:
<?xml version="1.0"?>
<! DOCTYPE html PUPLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1/-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Start </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="nycss.css" />
<![endif]-->
<![if !IE]>
<link rel="stylesheet" type="text/css" href="styles.css" />
<![endif]>
</head>
<body>
<div id="main">
<div id="banner">
<div id='cssmenu'>
<ul>
<li class='active '><a href='#'><span>Hem</span></a></li>
<li><a href='#'><span>Information</span></a></li>
<li><a href='#'><span>Om oss</span></a></li>
<li><a href='#'><span>Anmäla</span></a></li>
<li><a href='#'><span>Partners</span></a></li>
</ul>
</div>
</div>
<!--<div id="element1"></div> -->
<div id="content1">
<div id="background">
</div>
<div id="textoperation"><h1> Operation Pixel 19/02-13 </br>Folkets Hus i Karlshamn </h1></div>
<div id="textinled">
<p> Operation Pixel drivs av fem elever från JB Gymnasiet </br> i Karlshamn som ett projekt arbete. Vi som står för lanet </br> är Adam Erlandsson, Isak Risberg Jönsson, Jonatan Tjärnberg, </br>Victor Johansson och Lucas Mattsson.</p>
<p> Lanet kostar 200 kr och vara mellan 2013.02.19-2013-02.21. </br> Du kan även förhandsboka och betala 150 kr istället.</br> Klicka på Anmäla för att boka din plats. </p>
</div>
<div id="video">
<iframe width="410" height="280" src="http://www.youtube.com/embed/qP40Liau6z4" frameborder="0" allowfullscreen></iframe>
</div>
<div id="mitten"></div>
<div id="nyheter">
<div id="nyhettext"><h2> Nyheter </h2></div>
<div id="underline"></div>
<div id="nyhet">
<h4>Hemsidan är på gång nu</h4><p>Adam Erlandsson håller just nu på att utveckla Operation Pixelshemsida. Hemsidan kommer vara klart inom 1-2 veckor.</br> Mer information kommer inom kort.</p>
<h4> Datum och lokal är bestämd </h4><p> Vi har nu hittat en lokal (folkets hus) och datumet är </br> satt mellan 19/02-13 21/02-13. Lorem ipsum dolor sit amet, consectetur </br>adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </br></br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate. </p>
<h4> Projekt arbete </h4> <p>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem ap
eriam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </br></br> Nemo enim ipsam voluptatem quia volup
tas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</br></br><h3> Läs alla nyheter </h3>
</div>
</div>
<div id="fb">
<img src="images/fb.png">
</div>
<div id="twitter">
<img src="images/twitter.png">
</div>
</div>
<div id="content2">
<div id="textcontent">
<div id="test"> Hem </br></div>
<div id="test"> Information </br></div>
<div id="test"> Om Oss </br></div>
<div id="test"> Anmäla </br></div>
<div id="test"> Partners </div>
</div>
<div id="kodad">
<p> Code by Adam Erlandsson. Design by Adam Erlandsson & Victor Johansson </p>
</div>
<div id="copy">
<p> © 2012 Operation Pixel </p>
</div>
</div>
</div>
</body>
</html>

Answer 1

To be on the safe side, write a comment into the div and set its font-size and line-height also. In general, all visual styles should be expressed by stylesheets, not by HTML tags. Maybe you better add a CSS border.
#nyhettext h2 {
border-bottom: 3px solid #3a3a3a;
}
Anyway, the following should work with your current approach.
HTML
<div id="underline"><!-- --></div>
CSS
#underline{
background-color: #3a3a3a;
position: absolute;
margin-top: 20px;
margin-left: 10px;
/* position: absolute; */
width: 220px;
height: 3px;
font-size: 1px;
line-height: 1px;
}
One more thing: Do all these elements need to have an id? There should never be more than one element with the same id (see <div id="test">). Consider using class instead.