Help with errant cell spacing

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Help with errant cell spacing

Post 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 377 times
Firefox:
ex2.png
ex2.png (3.07 KiB) Viewed 375 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?
Last edited by pickle on Thu Mar 13, 2008 3:33 pm, edited 1 time in total.
Reason: Correcting CSS
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Help with errant cell spacing

Post by Christopher »

Is it possible that you need to reset background-position to 0,0 ?
(#10850)
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Help with errant cell spacing

Post by pickle »

I am setting the background position - at the tail end of the "background" declarations.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
HCBen
Forum Commoner
Posts: 33
Joined: Thu Jun 22, 2006 3:15 pm
Location: Indiana

Re: Help with errant cell spacing

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Help with errant cell spacing

Post by pickle »

I wish - it didn't.

Thanks though.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Help with errant cell spacing

Post by Christopher »

Have you checked browser reset. They have some notes about making tables the same.
(#10850)
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Help with errant cell spacing

Post by pickle »

Ya, I have taken a look at that. I copied in the table relevant styles & they didn't help at all.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
HCBen
Forum Commoner
Posts: 33
Joined: Thu Jun 22, 2006 3:15 pm
Location: Indiana

Re: Help with errant cell spacing

Post 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:
Post Reply