Why does my sheet look better in the preview window than it does in the game?

I am really new at this, a total amateur, but if there some reason my custom sheet looks more how I want it to in the preview window for the custom sheet than it does in the game when I actually launch it?  What am I doing wrong here?

There are a few things here. The preview window is notoriously bad. It should pretty much never be trusted  Instead of developing in the custom sheet window, it is recommended to develop in the newer custom sheet sandbox and write your code in an idea like vacode I recommend using my auto code upload chrome extension to automate the updating of the sandbox code Sheets have two different sanitization engines that they can use; legacy and cse. You might have the legacy sanitization checkbox checked incorrectly for the sanitization that your code is built for. When you switch to the sandbox for development, you set this in the sheet.json text area on the sandbox's splash screen. Note that roll templates always use legacy sanitization regardless of what the sheet uses.

Hi Robert, you might post a couple screen shots to help us see the difference.  Normally you should not trust what you see in the preview tab on what actually displays in the game (that's what matters).  If you are using legacy code, you'll need to check the box "Legacy Sanitation" box on the game settings page.  Obviously uncheck if you are not. If that doesn't work, there may be something in your HTML and/or your CSS that is causing a conflict and you might need to post a link to your code(unless it's just sample at this point) Cheers EDIT: Scott is fast! ;-P   

Thanks for the responses. I have legacy unchecked. I have been attempting to use the sandbox too. I am sorry if I sound like a total noob here, it's because I am and have no idea what I am doing here, but when I am in the sandbox I am seperating out the json into a seperate file for the directory, but it still looks bad no matter if I do that or not.  Here is how I sorta want it to look and how it looks in the preview. 

and here is how it looks in the actual game 

How can I link my code? 

Since you are new to writing Roll20 character sheets, I'd recommend reading GiGs' blog on character sheets . For how to link the code to the sandbox, the autocode uploader extension has a video on it's page for how to do it with that. Note that the sheet.json needs to be manually entered into the splash screen though. Another thing to look for in your code is to check the specificity of your css. Roll20 applies default styling to many things. Your css needs to have an equal or higher specificity than the R20 css in order to override it. I typically recommend prepending all css declarations for the sheet with .ui-dialog .tab-content .charsheet. With modern CSS, you can do this easily by simply nesting your css declarations: .ui-dialog .tab-content .charsheet{ /* Your current css code here */ }

Thanks for linking me, Scott. Robert, I'd seriously reread Scott's first point: * The preview window is notoriously bad. It should pretty much never be trusted  The solution is not to get the preview window working for your sheet. The solution is to stop using the preview window altogether. I believe that's what every experienced sheet author does. If you want to see what a sheet looks like, the ONLY solution is to load up the campaign. I strongly recommend using the custom sheet sandbox - its much faster than the older method, and you don't nee a preview window, you see changes happen as you make them.