CSS Browser Compatibility Issue - <hr />

Question

In my HTML I have this table setup which is composed of separated images for each table cell. I have a < hr /> break at the bottom of the div, separating the table from the rest of the content. When I test on Chrome it shows correctly, however in Firefox the line break isn't aligned properly, it's pushed up a few pixels.

The second issue is with the images. Between the second and third table cells, there is a gap of white space, about 2px wide, separating the images.

I'm not exactly sure if this is browser compatibility issue, but how do I fix it?

http://jsfiddle.net/Fe7DC/ - JSfiddle with the code

<div class="fade" id="Latest-Stories">
               <h3 class="section-header"> Son Xəbərlər </h3>
                     <table id="stories-preview" width="330" height="598" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                   <td id="tablecell1"><a id="link_1"> <img id="img1" src="NewsBarAZ/Article-Nav-Bar2_01.gif"  alt="" /></a></td>
                            </tr>
                            <tr>
                                   <td id="tablecell2"><a id="link_2" ><img id="img2"  src="NewsBarAZ/Article-Nav-Bar1_02.gif" alt="" /> </a></td>
                            </tr>
                            <tr>
                                   <td id="tablecell3"><a id="link_3" ><img id="img3" src="NewsBarAZ/Article-Nav-Bar1_03.gif"  alt="" /></a></td>
                            </tr>
                            <tr>
                                   <td id="tablecell4"><a id="link_4" ><img id="img4" src="NewsBarAZ/Article-Nav-Bar1_04.gif" alt="" /></a></td>
                            </tr>
                            <tr>
                                   <td id="tablecell5"><a id="link_5" ><img id="img5" src="NewsBarAZ/Article-Nav-Bar1_05.gif" alt="" /></a></td>
                            </tr>
                     </table>
   </div>
   <hr />
#Latest-Stories {
    width:1000px;
    height:598px;
    padding-bottom:36px;
    background-color:#FFF;
    padding-left:20px;
}
#stories-preview {
    float:right;
    border-left:2px groove;
    border-right:2px groove;
    border-top:2px groove;
    border-bottom:1px solid #9A9A9A;
}

Answer 1

I must say that i am not a big fan of using tables for non tabular data, a list would probably be more appropriate here. That is besides the question however.

The implementation of hr is very browser dependent and therfore i hardly ever use it (wait till you start testing in IE...). My advise would be to replace it with a div with a class of .hr and style it to your wishes in css.

An example:

<div class='.hr'></div>

.hr {
  padding-top: 5px;
  border-bottom: 1px solid #000;
  margin-bottom: 5px;
}

If you are not happy with the default border, you could even use a small image and repeat it along the x axis. Don't forget to give your div some height in this case though.

As for the gap between the images, I do not have an imediate explanation for this. Perhaps it has to do with the actual images, that might have some transparent pixels on the top or bottom. Hard to tell without the actual images though.

Answer 2

Normally I add css styling to my hr elements:

line-height: 0.01;  
height: 1pt;  
border: 1pt solid black;  
border-width: 0 0 1pt 0;  
background: transparent;

And to avoid problems with erroneous spacing between cells and rows, I usually omit ALL whitespace from between the tags in my source code. Yes, makes for a difficult read, but some browsers just refuse to behave.