How to use a custom style sheet for IE using JavaScript?

[user1980]

Hi there,

I am not sure if this question comes under Html or javscript....

I have an asp page where I am trying to display/hide few table rows based on a drop down selection. the code is as follows,

 <table><tr  bgcolor="#f3f3f3">
    <td>School</td>
    <td><select name="selectschool1" id="selectschool1" onchange="changeSchool1();">
    <option value="">Please select a school</option>
    <option value="NUSchool">School A</option>
    <option value="Other">School B</option>
    </select>&nbsp;&nbsp;<font color="red" size="1">*</font> </td>
  </tr>
  <tr  bgcolor="#f3f3f3" id="schoolA" name="schoolA" style="display:none;">
    <td>School A</td>
    <td><select name="schoolAnames" >
								<option value=""> Please select a school name</option>
								<%
        if not rsSchool.bof then rsSchool.moveFirst
		while not rsSchool.eof
			response.write"<option value=""" & rsSchool("SCHOOL_NAME") & """>" & rsSchool("SCHOOL_NAME") & "</option>"
			rsNuSchool.movenext
		wend
		%>	
						</select></td>
  </tr>
  <tr  bgcolor="#f3f3f3" id="schoolAmajor" style="display:none;">
    <td>Major</td>
	<td><select name="major1" id="major1">
								<option value=""> Please select a major</option>
								  <% while not rsMajor.eof
			            response.write"<option value=""" & rsMajor("id") & """>" & rsMajor("name") & "</option>"
			            rsMajor.movenext
		            wend %>	
							</select></td>
  </tr>
  <tr  bgcolor="#f3f3f3" id="schoolB" name="schoolB" style="display:none;" >
			<td> Other School</td>
			<td><input type = "text" name = "schoolBname" id="schoolBname" maxlength="50" size="30" value = ""/></td>
			</td>
  </tr></table>

I am using a javascript to make the display attribute to
block but this does not work in firefox as required. So I found a work around and used this,

function showSchool(thing) {
        theSection = document.getElementById(thing);
		theSection.style.display = 'block';
	//theSection.style.display = '-moz-inline-table-block';

}

this did not work in firefox. So I tried to use, visiblity : collapse and visibility : visible but this wont work in IE.
I would like to know if I can use a separate styling for IE and firefox in javscript..I know I can do that if I am using a style sheet for the whole page.. but not sure in java-script. Can somebody please guide me on this....

thank you

[gits]

you might create seperate css classes and assign the className attribute with JavaScript like:

node.className = 'yourClass1';

kind regards

[Dormilich]

on the other hand you could also use conditional comments to add CSS for IE.

<!--[if lte IE 7]-->
something for IE less than version 8
<!--[endif]-->

[phvfl]

I would personally use the approach suggested by Gits as this provides an nice solution. If you need to set the style directly on the element then you should use the display type "table-row", not "block" for showing the row

function showSchool(thing) {
         theSection = document.getElementById(thing);
         theSection.style.display = 'table-row';
 }

[acoder]

Firefox and others require 'table-row' as mentioned, and IE demands 'block' as is its wont. So to get both to work as expected, use the empty string (default):

theSection.style.display = '';

[user1980]

thank you all for the responses....
and the solution to use default for the display style worked....of course I did not try the other ones..as I had to create a new style-sheet which I did not want to...
Anyways, the answer by Acoder worked...

Thank you once again...