Can't get a dotted line to work in both IE and Mozilla

[liunx]

I want a horizontal dotted line, but I can't get it to work in both IE and Mozilla.<br />
<br />
HTML:<br />
<table width="780" border="0" cellpadding="5" cellspacing="0" ><br />
<tr><br />
<td><br />
<table width="100%" border="0" cellpadding="0" cellspacing="0" ><br />
<tr class="dot"><td colspan="3"><div /></td></tr><br />
<br />
CSS:<br />
.dot {<br />
background-image: url(/myserver/images/dot.gif);<br />
height: 1;<br />
}<br />
<br />
This will paint a beautiful dotted line in Mozilla! In IE, though, it doesn't show a single dot...<br />
<br />
Regards<!--content-->And stop using tables for layout. Your problem is that Mozilla correctly will not recognize empty cells.<!--content-->I finally got it to work! Yep, I put the class in the table cell instead of the row. Then the height property started working. Then I added background-repeat and it worked.<br />
<br />
I had the div tag in the cell because I thought I had to have something in there. Obviously I don't... I checked.<br />
<br />
Okay, you say I shouldn't use tables for layout, but you don't offer any alternative methods?<br />
<br />
Thanks guys!<br />
<br />
HTML: <br />
<table width="780" border="0" cellpadding="5" cellspacing="0" > <br />
<tr> <br />
<td> <br />
<table width="100%" border="0" cellpadding="0" cellspacing="0" > <br />
<tr><td colspan="3" class="dot"></td></tr> <br />
<br />
CSS:<br />
.dot { background-image: url(/myserver/images/dot.gif);<br />
background-repeat: repeat-x;<br />
background-position: center;<br />
height: 1px;<br />
}<!--content-->Use whatever you want for layout, just not tables <br />
Try a DIV.<!--content-->