CSS Tables and Twine

CoraBlue

I'm using some extremely simple code to try and get this working and Twine seems not to like it. Is there alternate functionality? Am I doing something wrong?

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td style="height:100px">Red</td>
<td style="height:100px">Apple</td>
</tr>
<tr>
<td>Yellow</td>
<td>Banana</td>
</tr>
</table>

This code generates this:



As far as what I'm trying to accomplish, I have an inventory screen that I'd like to split into sections of specific pixel height and width.



Should I be using frames? Is there someway to get tables to behave? If anybody can help that would be tremendous.

L

For starters, did you try putting it in a <<nobr>> macro?

CoraBlue

Yes. I have tried that. <<nobr>> seems to ignore html tags, but even if I write it all on one line, the issue still occurs (albeit with less linebreaks).

Here's a screenshot of the code on a single line:

CoraBlue

I'm simulating the same effect with CSS styles like this in the mean time:

#invframe {
overflow:auto;
width:200px;
height:520px;
margin:4px;
padding:4px;
}

#moneyframe {
width:200px;
height:15px;
margin:4px;
padding:4px;
}

#avatarframe {
display:block;
float:right;
width:200px;
height:15px;
margin:4px;
padding:4px;
}

But it involves a bit of guesswork since I don't have control over rows, so this is definitely a work around.

xax

Oh! This is weird, it looks like your table html is messing with... some part of the Twine core, maybe the part that determines if the HTML literals you're writing are valid; I really have no clue. But it ends up inserting a whole lot of spurious <tr>s and <tbody>s all over

it looks like to fix it, you need to explicitly place a <tbody> tag in there:

<table border="1">
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td style="height:100px">Red</td>
<td style="height:100px">Apple</td>
</tr>
<tr>
<td>Yellow</td>
<td>Banana</td>
</tr>
</tbody>
</table>

which should look a lot more like what you're after. ...also, since it wraps those spaces used to indent in character spans, you might have to remove them to make it look perfectly "proper", otherwise there's some weird padding inside the table borders.

(The default sugarcane layout also changes table cell borders; you may or may not want to put

.passage table {
border-collapse: separate;
}

in a stylesheet to change it back)

CoraBlue

Awe, sweet. Tested and working. You are a gentleman and a scholar, sir! I appreciate the help immensely. That should do very nicely until this gets fixed.

Sharpe

Cora, if I could interrupt since it looks like you got your answer, how are you displaying those elements (e.g. #invframe)? You're using a <div> align attribute in your passages, right?

Just today, I really started to try to teach myself the basics of CSS, so I'm pretty new to this.

I know you have the #invframe in the stylesheet and I'm guessing you're using <div id="#invframe">Inventory</div>, right?

I don't see any positioning in your CSS, though.

Thanks!

CoraBlue

You've got it pretty much figured out. My Twine passage looks thusly right now:

<<nobr>>
<<set $inv.sort()>><center><p class="animated bounceInLeft"><messagebox id='invwindow'>

<div id=avatarframe>[img[scarf]]</div>
<div id=invframe><<invtest2>></div>
<div id=moneyframe><messagebox id='pinkwindow'>Money: <<$playerMoney>></messagebox></div>

</messagebox></p>

<<createbutton "Return!" goback>>

</center>
<<endnobr>>

So all the positioning is being done by the float property right now. I'm probably going to rewrite it now that we know how to get tables to work though.

Sharpe

CoraBlue wrote:

So all the positioning is being done by the float property right now.

Ah, yes. Thanks!

L

Ideally you should be using the TiddlyWiki syntax for tables... but I understand why people wouldn't.

L

P.S: Bug will be fixed in 1.4.1.