1

We have a items lined up in a table with no borders or padding. Each first row contains a graphic and the row immediately below is either blank or contains an anchor link to a disclaimer. The link should be closer to the graphic directly above it, but there's still a big gap.

What can I do to format the table so that the graphics and the disclaimer link can be closer?

This is the link to the page I'm working on: http://edenred.jp/for-beneficiaries/for-current-beneficiaries/main-affiliates-list.aspx

Here is a sample of the code: (this was taken from the third row from the bottom)

    <tr>
        <td>
            <span style="font-size: 14px;"><a href="http://www.tenya.co.jp/index.htm" target="_blank"><img alt="てんや" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo35-(1).gif.aspx" style="width: 160px; height: 48px;" title="てんや" /></a></span></td>
        <td>
            <span style="font-size: 14px;"><a href="http://www.kisoji.co.jp/torikaku/" target="_blank"><img alt="とりかく" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo36-(1).gif.aspx" style="width: 160px; height: 48px;" title="とりかく" /></a></span></td>
        <td>
            <span style="font-size: 14px;"><a href="http://www.gankofood.co.jp/group/tonkatsu/" target="_blank"><img alt="とんかつがんこ" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo37-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつがんこ" /></a></span></td>
        <td>
            <span style="font-size: 14px;"><a href="http://www.hamakatsu.jp/" target="_blank"><img alt="とんかつ浜勝" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo38-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつ浜勝" /></a></span></td>
    </tr>
    <tr>
        <td style="text-align: right; vertical-align: top;">
            <span style="font-size:14px;"><a href="#a01">※1</a></span></td>
        <td style="text-align: right; vertical-align: top;">
            <span style="font-size:14px;"><a href="#a01">※1</a></span></td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Tensigh
  • 1,030
  • 5
  • 22
  • 44
  • have you set cellpadding=0 and cellspacing=0 in table tag? – Ganesh Pandhere Sep 19 '13 at 04:48
  • Please post all relevant code including CSS. Or Better still provide a code and a fidle. We will be stuck if you change the code in your link provided – Jon P Sep 19 '13 at 04:56
  • Ganesh gave the answer below. But you really should learn the tools of the trade; see Jon's answer. And I wonder why each and every one of those table cells contains a span with an inline style. Why not put those in the stylesheet file? – Mr Lister Sep 19 '13 at 05:01
  • Mr Lister - do you know how to do that in Kentico, 'coz I don't. Jon's answer looked pretty good. – Tensigh Sep 19 '13 at 05:53

4 Answers4

3

This is generally caused when you do not define cellspacing=0 and cellpadding=0 while writing table tag. Please check for it.

In your code, I can see that you have applied 10px padding to the class .cpMain td

And 5px right padding is applied to .fruitboxDeliveryForm table.customer td, .simpleForm td

Removing or setting them to 0 these may help you achieve it.

Ganesh Pandhere
  • 1,612
  • 8
  • 11
  • 1
    Or add a specific class to the final rows to style them. +1 for the investigative work of delving through code that was not suppplied. – Jon P Sep 19 '13 at 04:59
  • Ganesh, thank you, I will check for that. This page was designed in Kentico which is an awful, awful, CMS. I will look for those and check back. – Tensigh Sep 19 '13 at 05:51
3

You have padding set to 10px:

.cpMain td {
    vertical-align: top;
    padding: 10px; // play with it, change to padding: 0px for the beginning
    width: 220px;
}

remove it and it will look good.

Or you can create a css class below the .cpMain td class:

.table-no-padding td {
    padding: 0px;
}

and add this class to the list of css classes in your html:

<table class="table-no-padding">
    <!-- td content -->
</table>
Shalom Aleichem
  • 2,987
  • 2
  • 22
  • 34
  • Thank you; I will set that. – Tensigh Sep 19 '13 at 05:52
  • Where did you see that - in the page itself? – Tensigh Sep 19 '13 at 05:54
  • It's coming from [**GetCSS.aspx**](http://edenred.jp/CMSPages/GetCSS.aspx?stylesheetname=EdenredCN). The css rule is: `.cpMain td.EditingFormLabelCell` – Shalom Aleichem Sep 19 '13 at 05:58
  • Alex, thank you. Kentico doesn't let me edit the CSS directly; I'll have to see where to edit that for this table alone. – Tensigh Sep 19 '13 at 06:30
  • You can define `style="padding:0px;"` on the `td` elements in the html. The inlined styles will override those provided by Kentico. – Shalom Aleichem Sep 19 '13 at 06:34
  • Alex, I found where I can edit that in Kentico. If I change that, will it affect all tables for the site or just this one page? I've made changes in Kentico before that seemingly would affect only one page and the change gets passed on to other pages on the site. What should I check to ensure that doesn't happen? – Tensigh Sep 19 '13 at 06:35
  • Currently it will affect all the `td` elements within elements with `cpMain` class. If you want to avoid that and set specific padding only for `td`s of the particular table, you should add an extra css class to the table and override `padding` there. – Shalom Aleichem Sep 19 '13 at 06:41
  • So Alex, would I create a new object called table-affiliate and define the parameters there, then only use that object for this table? – Tensigh Sep 19 '13 at 07:10
  • Oh yeah, and how do I set Stack Overflow to notify me of comments to questions I ask (I can't find this setting in my profile) – Tensigh Sep 19 '13 at 07:10
  • Alex, that TOTALLY did it! Thank you! You taught me a lot about CSS classes with this, thank you. – Tensigh Sep 19 '13 at 07:29
1

Browsers have a default display for every element. You can uses a tool like firebug for firfox to inspect elements and see what they are for yourself. If you do not explicitly set the style the default will be used.

Using a tool like firebug will also show you where applied styles are coming from

Use CSS to set the style as required. :Set cellpadding and cellspacing in CSS?

Community
  • 1
  • 1
Jon P
  • 19,442
  • 8
  • 49
  • 72
0

In each td of the anchore, set padding-top to 0

padding-top="0px"

eg 

<td style="text-align: right; vertical-align: top;padding-top:0px;">
                <span style="font-size: 14px;"><a href="#a08">※8</a></span></td>

hope it helps :)

user2685803
  • 271
  • 1
  • 3