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