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
twitter: @Frak_Lou_Elmo
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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"
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:
Did I make a mistake?
Cheers,
Frak
twitter: @Frak_Lou_Elmo
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 :-(
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 it worked!
thanks everyone for the help!
twitter: @Frak_Lou_Elmo
Huzzah! Thanks to @ragnarhawk for the specific CSS to try...it would have taken me forever to figure that part out.
Obsidian Portal Developer
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!