CSS in IE vs Chrome woes… Can anyone help me line these up on the right in Chrome? It works in IE

Question

To make this question least confusing, I made a JS Fiddle.

http://jsfiddle.net/hollycotta/27K5V/5/

If you view it in IE, the result is lined up on the right.

If you view it in Chrome, the squares are not lined up on the right side and look messy.

Does anyone know what missing piece will make it line up in Chrome and IE?

I need to keep the div IDs 'Tier3', 'Tier2', and 'Tier1' because I programmatically hide and show them depending on other parts of my form. There is also a lot of javascript that uses the input IDs, etc. Is there a way to make a CSS change only to fix this?

Thank you so much in advance for help, this has left me stumped.

-Holly

Since I need to provide code as well when I link a JS Fiddle, I will paste the CSS here but it is all in the JS Fiddle with the html markup that creates my problem:

      #leftRadioButtonOptions {
position: relative;
left : 5px;
top  : 65px;
width: 230px;
text-align:right;
      }

      input[type=radio] {
         display:none;
   }

      input[type=radio] + label{
         display:inline-block;
         margin:-2px;
         padding: 2px 4px 2px 4px;
         margin-bottom: 0;
         font-size: 10px;
         line-height: 12px;
         color: transparent;
         text-align: center;
         text-shadow: 0 1px 1px rgba(255,255,255,0.75);
         vertical-align: middle;
         cursor: pointer;
         background-color: #f5f5f5; 
         background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
         background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
         background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
         background-image: -o-linear-gradient(top,#fff,#e6e6e6);
         background-image: linear-gradient(to bottom,#fff,#e6e6e6);
         background-repeat: repeat-x;
         border: 1px solid #ccc;
         border-color: #e6e6e6 #e6e6e6 #bfbfbf;
         border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
         border-bottom-color: #b3b3b3;
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
         filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
         -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
         -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
         box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
   }

   input[type=radio]:checked + label{
            background-image: none;
         outline: 0;
         -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
         -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
         box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
         background-color:white;
    color:black;

   }

Answer 1

Looks like thing about blank text nodes.

Not a good way to fix it, but adding   at the end of each block fixed aligning issue in Chrome.

Actually it's better not to use <br> s, but wrap every line you need into div .

Answer 2

How this ?

I wrapped each item in a div and added this to your original css

.entry {
    margin: 0 0 10px 0 ;    
}

And the html

<div id="leftRadioButtonOptions">
    <div id="Tier3">
        <div class="entry">
            Overall Status:
            <input id="overallGreen" type="radio" />
            <label for="overallGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="overallYellow" type="radio" />
            <label for="overallYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="overallRed" type="radio" />
            <label for="overallRed" style="background-color: red;"><b>R </b></label>
        </div>

        <div class="entry">
            Schedule:
            <input id="scheduleGreen" type="radio" />
            <label for="scheduleGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="scheduleYellow" type="radio" />
            <label for="scheduleYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="scheduleRed" type="radio" />
            <label for="scheduleRed" style="background-color: red;"><b>R </b></label>
        </div>

        <div class="entry">
            Risks/Issues/Concern:
            <input id="risksGreen" type="radio" />
            <label for="risksGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="risksYellow" type="radio" />
            <label for="risksYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="risksRed" type="radio" />
            <label for="risksRed" style="background-color: red;"><b>R </b></label>
        </div>

        <div class="entry">
            Customer Satisfaction:
            <input id="satisfactionGreen" type="radio" />
            <label for="satisfactionGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="satisfactionYellow" type="radio" />
            <label for="satisfactionYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="satisfactionRed" type="radio" />
            <label for="satisfactionRed" style="background-color: red;"><b>R </b></label>
        </div>
    </div>
    <div id="Tier2">
        <div class="entry">
            Budget:
            <input id="budgetGreen" type="radio" />
            <label for="budgetGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="budgetYellow" type="radio" />
            <label for="budgetYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="budgetRed" type="radio" />
            <label for="budgetRed" style="background-color: red;"><b>R </b></label>
        </div>

        <div class="entry">
            Deliverables:
            <input id="deliverablesGreen" type="radio" />
            <label for="deliverablesGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="deliverablesYellow" type="radio" />
            <label for="deliverablesYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="deliverablesRed" type="radio" />
            <label for="deliverablesRed" style="background-color: red;"><b>R </b></label>
        </div>
    </div>
    <div id="Tier1">
        <div class="entry">
            Scope/Contract:
            <input id="scopeGreen" type="radio" />
            <label for="scopeGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="scopeYellow" type="radio" />
            <label for="scopeYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="scopeRed" type="radio" />
            <label for="scopeRed" style="background-color: red;"><b>R </b></label>
        </div>
    </div>
</div>

http://jsfiddle.net/27K5V/6/