›

[Sugarcane][1.4.1] Table Padding—What Am I Doing Wrong?

SharpeSharpe
in Help! with 1.x
Maybe I'm just really tired, but what am I doing wrong here? There's seemingly no padding. Tested latest Chrome, FF, IE.

Stylesheet:
table {
margin-right: auto;
margin-left: auto;
width: 900px;
border: solid 1px;
padding: 100px;
}

th, td {
text-align: left;
padding: 100px;
}
Passage:
<table>
<tr>
<td>Club</td>
<td>+5</td>
<td>10G</td>
</tr>
<tr>
<td>Axe</td>
<td>+10</td>
<td>50G</td>
</tr>
<tr>
<td>Sword</td>
<td>+15</td>
<td>3000G</td>
</tr>
<tr>
<td>Leather Armor</td>
<td>+2</td>
<td>100G</td>
</tr>
<tr>
<td>Mail Armor</td>
<td>+5</td>
<td>500G</td>
</tr>
<tr>
<td>Plate Armor</td>
<td>+10</td>
<td>2000G</td>
</tr>
</table>
I copy and pasted my code into a regular HTML document made with Notepad and it worked fine . . . Inspected element in Twine build and padding is crossed out, but I don't know why or what that means.

It's probably something small my sleep-deprived brain just isn't catching.

Attached is above in a tws.

Thanks!

Comments

  • greyelfgreyelf
    The <table> tag itself does not support "padding", you apply it to the <th> and <td> tags as explained here

    If on the other hand you are tying to add a space around the outside of the table then use "margin" instead.
  • SharpeSharpe
    Notice in the above code I posted that I added padding to the <th> and <td> tags (in addition to table, because I was reaching for a solution). Like I say, I made a simple page in Notepad and it worked fine.
  • greyelfgreyelf
    The reason your TH and TD padding rule is being overwritten (which is why it appears as padding in debugger) is because of the following in-built Sugarcane rule is more precise than your own.

    .passage th, .passage td, .passage tr, .passage caption {
    padding: 3px;
    }

    Change your rules so they apply to tables within passages will work:
    NOTE: I removed "padding" from table rule because it is not valid.

    .passage table {
    margin-right: auto;
    margin-left: auto;
    width: 900px;
    border: solid 1px;
    }

    .passage th, .passage td {
    text-align: left;
    padding: 100px;
    }
  • SharpeSharpe
    Thanks a lot! That worked. I really appreciate it!  :D

    Sometimes, working with CSS can require patience. Dealing with CSS and Sugarcane requires the patience of Job. Sugarcane's CSS is my least favorite part of Twine.
  • greyelfgreyelf
    I agree that Sugarcane adds an extra level of complexity to CSS that makes life more interesting than it needs to be. lol

    Be thankful for CSS debuggers like Firebug and Chrome. *smile*
Sign In or Register to comment.