jlitt1 jlitt1 - 5 months ago 11
HTML Question

:not(:first-of-type) equivilent for IE

I have a form that has multiple fieldset's they are then stacked on top of each other using the code below. Javascript rotates the fieldset's using a forward and back button. They do not work for for IE11 without compatibility mode.
I understand I can use older css2 first-child:before to make this work but am having trouble

http://jsfiddle.net/rCd26/901/


working firefox and chrome

#AUTO fieldset:not(:first-of-type) {
display: none;/*remove to see all feildsets*/
}


NON working IE

#AUTO fieldset:first-child:before {
display: none;/*remove to see all feildsets*/
}


what am i doing wrong with my IE code? and why is IE retarded?



/*form styles*/
#AUTO {
display:table;/*makes div fill content*/
width: 100%;
height:auto;
margin:0 auto;
position: relative;
border:1px solid green; /*visual aid to make sure div fills content*/
margin-bottom:30px;
}
#AUTO fieldset {text-align:center;
width: 95%;margin:0 auto;
border:1px solid red; /*visual aid to make sure div fills content*/
box-shadow: 2px 2px 2px 2px #000;
background-color:#FFF;
display:table;/*makes div fill content*/
}
#miles{
display:none;/*spamer fills this out and it gets rejected my mail script*/
}
/*Hide all except first fieldset*/
#AUTO fieldset:not(:first-of-type) {
display: none;/*remove to see all feildsets*/
}
#AUTO fieldset:first-child:before {
display: none;/*remove to see all feildsets*/
}

<form id="AUTO" method="post" action="inc/estimate.php">



<!-- fieldsets -->
<fieldset>
<div class="div1"><img src="images/step1.png" width="233" height="65"></div>

<h3>CONTACT INFO</h3>


<div id="contact_name">FULL NAME: *<br>
<input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div>


<div id="contact_phone">PHONE NUMBER: *<br>
<input id="element_1" name="phone" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div>

<div id="contact_email">EMAIL:<br>
<input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div>

<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
</div>



</fieldset>





<fieldset>
<div class="div1"><img src="images/step2.png" width="233" height="65"></div>


<h3>VEHICLE INFO</h3>

<div id="contact_name">VEHICLE MAKE: *<br>
<input id="element_2_1" name="make" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div>


<div id="contact_phone">VEHICLE MODEL: *<br>
<input id="element_1" name="model" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div>

<div id="contact_email">YEAR*:<br>
<input id="element_1" name="year" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div>


<div id="contact_name">VIN NUMBER: <br>
<input id="element_2_1" name="vin" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div>


<div id="contact_phone">INSURANCE COMPANY ( if applicable ):<br>
<input id="element_1" name="insurance_company" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div>






<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
<input type="button" name="previous" class="previous action-button" value="Previous"/>
</div>


</fieldset>

<fieldset>
<div class="div1"><img src="images/step3.png" width="233" height="65"></div>
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="ALMOST DONE"/>
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset>

<fieldset>
<div class="div1"><img src="images/step4.png" width="233" height="65"></div>

<h4>THANK YOU!</h4>
<h5>Once you hit Submit you receive an email confirming your submission.</h5>

<div class="button_holder">
<input type="submit" name="submit" class="submit action-button" value="SUBMIT" />
<input type="button" name="previous" class="previous action-button" value="Previous" />

</div>

</fieldset>



</form>




enter image description here

Answer

If you want to hide all fieldsets after the first one you have other simple solutions:

Sibling Selector

#AUTO fieldset ~ fieldset {
   display: none;/*remove to see all feildsets*/
}

http://jsfiddle.net/rCd26/902/


Adjacent Selector

#AUTO fieldset + fieldset {
  display: none;/*remove to see all feildsets*/
}

http://jsfiddle.net/rCd26/903/


Hide All / Show First

#AUTO fieldset {
  display:none
}
#AUTO fieldset:first-child {
  display: block;
}

http://jsfiddle.net/rCd26/904/

Comments