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

[m0llbuz_]

I want a horizontal dotted line, but I can't get it to work in both IE and Mozilla.

HTML:
<table width="780" border="0" cellpadding="5" cellspacing="0" >
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr class="dot"><td colspan="3"><div /></td></tr>

CSS:
.dot {
background-image: url(/myserver/images/dot.gif);
height: 1;
}

This will paint a beautiful dotted line in Mozilla! In IE, though, it doesn't show a single dot...

Regards

[Charles]

And stop using tables for layout. Your problem is that Mozilla correctly will not recognize empty cells.

[m0llbuz_]

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.

I had the div tag in the cell because I thought I had to have something in there. Obviously I don't... I checked.

Okay, you say I shouldn't use tables for layout, but you don't offer any alternative methods?

Thanks guys!

HTML:
<table width="780" border="0" cellpadding="5" cellspacing="0" >
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr><td colspan="3" class="dot"></td></tr>

CSS:
.dot { background-image: url(/myserver/images/dot.gif);
background-repeat: repeat-x;
background-position: center;
height: 1px;
}

[brendandonhue]

Use whatever you want for layout, just not tables :P
Try a DIV.