Member Avatar for sushmaja.arumalla.9

Hi., I'm new to php using yii framework.The radiobuttons in the radio buttonlist are not displayed in IE9 and above.The code written is as follows.
The radio buttons are displayed well in all the remaining browsers and also below IE-9(even not in IE-9). how to resolve this issue.

<div class="services_opts">
  <ul>
     <li class="house_cleaning">
         <div class="row-fluid">
             <?php echo $form->radioButtonList($homeModel, 'HouseCleaning', array('1' => 'Please clean my house', '0' => 'Not Required'), array('separator' => '     ', 'class' => 'styled', 'id' => 'HomeServiceForm_HouseCleaning')); ?>
         </div>
     </li>
     <li class="car_wash">
         <div class="row-fluid">
             <?php echo $form->radioButtonList($homeModel, 'CarCleaning', array('1' => 'I want my car to be washed', '0' => 'No car wash needed'), array('uncheckValue' => null, 'separator' => '     ', 'class' => 'styled', 'id' => 'HomeServiceForm_CarCleaning')); ?>
         </div>
     </li>
     <li class="stewards">
         <div class="row-fluid">
             <?php echo $form->radioButtonList($homeModel, 'StewardCleaning', array('1' => 'I want stewards for my party', '0' => 'I am not having a party'), array('uncheckValue' => null, 'separator' => '     ', 'class' => 'styled', 'id' => 'HomeServiceForm_StewardCleaning')); ?>
         </div>
     </li>
  </ul>
</div>

please help me to get me out from this problem.

The output is rendered other than in IE9 and above

<DIV class=row-fluid>
    <DIV class=" span12">
        <DIV class=services_opts>
            <UL>
                <LI class="house_cleaning select">
                    <DIV class=row-fluid>
                        <INPUT name=HomeServiceForm[HouseCleaning] id=ytHomeServiceForm_HouseCleaning type=hidden>
                        <SPAN id=HomeServiceForm_HouseCleaning>

                            <SPAN class=radio style="BACKGROUND-POSITION: 0px -50px"></SPAN>
                            <INPUT name=HomeServiceForm[HouseCleaning] class=styled id=HomeServiceForm_HouseCleaning_0 type=radio value=1> 
                            <LABEL for=HomeServiceForm_HouseCleaning_0>Please clean my house</LABEL>     
                            <SPAN class=radio></SPAN>
                            <INPUT name=HomeServiceForm[HouseCleaning] class=styled id=HomeServiceForm_HouseCleaning_1 type=radio value=0> 
                            <LABEL for=HomeServiceForm_HouseCleaning_1>Not Required</LABEL>
                        </SPAN> 
                    </DIV>
                </LI>
                <LI class="car_wash select">
                    <DIV class=row-fluid>
                        <SPAN id=HomeServiceForm_CarCleaning>
                            <SPAN class=radio style="BACKGROUND-POSITION: 0px -50px">
                            </SPAN><INPUT name=HomeServiceForm[CarCleaning] class=styled id=HomeServiceForm_CarCleaning_0 type=radio value=1> 
                            <LABEL for=HomeServiceForm_CarCleaning_0>I want my car to be washed</LABEL>     
                            <SPAN class=radio></SPAN>
                            <INPUT name=HomeServiceForm[CarCleaning] class=styled id=HomeServiceForm_CarCleaning_1 type=radio value=0> 
                            <LABEL for=HomeServiceForm_CarCleaning_1>No car wash needed</LABEL>
                        </SPAN> 
                    </DIV>
                </LI>
                <LI class="stewards select">
                    <DIV class=row-fluid>
                        <SPAN id=HomeServiceForm_StewardCleaning>
                            <SPAN class=radio style="BACKGROUND-POSITION: 0px -50px"></SPAN>
                            <INPUT name=HomeServiceForm[StewardCleaning] class=styled id=HomeServiceForm_StewardCleaning_0 type=radio value=1> 
                            <LABEL for=HomeServiceForm_StewardCleaning_0>I want stewards for my party</LABEL>     
                            <SPAN class=radio></SPAN>
                            <INPUT name=HomeServiceForm[StewardCleaning] class=styled id=HomeServiceForm_StewardCleaning_1 type=radio value=0> 
                            <LABEL for=HomeServiceForm_StewardCleaning_1>I am not having a party</LABEL>
                        </SPAN> 
                    </DIV>
                </LI>
            </UL>
        </DIV>
    </DIV>
</DIV>

The following span tag is not rendered in IE9 and above.

<SPAN class=radio style="BACKGROUND-POSITION: 0px -50px">

How to resolve it.Please help me out.

  • 2 Contributors
  • 1 Reply
  • 271 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by hericles

Dani AI

Generated

The markup shows an empty <span class="radio"> used as a sprite/icon and that element is present in the output but invisible in IE9+. Common, verifiable causes are CSS (collapsed inline box, hidden by ancestor overflow, z-index/positioning), a missing/overridden background-image, or a script/CSS rule that only affects modern IE document modes.

Recommended debugging checklist (in order):

  • Verify the span actually exists in the DOM (F12) and examine computed styles: check display, width, height, background-image, visibility, opacity and z-index. An empty inline span with no dimensions collapses to zero size.
  • Temporarily force a visible test style (outline or background color) to confirm whether the element is being rendered but has zero size or is fully hidden.
  • Check ancestor CSS for overflow:hidden or transforms which can clip absolutely positioned children (this follows 's observation). If the sprite relies on negative offsets or absolute positioning, an ancestor with overflow:hidden can hide it.
  • Confirm the sprite image URL is correct and not overridden by a more specific CSS rule (inspect computed background-image). Also check for conditional CSS or JS that toggles .styled behavior in IE9+.

Small, cross-browser CSS to make the sprite visible and diagnosable:

.radio {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background: url('/path/to/sprite.png') no-repeat 0 -50px;
}

/* temporary debug aid (remove when fixed) */
.radio.debug { outline: 1px solid #f00 !important; background-color: #fcc !important; }

Notes: if the .radio element is injected or manipulated by a JS library that targets older IE only, test with scripts disabled or in a minimal HTML page to isolate CSS vs JS. Also confirm the page is running in the expected IE document mode (X-UA-Compatible/meta header), since IE9+ behaves differently in compatibility modes. This expands on 's overflow hint and targets the most common CSS/asset issues that make sprite spans invisible in IE9+.

Member Avatar for hericles

Do you have any CSS specifying overflow:hidden for the divs containing the radio buttons? Sounds random but I know thats been an issue before.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.