Page 1 of 1

Help with errant cell spacing

Posted: Thu Mar 13, 2008 3:13 pm
by pickle
I thought it'd be a neat idea to make rounded corners on a table I'm building. I used the common approach of setting the cell background to the main background image & right corner, with a div inside it having the left corner image.

The trouble I'm having is that both browsers I'm testing (Firefox & Safari) are putting an extra 1 pixel spacing on either the left or the right of my table row

Safari:
ex1.png
ex1.png (3.07 KiB) Viewed 379 times
Firefox:
ex2.png
ex2.png (3.07 KiB) Viewed 377 times
Here's the relevant XHTML:

Code: Select all

    <table class = "fancy">
        <tr class = "header">
            <th>
                <div>
                    Peace River
                </div>
            </th>
        </tr>
        <tr class = "stroke">
            <td>
                test
            </td>
        </tr>
        <tr class = "stroke">
            <td>
                test again
            </td>
        </tr>
        <tr class = "stroke">
            <td>
                third test
            </td>
        </tr>
        <tr class = "stroke">
            <td>
                fourth test
            </td>
        </tr>
    </table>
And here's the relevant CSS:

Code: Select all

table.fancy{
    border-collapse:collapse;
    border-spacing:0;
    border-width:0;
    width:100%;
}
table.fancy tr.header{
    color:#fff;
    height:25px;
    line-height:25px;
    padding-left:0;
}
table.fancy tr.header th{
    margin:0;
    background: transparent url(/include/templates/images/fancy-right.png) no-repeat top right;
    text-align:left;
    padding:0;
}
table.fancy tr.header th div{
    background: transparent url(/include/templates/images/fancy-left.png) no-repeat top left;
    padding-left:5px;
    padding-right:5px;
}
table.fancy tr.stroke{
    border:1px solid #bfbfbf;
}
Nowhere in my CSS do I set the margin or padding for a non-specific (class or id-wise) element.

Any ideas what's causing this?

Re: Help with errant cell spacing

Posted: Thu Mar 13, 2008 3:18 pm
by Christopher
Is it possible that you need to reset background-position to 0,0 ?

Re: Help with errant cell spacing

Posted: Thu Mar 13, 2008 3:33 pm
by pickle
I am setting the background position - at the tail end of the "background" declarations.

Re: Help with errant cell spacing

Posted: Thu Mar 13, 2008 3:57 pm
by HCBen
I have discovered that css border-collapse and border-spacing are inconsistent and unreliable with some browsers and so, to ensure that my tables do not have unwanted padding or spacing, I include the classic, tried-and-true table attributes: cellpadding="0" and cellspacing="0".

I bet that'll help.

Re: Help with errant cell spacing

Posted: Thu Mar 13, 2008 4:40 pm
by pickle
I wish - it didn't.

Thanks though.

Re: Help with errant cell spacing

Posted: Thu Mar 13, 2008 5:45 pm
by Christopher
Have you checked browser reset. They have some notes about making tables the same.

Re: Help with errant cell spacing

Posted: Fri Mar 14, 2008 2:09 pm
by pickle
Ya, I have taken a look at that. I copied in the table relevant styles & they didn't help at all.

Re: Help with errant cell spacing

Posted: Fri Mar 14, 2008 3:41 pm
by HCBen
Here's my attempt: http://www2.hanover.edu/test/fancytable/

I tried to reproduce your styles as much as possible and wasn't sure what your bg images looked like, but this looks right.
The border-collapse and border-spacing css styles don't seem to play nice.

Anyway, it's not a solution but maybe an alternative. :wink: