how to have images in a table "touch" eachother?

Frak_Lou_Elmo
Frak_Lou_Elmo

Hi all,

working on a new front page. :) 

can anyone help me with this table code? I want the pictures to touch eachother so it seems like one large picture (I will use the sections to that they link to different pages, hence using tables).

https://gaximplague.obsidianportal.com/wikis/test



this is how I did it, but there is still space between pictures :(

<table border="0" cellspacing="0" cellpadding="0">

    <tbody>

        <tr>

            <td>[[File:1147282  | class=media-item-align-none | left.jpg]]</td>

            <td>[[File:1147283  | class=media-item-align-none | center.jpg]]</td>

            <td>[[File:1147284  | class=media-item-align-none | right.jpg]]</td>

        </tr>

    </tbody>

</table>

Can anyone help me?

Cheers,

Frak

Comments

  • ragnarhawk
    Posts: 111

    I believe that you need to add border-spacing: 0 to your table

    <table border="0" cellspacing="0" cellpadding="0" border-spacing="0";>

    and padding:0 to each td

    <td padding="0">

    At  least, those worked when I modified the CSS on your page using "Inspect Element"

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 115

    I adapted as you said and yet there is still space:



    <table border="0" cellspacing="0" cellpadding="0" border-spacing="0">

    <tbody>

    <tr>

                <td padding="0">[[File:1147282  | class=media-item-align-none | left.jpg]]</td>

                <td padding="0">[[File:1147283  | class=media-item-align-none | center.jpg]]</td>

                <td padding="0">[[File:1147284  | class=media-item-align-none | right.jpg]]</td>

    </tr>

    </tbody>

    </table>

    however it still has spaces:

    image

    Did I make a mistake?

    Cheers,

    Frak

     

  • ragnarhawk
    Posts: 111

    Not sure what is going on.  It looks like your inline CSS is being overridden...

    Bad practice, but as a short term fix, maybe setting the new parameters to !important, and see if that fixes it :-(

  • thaen
    thaen
    Posts: 541

    Looks like the attributes of "border" and "border-spacing" are not being counted as "higher ranking" than the standard css styling.

    Try this ...

    Add a "class" to the table of "solid-image" (or whatever you want to call it) like this:

    <table class="solid-image">

    Then in your Campaign's Custom CSS, add this CSS to affect that class:

    .solid-image {

      border: 0px;

      border-spacing: 0px;

    }

    table.solid-image tr td {

      padding: 0px;

    }

     

    "cellpadding" didn't seem to be necessary to get the desired effect when I tested this, so I left it out, but I could be wrong.

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 541

    Huzzah!  Thanks to @ragnarhawk for the specific CSS to try...it would have taken me forever to figure that part out.

    Obsidian Portal Developer

  • gastoff
    gastoff
    Posts: 136

    I remember having spacing issues when I dove in to CSS on my campaign and it took me forever to discover that "margin" and "padding" were independent things when dealing with how elements interact. Then when I got to customizing my tables, I discovered "cellspacing", "cellpadding", "border-spacing" affected the layout in different ways too.

    I understand your pain all too well @Frak_Lou_Elmo...the CSS rabbit hole runs deep!

    image

Sign In or Register to comment.

May's Campaign of the Month is Baghdad on the Bayou!

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions