[CSS/HTML] Any way to simplify or improve this?

I really would like to simplify this so I don't have three times the number of lines (3 lines for each image I want to use as a button). Not to mention having to add sheet-bg-# to the css. &lt;div class="sheet-macro-box"&gt; &nbsp; &nbsp; &lt;input class="sheet-options-flag" type="checkbox" name="attr_options-flag"&gt;&lt;span&gt;y&lt;/span&gt; &nbsp; &nbsp; &lt;div class="sheet-options"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select name="attr_macroimg" style="width: 200px; border: 1px solid #AAA;"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="1" selected="selected"&gt;Default&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="2"&gt;Stealth&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="3"&gt;Backstab&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="4"&gt;Bow&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class="sheet-characterinfo-input" type="text" name="attr_macro_name"&gt;&lt;br /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span style="font-size: 10px; font-style: italic;"&gt;Macro Name&lt;/span&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;button type="roll" value="@{wtype} &{template:Simple5e} {{name=@{macro_name}}}" name="roll_macro" style="z-index: 1;"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" value="1" name="attr_macroimg" class="sheet-macrobg sheet-bg-1" checked="checked"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" value="2" name="attr_macroimg" class="sheet-macrobg sheet-bg-2"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" value="3" name="attr_macroimg" class="sheet-macrobg sheet-bg-3"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" value="4" name="attr_macroimg" class="sheet-macrobg sheet-bg-4"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img class="sheet-macrobg sheet-bg-1" src="<a href="http://vignette4.wikia.nocookie.net/wowwiki/images/9/96/Inv_inscription_certificate.png" rel="nofollow">http://vignette4.wikia.nocookie.net/wowwiki/images/9/96/Inv_inscription_certificate.png</a>"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img class="sheet-macrobg sheet-bg-2" src="<a href="http://vignette4.wikia.nocookie.net/wowwiki/images/2/27/Ability_ambush.png" rel="nofollow">http://vignette4.wikia.nocookie.net/wowwiki/images/2/27/Ability_ambush.png</a>"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img class="sheet-macrobg sheet-bg-3" src="<a href="http://vignette2.wikia.nocookie.net/wowwiki/images/3/36/Ability_backstab.png" rel="nofollow">http://vignette2.wikia.nocookie.net/wowwiki/images/3/36/Ability_backstab.png</a>"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img class="sheet-macrobg sheet-bg-4" src="<a href="http://vignette3.wikia.nocookie.net/wowwiki/images/f/fb/Inv_weapon_bow_03.png" rel="nofollow">http://vignette3.wikia.nocookie.net/wowwiki/images/f/fb/Inv_weapon_bow_03.png</a>"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/button&gt; &lt;/div&gt;

I don't think so, that's how all ours work. The only difference is I tend to use checkboxes. I notice if I have 2 sets of radio buttons with the same attr_name I got squirrelly results. &nbsp;But of course, it's the same # of checkboxes as radio buttons.

It was only one set of radio buttons and a select. I did manage to condense it down to one set of radio buttons though and one line in the css. It looks a little uglier in game though, cause I can't seem to get the positioning of the radio buttons to do anything more than spill out of the container in a big line. If I put them in another div, then they can't affect the div that holds the selected image. Ah well.

SkyCaptainXIII said: It was only one set of radio buttons and a select. I did manage to condense it down to one set of radio buttons though and one line in the css. It looks a little uglier in game though, cause I can't seem to get the positioning of the radio buttons to do anything more than spill out of the container in a big line. If I put them in another div, then they can't affect the div that holds the selected image. Ah well. If you need to see the radio buttons in game, then you could put them in a different &lt;div&gt; and where the buttons are currently you could put checkboxes with the same name as the radio button and each one with one of the values of the radio buttons, then you could hide (i.e. not display) the checkboxes. I recommend checkboxes, because as Chris mentioned, I have also had problems when using multiple sets of radio buttons with the same names and values.

They're in a repeating fieldset and work really well, aside from one problem when deleting rows. The picture stays the same for the row instead of shifting up as expected. The original method I used (shown above) doesn't have that problem. Trying to figure out why the new method is doing it. And I can't put them in a separate div and still be able to hide them when not using them to select the image for the macro. Old Method New Method &nbsp; &nbsp; The only big problem I have is that if I delete the row with the dagger and blood, the rows themselves and all the other information shift up one, but the image doesn't. I can't see why either. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;fieldset class="repeating_macros"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-macro-box"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class="show-options" type="checkbox"&gt;&lt;span&gt;y&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-options"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;b&gt;Macro Name&lt;/b&gt;&lt;br /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_macro_name" style="width: 100%; margin: 0; padding: 0px 2px 1px 2px;"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div style="padding-top: 55px;"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class="sheet-show-icon-list" type="checkbox"&gt;&lt;span&gt;L&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" class="sheet-icon" name="icon-select" value="1"&gt;&lt;img class="sheet-icon-small sheet-icon1"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" class="sheet-icon" name="icon-select" value="2"&gt;&lt;img class="sheet-icon-small sheet-icon2"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" class="sheet-icon" name="icon-select" value="3"&gt;&lt;img class="sheet-icon-small sheet-icon3"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" class="sheet-icon" name="icon-select" value="4"&gt;&lt;img class="sheet-icon-small sheet-icon4"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" class="sheet-icon" name="icon-select" value="5"&gt;&lt;img class="sheet-icon-small sheet-icon5"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" class="sheet-icon" name="icon-select" value="6"&gt;&lt;img class="sheet-icon-small sheet-icon6"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" class="sheet-icon" name="icon-select" value="7"&gt;&lt;img class="sheet-icon-small sheet-icon7"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="radio" class="sheet-icon" name="icon-select" value="8"&gt;&lt;img class="sheet-icon-small sheet-icon8"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-new-icon"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class="sheet-macro-name" type="text" name="attr_MacroName" value="@{macro_name}" disabled="true"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/fieldset&gt;

Oh, nevermind. I think I may have just figured it out. The div I'm using to store the image doesn't have an attr_ name, which means it is not getting the unique repeating macro id. Testing it now. That didn't work...

Figured out what it is doing, but not why nor how to fix it. The image on the button isn't updating when the row is deleted, but it does change when you re-open the character sheet.

Are those radio buttons copies of another set of radio buttons? That is what happens when i have two sets of radio buttons with the same attr_name If that's not it... IDK&nbsp;

chris b. said: Are those radio buttons copies of another set of radio buttons? That is what happens when i have two sets of radio buttons with the same attr_name If that's not it... IDK&nbsp; They're in a repeating fieldset and not used anywhere else. They each have a unique name. Ah well. I can deal with having to open/close the sheet to refresh the images. It's not like I'd be deleting them often.

Hrm, I wonder if this is a similar problem to the tab locking issue you've been having with the Pathfinder sheet.

Small update... &nbsp;accidentally changed the width setting on a div to auto while I was tabbing around and changing things in the dev console for instant testing of changes... and solved what had been a major problem holding me back from completing this character sheet. Finally down to minor details and additions that will be quite simple comparatively.