Background cuts off. (Possibly a CSS question?)

CheeseMyBaby
01 May 2018, 12:17EDIT: I posted the wrong screenshot in that last link and now the forum won't let me update the thread.
Oh why oh why can't I do things right the first time around?
That's a highly valid question. None that I'm expecting an answer to btw.
Ok... I'm trying to update the thread again. Here goes.....
Since I can't draw for s**t my wife has been kind enough to help me bring my characters to life by sketching.
I've started to add drawings to the "look at"-command. It's working pretty well... however, it has a side effect I'm not to pleased with.
"Normal" background
See how the lighter shade of gray goes all the way to the bottom of the screen?

"S****y" background
See how the lighter shade of gray doesn't quite reach all the way down when looking at an object with an attached drawing to it?
AND how the drawing places itself below the input bar?
"Super s****y" background
If the player types "look at" the same character (or anything with a drawing attached to it) again this happens...
(it doesn't look great)
Any thoughts about this?

K.V.
01 May 2018, 13:10Are you floating it to the right?
What does the code look like???
mrangel
01 May 2018, 17:01For that, you want something like:
<style>
.portrait-image {
float: right;
clear: right;
}
</style>
That will ensure that if there's already an image at the right hand side, the new one will be pushed down to go under it.
Not sure why your background is cutting off; that's hard to diagnose without seeing your actual stylesheet.

CheeseMyBaby
01 May 2018, 17:18Sorry for not pasting the code.
It's:
msg ("<img src=\"http://rockstrom.com/bro/bj.png" + "\" style=\"padding:5px;float:right;\"/>")
msg ("Bum Jesus, the local alley bum.... etc etc.")
I floated it to the left first, it looked better but the way it messed up the interface was worse so I tried changing it.

K.V.
01 May 2018, 17:22I'd do it like this:
if (GetBoolean(player, "indumpster")) {
msg ("B.J. looks at you intently.")
}
else {
firsttime {
msg ("<table><tr><td>Bum Jesus, the local alley bum. He's actually a decent guy. He doesn't say much. He asks for nothing. He leaves you alone. His beard is awesome! You think he's been in the war. A war. You're not really sure. He look like Jesus, if Jesus would've been a bum living in a dumpster in a shitty alley.</td><td>{img:bumjesus.png}</td></tr></table>")
}
otherwise {
msg ("<table><tr><td>Bum Jesus, the local alley bum. A pretty nice old man. He's got an epic beard!</td><td>{img:bumjesus.png}</td></tr></table>")
}
}
mrangel
01 May 2018, 17:26I think adding "clear: right;" to the image's style should sort out the later problem.
The background, it's cutting short because the image isn't laid out inside its parent element. On the div that has the light-grey colour applied (I'm guessing it's #divOutput maybe?) you could try setting overflow:auto
or overflow: hidden
, to force it to expand to contain its contents.

CheeseMyBaby
01 May 2018, 17:40Forgot you had access to my (now somewhat old) game file K.V.
You post had me very confused there for a while!
I'll do it like you've done it. Thanks a lot man!
And mrangel!
I'll remember your tips (when I say remember I mean copy/paste it into my very long document containing smart stuff I've learned on this forum) to try to make myself better.
Thanks to both of you...!!!

K.V.
01 May 2018, 17:41None of those changes effect it, mrangel. (I tried, because the table seems like a cheat.)

K.V.
01 May 2018, 17:43Forgot you had access to my (now somewhat old) game file
I downloaded what you've got on your game's main page and altered that code. (If that is somewhat old, you may want to update what you've got online.)
mrangel
01 May 2018, 17:54Ah; not sure what I'm missing, then.
Giving the image "align: right" instead of "float: right" might make a difference, but that's where the layout model starts getting complex.

CheeseMyBaby
01 May 2018, 18:02I downloaded what you've got on your game's main page and altered that code. (If that is somewhat old, you may want to update what you've got online.)
Aha, not that old then. I thought it was the file I emailed you a couple of days ago.
Giving the image "align: right" instead of "float: right" might make a difference, but that's where the layout model starts getting complex.
I'll leave it be for now. I have a lot of plans for the GUI in Act II, I will be forced to deal with problems like that right from the top (when I start working on it).