Problém s IE 6 i částečně 7

ahoj, narazil jsem na problém, který dokážu vyřešit pouze pomocí podmíněného komentáře

<p class="podpis">Tým Mantisy.CZ</p>

<hr>

<div id="rozcestnik">
<div><a href="#"><img src="image.jpg" width="50" height="50" alt="Popis" /></a></div>
<div><a href="#"><img src="image.jpg" width="50" height="50" alt="Popis" /></a></div>
<div><a href="#"><img src="image.jpg" width="50" height="50" alt="Popis" /></a></div>
<hr class="cistic">
</div>

<h2>Akce a novinky</h2>


mezi <hr> a rozcestnikem se v IE objeví mezera zhruba 200px, já bych však chtěl mít přimáčknuto :-)

CSS:

#rozcestnik {
width: 100%;
height: 120px;
}

#rozcestnik div {
width: 33%;
text-align:center;
float: left;
}

hr {
height: 2px;
color: #72ab00;
background-color: #72ab00;
border: 0px solid #72ab00;
margin-left: 25px;
margin-right:25px;
margin-bottom: 25px;
}

h2 {
font-size: 1.25em;
font-weight: bolder;
color: #72ab00;
letter-spacing: 2px;
padding-left: 30px;
margin-bottom: 15px;
background-image: url(img/ctverecky.gif);
background-repeat: no-repeat;
}


díky za jakoukoli připomínku

jak prosté, chtělo nastavit pouze menší šířku než 100% :)