Horizontal Line issue in CSS

[Leventcos21]

My Horizontal bar looks good in IE7.0 and Firefox but in IE 6.5 the height of the bar is big. Am I doing something incorrect?

Thanks

  <div id="footer">
    <div class="HR">
   <div id="footnav"> Tel:  &nbsp; &bull; &nbsp;&nbsp; Fax: </div> </div>  </div>
    <div id="altnav">
     <p><a href=" index.htm">Home</a> -
       <a href="products.htm">Products</a> -
       <a href="location.htm">Location</a> -
       <a href="about.htm">About Us</a> - 
     <p></p>
   </div>

#footer .HR{
 background-color: #008F00; /* mozilla */
 border: 0px; /* fixes mozilla height */
 clear: left;
 color: #008F00; /* ie */
 float: left;
 height: 1px;
 margin: 4px 0px 4px 0px;
 width: 99%; 
}

[sandman]

you might be experiencing the double margin bug in IE -
use display: inline when using floats.
Let me know if that helps.
Rich

[Leventcos21]

Thanks for the quick reply,

I added the display: inline; into the CSS but there was no change.

[mwinter]

Can I ask why you aren't simply applying a bottom or top border, rather than involving something as needlessly complex as floats? Apply margins and padding to taste to separate content from the border.

Mike

[sandman]

Without knowing what your layout is - I think this is what you are looking for.

<div id="footer">
   <div id="footnav"> Tel:  &nbsp; &bull; &nbsp;&nbsp; Fax: </div> 
    <div id="altnav">
     <a href=" index.htm">Home</a> -
       <a href="products.htm">Products</a> -
       <a href="location.htm">Location</a> -
       <a href="about.htm">About Us</a> - 
   </div>
</div>

#footer{
border-top:  1px solid green;
 clear: left;
 color: #008F00; /* ie */
 float: left;
 display: inline;
 height: 1px;
 width: 99%; 
}

You had a few p tags about, depending on your need for them - you could give your divs padding or margins - since this is not a paragrapgh they were not necessary.

[mwinter]

Without knowing what your layout is ...

With the same caveat...

#footer{
 border-top:  1px solid green;
 clear: left;
 color: #008F00; /* ie */
 float: left;
 display: inline;
 height: 1px;
 width: 99%; 
}

Most of those properties were applied to the (probably) unnecessary "HR" div child. I should think that only the top border is necessary, plus a bit of padding to keep the content away from the border:

#footer {
    border-top: 1px solid #008f00;
    margin-top: 4px;
    padding-top: 4px;
}

You had a few p tags about ... since this is not a paragrapgh they were not necessary.

Indeed. If anything, those links should be marked up as a list (without the hyphens), and style appropriately. The "altnav" div can then be removed, too (perhaps placing that id attribute on the list element).

Mike

[sandman]

agreed Mike - I wasn't sure what all the extra properties were for, so I left them in case it broke anything on his side...and a list of links should definitly be marked up as a list.

Rich