CODEWITHSUNDEEP
htmlhtml-table
TrapezeArtist
TrapezeArtist

Reputation: 907

Displaying Bottom Border of a Table - Erratic in Chrome

I am having a problem with a table bottom border occasionally not showing in Chrome. At least, I think it's only Chrome: being an erratic problem, it's a bit hard to be sure.

The tables in question are the "Little Hotels Featured Hotel", "Review of the Week", "Subscribe to Our Newsletter" and "Find Us on Facebook" boxes at the bottom of http://www.littlehotelsofspain.co.uk.

The code is:

<table width="364" border="1" bordercolor="#999999" style="border-collapse:collapse">
<tr>
<td height="32" bgcolor="#EDEFF4" style="padding-left:10px">
<font face="Tahoma, Geneva, sans-serif" color="#333"><strong>Little Hotels Featured Hotel</strong></font>
</td>
</tr>
<tr>
<td style="padding-left:10px">
<br>
<?php dadedadeda ?>
</td>
</tr>
</table>

Typically when I open the page, one or two of the bottom borders are not showing. Moving the scroll slider up and down so the problem area disappears and reappears sometimes corrects or changes it.

Upvotes: 3

Views: 3845

Answers (3)

Steve O
Steve O

Reputation: 5774

So after having the same issue it appears that border-collapse:collapse is the issue in webkit browsers. The fix that seemed to sort it for me was to change it to border-collapse:separate.

Upvotes: 2

Arjen
Arjen

Reputation: 11

I've recently had trouble rendering table borders in Chrome. A quick fix that helped me was to define the tr as display:block.

Upvotes: 1

MainStWebGuy
MainStWebGuy

Reputation: 41

looked fine to me too... one option (if you want to go to the trouble) would be to wrap the table in a div with 2px padding.

Chrome 20 on iMac looked fine though.

Upvotes: 0

Related Questions