[Help] Formating/Resolution problem in a Custom Sheet

Hi ! I have a quite strange problem. First I have to tell that it's the first time I'm coding, and that my Html and Css are problaby as horrible as hell, but all is working so that's ok for me. Also please excuse my english as it's not my native language. Some of my players are able to see my character sheet normally (as I can see it, all well placed) while some others see an ugly one with all things misplaced. I saw with one of them that if he zoom/dezoom, the character sheet seems quite lot mine but still got some major misplacement (as if my containers size changed). And it's not a problem of navigator (we tried mozilla and chrome, same problem). Do you have any idea ? I don't know how to post spoiler or similar for my Html and Css, so if you need them just tel me how ([spoiler][/spoiler] didn't seemed to work) Thank you A LOT !

WE can't say much without yer code.  Okay, being honest, I can't say much without yer code.  If you can, copy and paste it here, or, better yet, put it on a cloud drive other people can access so we can see exactly what's going on.  You an also put it in a jsfiddle, but there is no guarantee that it will display correctly.  Don't worry about the spoiler tag; I don't know how to make one either.   You can also put it in a campaign, and drop the link here so we can see the end product, but I would need to see the code(2) before I can help.

These forums have no spoiler tag (and in fact do not use any form of BBCode). You can format a code block by clicking the Formatting (¶) button in the top-left of the Post Reply box and selecting "Code". If you've got a lot of code, it's probably better to create a  Short, Self-Contained, Correct Example instead of your entire  sheet. You can also use services such as  gist or  pastebin to share a larger piece of code.

Html : <a href="http://pastebin.com/KpFp9rhS" rel="nofollow">http://pastebin.com/KpFp9rhS</a> Css : <a href="http://pastebin.com/9AK7ruJ6" rel="nofollow">http://pastebin.com/9AK7ruJ6</a> And if you want a campaign : Campaign Link : <a href="https://app.roll20.net/join/1107514/RZ8I8Q" rel="nofollow">https://app.roll20.net/join/1107514/RZ8I8Q</a> The problem doesn't seem that hard it's just like an incompatibility between player's machine as I did a non-professional work. It seems that the "amount of workable area" in my divs are different in my computer than in some others. When I'm using "sheet-colrow", it seems that my columns are slightly larger than theirs, and in most of my columns I'm using all the space before it line breaks, but in my friends's one the line breaks in a shorter amount of space, making crap style at the end. Thanks for all !

actually, it would be even better if you could post screenshots of the correct and incorrect sheet (you can use <a href="http://ctrlv.in/" rel="nofollow">http://ctrlv.in/</a> or the like to host them).

Also, what browser are those players using? &nbsp;If it's IE, that is likely your problem; so have them us Chrome or Firefox (the only two supported browsers by Roll20).

He/she/it mentioned trying Mozilla and Chrome, so no joy there. First things first, this is a very pretty sheet. &nbsp;Well done. I don't see any huge misplaced/incorrect placements. though not everything is perfectly lined up (the drop-down menu's, for example) but everything looks good. &nbsp;I tried expanding the sheet, and zooming in and out, and couldn't replicate the issue. &nbsp; But, wow, this is a nice looking sheet

Thanks for the responses. And so as he said, they're using mozilla and chrome, not Ie, and same problem. Also I've seen that when I go to a zoom of 33% it begins to be misplaced. Here is what I&nbsp;see, and what it should be like for my players on the top, and on under it what they see&nbsp;: <a href="http://ctrlv.in/667390" rel="nofollow">http://ctrlv.in/667390</a> (with magnificent red indicators) P.S.: I promoted you (Coal Powered Puppet) in gm in my campaign, I don't know if you need that or not to see everything.

Right now you rely mostly on inline block behavior for aligment and your elements and parents using different width settings (fixed vs dynamic) causing them to shift all over the place once the window gets too smal. I've updated the first two tabs an put it here for testing: <a href="https://jsfiddle.net/98n7nrgv/" rel="nofollow">https://jsfiddle.net/98n7nrgv/</a> You didn't post a picture of the second one so I formated it as it seemed to make sense... The code is cleaned up and using divs and semi tables to keep the layout in check till the 3rd tab, also made it so that most fields use dynamic widths to be able to use more space on large resolutions. Try it out and see if this works for you and your players (first 2 tabs). If it works for you I can do the rest too. HTML: <a href="http://pastebin.com/BGf9bhQ7" rel="nofollow">http://pastebin.com/BGf9bhQ7</a> CSS: <a href="http://pastebin.com/N63kEuVJ" rel="nofollow">http://pastebin.com/N63kEuVJ</a>

Coal Powered Puppet said: He/she/it mentioned trying Mozilla and Chrome, so no joy there. Sorry...missed that. :(

Thanks a lot Loki, now it's looking like this : (here is the 2nd page as it has to be : <a href="http://i.imgur.com/jNS8HfN.png" rel="nofollow">http://i.imgur.com/jNS8HfN.png</a> ) 1st corrected :&nbsp; <a href="http://i.imgur.com/pGPO2AH.png" rel="nofollow">http://i.imgur.com/pGPO2AH.png</a> 2nd corrected : <a href="http://i.imgur.com/EbyMv5f.png" rel="nofollow">http://i.imgur.com/EbyMv5f.png</a> It's not looking nice, but at least it's constant for every one. And it's strange because in your jsfiddle it looked correctly.

I emmulated some of the default classes of roll20, so that may be it. Will take a look at it tomorrow =)

Anyone else have an idea ? Thanks Loki for the time you're wasting for me haha !

So ? No more responses ?