Not understanding why this code does not work in Google Sites HTML Box Gadget

Question

I am messing around with Google sites, trying to get some html code to actually work and I am running into a wall. Basically I want to be able to input html code as well as css styling without having to use inline styling, so I did a little research and sure enough it can be done. Supposedly all one needs is to add a HTML gadget and input the relevant code, click save and shezam! It should work. Problem is when I do it, it doesn't work at all.

I have looked at the following links for some guidance and it seems like I am doing everything properly:

1. https://productforums.google.com/forum/#!topic/sites/rk6RRHNefso
2. https://support.google.com/sites/answer/2500646?hl=en

The other strange part is, when I use the second links example, it works just fine, but when I remove the scripting portion of the example, it fails to produce the styled result just like my code. Here is a very simple example that I have tried.

Global Version

<style>

#tester {
 padding: 100px;
 height: 500px;
 width: 500px;
 border: 1px solid #0F0;
 background-color: #ff0000;
}

</style>


<div id="tester">please work 0_0</div>

Inline Version

<div id="tester" style="padding: 100px; height: 500px; width: 500px; border: 1px solid #0F0; background-color: #ff0000;">please work 0_0</div>

All I get out is the sentence with no formatting on the div itself. If I change it to use inline styling, it works just fine, but then that really defeated the purpose of the HTML box in the first place.

Any advice on what I am doing wrong?

Edit: Here is a JSFiddle with the test code above and what it is supposed to look like

JSFiddle

In addition, I should probably specify. The code I have provided works just fine and has no errors. The problem I am looking to solve is getting the first version (the non inline one) to work in Google Sites' Html box.

Answer 1

The HTML & CSS you include in "HTML Box" will be sandboxed, so you cannot use it to apply styles to elements in the rest of the page, unfortunately.

I got this to work on my site with the following code

<style type="text/css">
#tester {
padding: 100px;
height: 500px;
width: 500px;
border: 1px solid #0F0;
background-color: #ff0000;
}
</style>

<div id="tester">please work 0_0</div>

By default it seems that when you're in editor mode, none of the custom CSS in the HTML box is applied. If you go to the top right corner of the page, click MORE > Preview Page as Viewer it will display correctly.

HTML BOX View

Preview as Viewer