I'm trying to work out the positioning and formatting for a weapon attachments selector. However when I preview it on Roll20 it looks nothing like when I preview it in a browser. I made sure to use the "sheet-" prefix but I'm not sure what else would make it act this way. I originally had it set up as a grid container and would make the select boxes appear in appropriate grid segments. I thought I'd be simplifying the process by skipping to giving the elements their own relative position based on the container element. The reason I didn't originally put the option elements on absolute position is because I plan to include this attachment selector inside of another element on the sheet. So it's position may not always be fixed on the same spot. Preview from Roll20 Preview from the HTML file in a browser Edit: oops, forgot to post code CSS .sheet-weapon_rifle-gridContainer{
background-image: url('<a href="https://i.imgur.com/kQEdjib.png" rel="nofollow">https://i.imgur.com/kQEdjib.png</a>');
width: 700px;
height: 240px;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: contain;
display: grid;
grid-gap: 5px;
background-color: #2196F3;
padding: 5px;
background-position: center;
}
.sheet-weapon_rifle-gridContainer > div {
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
padding: 0px;
font-size: 1em;
}
.sheet-weaponOption {
height: 30px;
width: 160px;
} HTML <div class="sheet-weapon_rifle-gridContainer"style="background-position:25px 20px; background-size: 520px;">
<div class="sheet-weaponOption" style="position: relative; top: 10px; left: 220px;">
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="sheet-weaponOption" style="position: relative; top: 15px; left: 15px;">
weaponStock
</div>
<div class="sheet-weaponOption" style="position: relative; bottom: 30px; left: 320px;">
weaponSide
</div>
<div class="sheet-weaponOption" style="position: relative; bottom: 100px; left: 540px;">
weaponBarrel
</div>
<div class="sheet-weaponOption" style="position: relative; bottom: 75px; left: 340px;">
weaponUnderbarrel
</div>
<div class="sheet-weaponOption" style="position: relative; bottom: 65px; left: 190px;">
weaponAmmo
</div>
</div>
