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

Sharpe

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!

greyelf

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.

Sharpe

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.

greyelf

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;
}


Sharpe

Thanks a lot! That worked. I really appreciate it! 

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.

greyelf

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*