HTML Comments in IE6

programming web dev
1

Can anyone tell me why inserting HTML comments inside a div element creates empty space in Internet Explorer 6 (and I would assume earlier versions as well). Heres my problem:

I have a navigation bar that’s 800px wide by 30px tall. It consists of a parent div and 6 inner divs that hold the 6 images for the link buttons. Ive doubled checked the inner divs and their graphics, they definitely add up to the correct amount of 800px. Heres the original code that works in everything but IE6:


<div class="div4">
     <!-- Begin Navigation Bar -->
      <div class="div5"></div><!-- Nav Buttons \/ -->
      <div class="div6"></div>
      <div class="div7"></div>
      <div class="div8"></div>
      <div class="div9"></div>
      <div class="div10"></div><!-- Nav Buttons /\ -->
     <!-- End Navigation Bar -->
</div>

The corresponding CSS for those divs are as follows:


div.div4 {background:#3F585C; width:800px; height:30px;}
div.div5 {float:left; width:127px; height:30px; background:url(images/link_about.gif);}
div.div6 {float:left; width:141px; height:30px; background:url(images/link_design.gif);}
div.div7 {float:left; width:127px; height:30px; background:url(images/link_templates.gif);}
div.div8 {float:left; width:129px; height:30px; background:url(images/link_programming.gif);}
div.div9 {float:left; width:142px; height:30px; background:url(images/link_archive.gif);}
div.div10 {float:left; width:134px; height:30px; background:url(images/link_contact.gif);}

When this code is used in IE6, it creates an extra 4 pixels worth of space on the right hand side of the images, so I have to push the containing div out to 804px to keep the images from wrapping to a new line. I narrowed this problem down to the comment tags, so if I use the following code:


<div class="div4">
      <div class="div5"></div>
      <div class="div6"></div>
      <div class="div7"></div>
      <div class="div8"></div>
      <div class="div9"></div>
      <div class="div10"></div>
</div>

the navigation works fine with no phantom spaces, but it makes my HTML file much harder to navigate without commentation. Does anyone know why IE6 would turn comments into visible space? Thanks in advance =)