Need help with my sheet's problem, confused.

Here's another "I'm trying to learn/re-learn CSS" post. I haven't actively programmed anything for web use in at least a decade, so I figured it's about time to brush up on my knowledge. I'm trying to make a new character sheet based on a game some friends are developing. I've been building it on jsfiddle, and it's turning out fine for how much effort I've put in so far. The problem being, when I import what I have into Roll20 everything seems to go haywire. My sheet in jsfiddle looks like However in Roll20 it looks like I've made sure everything has the appropriate prefix (attr_, roll_, sheet-, etc.), so I'm stumped as to what happened. My HTML My CSS

The first thing I would recommend would be to create a styles for the input fields where you specify their width. Something like: .sheet-attribute { width: 100px; } And then you'd do something like: <input class="sheet-attribute" name="attr_Strength" type="text" maxlength="2" pattern="([0-9]|[0-9])" value="1" size="1"> <button type='roll' value='/roll @{Strength}d10 + @{StrengthBonus}' name='roll_Strength'>Roll</button> That would constrain your input fields to 100px. Then you can mess around with that a bit more. For example, since it looks like Strength can only be 2 characters and both of them numeric, you could actually get away with something more like: <input class="sheet-attribute" style="width: 45px;" name="attr_Strength" type="text" maxlength="2" pattern="([0-9]|[0-9])" value="1" size="1"> And since that 's a number, instead of text a field, just make it a type="number" and then they could only input numbers into that field. There will likely be others around who can give more specific information/examples. But it does seem that there are some default styles for the various input fields so if you don't override them (which your code is not, because it's not specifying a width, or height, etc), then those fields will use the defaults. I hope this helps a little.

Makes sense, I'll give it a go and see what happens. Thanks. I should say I'm more versed in HTML, so when it came to the CSS portion If I didn't know what I was doing, I would back-assward it with HTML. IE: My "number" boxes were too big, so I made them smaller "text" and limited the input to numeric. Edit: Awesome, everything lines up correctly now. I'm sure the code is still sloppy, but I'll worry about that later. Thanks for the help G V.

I'm in the same boat as you Erik. I'm learning and re-learning as I go. :-) A tip I will pass on to you is, cheat, borrow, steal, from other's character sheets. Everyone who has made a sheet for roll20 has already gone thru everything you are are experiencing for the first time. You can learn a ton by studying other's code. You may already be doing this. Cheers. p.s. Start with GV's Savage Worlds sheet. awesome.

Vince said: A tip I will pass on to you is, cheat, borrow, steal, from other's character sheets. Pretty sure he already is. Those tabs look like a familiar design. =P

Hey hey, gotta start somewhere, right? haha