Howdy, Stranger!

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

Styling Lists

In an effort to reduce white space, I'm trying to stye lists. I've managed to get rid of all the white space around lists except from above. I'm a total newbie at CSS, HTML, and Twine all three, so I'm surprised I even got this far. 

Here's what I have:
ul {margin:0px; }
ul { padding:0px; margin-top:0px; margin-bottom:0px; margin-right:0px; margin-left:0px; }
I don't think the padding property did anything, but I left it. I just had "margin:0px", but I wanted to be more specific since the desired result wasn't achieved. The results are identical.

There seems to remain a single line of white space above the lest.

Any advice or suggestions?



  • I too am newbyish at all the things you mentioned, but I recommend you open your generated game in a browser, open Firefox's built-in Inspector (or its equivalent in other browsers), and then move the mouse cursor over that white space above your list, to see which portion of code that white space actually belongs to (Inspector will show you). Sometimes its surprising what you see. :P
  • Well, I am surprised, but that's not hard to accomplish for a newbie like me.
    Text here.
    * Stuff.
    * Stuff.
    * Stuff.
    More text.
    Between "Text here" and the list were two <br>'s.  :o ???

    It really doesn't bother me. I just don't know why the second one is there. I guess lists always add one <br>? I mean, that's fine if they do.
  • I was having the exact same issue. I gave up, because it was taking too much time and I wanted to focus on the dang story. But before I gave up, I found a macro (on the Trainwrecks site?) that let you put a "\" in your code to get rid of one Twine-generated line break. I think I was able to get rid of one but not two sequential line breaks that way. Now Twine 1.4 has that functionality built in. I don't know if you would have better luck than me.

    [quote]Ending a line with \ will cause that line break to be removed from the rendered text. This can be useful when dealing with long chains of if macros.

    If not, the other thing I can think of, if the <br> is inside the <ul> or inside a <div> or something,  is to style line breaks inside ordered lists (or inside a div, or whathaveyou) to have a vertical height of zero. I don't know if it's actually possible to style <br>'s that way, but I know you can do that to a lot of HTML elements with CSS.

    Edit: Okay, looks like you wouldn't literally give the <br> a line height of zero: How to change the height of a <br>?.

    There's a lot of solutions listed there but this sounds easy: "You don't seem to be able to adjust the height of a BR, but you can make it disappear reliably using display:none"

    The hard part, possibly, would be applying it only to the specific <br> that you want to get rid of.
  • In Twine 1.4 at least, I think you can just
    * bar
    * baz
    * quux
    to remove any physical <br> elements before a list, and using the padding/margin removal code (which btw the left/right removal lines shouldn't be necessary) above should remove the additional vertical whitespace. That works for me in both Sugarcane and Jonah targets, at least.
  • Sharpe wrote:

    Well, I am surprised, but that's not hard to accomplish for a newbie like me.
    Text here.
    * Stuff.
    * Stuff.
    * Stuff.
    More text.
    Between "Text here" and the list were two <br>'s.  :o ???

    Really? I just tried a demo right now and I only saw one:
  • I thought there were two in Firefox, but the second is an </br>. What I mean, tough, is that there is a line of white space between the text and the list.

    Again, it doesn't bother me. I'm sure the white space is there for good reason, I just don't know what that is (nor, at this point, am I all that interested ;)).

Sign In or Register to comment.