Table border-collapse/separate problem in Firefox? 1

[superslurpee]

Hi,

I'm having a problem with border-collapse/separate in Firefox.

I have a table inside a container with a border on each cell. If I use border-collapse:collapse on the table the borders on the cells extend outside of the container.

If I use border-collapse:separate on the table, there is a 1px crack between the container and the border on the cells. I want the table and its cell border smack up against the container. IE does this the way I want but since IE is stupid, I'm assuming I'm doing something wrong!

Here's a very simple example of two tables, one with collapse and one with separate. Give them a try in Firefox and let me know your thoughts!

<div style="position:absolute; width:300px; left:200px; top:100px; height:100px; border:1px solid black;">
	<table width="50%" style="border-collapse:separate">
		<tr>
		        <td style="background:blue; border:10px solid red;">Separate 1</td>
			<td style="width:10px;"></td>
			<td style="background:blue; border:10px solid red;">Separate 2</td>
		</tr>
	</table>
</div>
	
<div style="position:absolute; width:300px; left:200px; top:300px; height:100px; border:1px solid black;">
	<table width="50%" style="border-collapse:collapse">
		<tr>
			<td style="background:blue; border:10px solid red;">Collapse 1</td>
			<td style="width:10px;"></td>
			<td style="background:blue; border:10px solid red;">Collapse 2</td>
		</tr>
	</table>
</div>

Thanks in advance!

--superslurpee--

http://www.a1websitetemplates.com

- Thousands of low cost, high quality website templates

 

[Vragabond]

I do believe you're struggling with the default value of cellspacing on a table, which is 1. If you're experiencing the problem only in Geckos, I suggest you use border-spacing to set it 0. I don't know if IE supports that property though.

 

[monksnake]

Based on what I saw with this code the position:absolute on the div is what's causing the problem. Take off the absolute positioning and see if it looks correct, albeit not in the correct place.

 

[superslurpee]

The position:absolute has no bearing on it. The border-spacing seems to. Using border-spacing:0px on the table with border-collapse:separate correctly renders the table against the container border. This is what I need so it will work perfectly.

While we're discussing it, what about the border-collapse though? This table is still 'hanging out' of the container box. If I wanted the two table cells to have one border between them, how could I stop the entire table from hanging out?

--superslurpee--

http://www.a1websitetemplates.com

- Thousands of low cost, high quality website templates

 

[superslurpee]

Just a follow-up, you still need the cellspacing="0" for IE!

Thanks!

--superslurpee--

http://www.a1websitetemplates.com

- Thousands of low cost, high quality website templates