Problem with control.style.display='none'; in IE6 only...

Question

Here's a switch. I used to have problems getting display:none to work in Firefox. Now it's IE6 that's driving me insane.

I am modifying a website for a friend's company, who unfortunately is still running the lion's share of machines on IE6. I have a web form (ASP generated, but that's not where my issue lies) that stores contact information, such as their address.

Because they deal with international customers they need the address system to be as easy to use as possible. So for "country" I created a dropdown with the 235+ countries of the world. I then created a dropdown with the 50 US states and a text box for entering province / town / etc for other countries.

I had to be smart so I made all this dynamic: select US and the Province text disappears and the State dropdown appears. Select any other country and they reverse. It works beautifully in Firefox, Safari, Opera, IE7, IE8, and in my own head. IE6 chokes on it. Of course. Because it's the 1 browser I need.

Could not get the display property. Invalid argument

Here's my script header, it's dirt simple:

function ToggleState(changeto)
{
  //Get the controls
  var stateTitle = document.getElementById('statelabel');
  var stateCombo = document.getElementById('state');
  var provTitle = document.getElementById('provlabel');
  var provText = document.getElementById('province');
  var countryCombo = document.getElementById('country');

  //We're hiding the state dropdown and showing the province box
  if(changeto == "Province"){
    //Update the Province Link so it's not active anymore
    provTitle.href = "javascript:function(){return;}";
    provTitle.style.color="#000";

    //Show the Province box and make it take up space
    provText.style.visibility = 'visible';
    provText.style.display = 'inherit';
    //Make the State Link active
    stateTitle.href = "javascript:ToggleState('State');";
    stateTitle.style.color="#00A";
    //Hide the State dropdown and keep it from eating up GUI room
    stateCombo.style.display = "none";
    stateCombo.style.visibility = "hidden";
    stateCombo.value = "";
    //Shift the country off of US because we're not in Kansas anymore
    if(countryCombo.value == "US") countryCombo.value = "";
  //We're hiding the province box and showing the State dropdown
  }else if(changeto == "State"){
    //Kill the link, make the box show up
    stateTitle.href = "javascript:function(){return;}";
    stateTitle.style.color="#000";

    stateCombo.style.visibility = "visible";
    stateCombo.style.display = "inherit";
    //Activate the link and kill the Province box
    provTitle.href = "javascript:ToggleState('Province');";
    provTitle.style.color="#00A";

    provText.style.display = "none";
    provText.style.visibility = "hidden";
    provText.value = "";
    //Make sure we're on the US...
    if(countryCombo.value != "US") countryCombo.value = "US";
  }else return;
}

//Fairly self-evident. If you change the country from US it trips the hide State
// If you change TO US trip the hide Province
function UpdateState(obj){
  if (obj.value == "US" &&
          document.getElementById('state').style.visibility == "hidden")
    ToggleState('State');
  else if (obj.value != "US" &&
               document.getElementById('state').style.visibility == "visible")
    ToggleState('Province');
}

And in the body (dropdowns cut down for brevity)...

<div class="ctrlHolder">  
  <label for="state">  
    <a id="statelabel" href="javascript:function(){return;}" style="text-decoration:none;color:#000">State</a>  
    / <a id="provlabel" href="javascript:ToggleState('Province');" style="text-decoration:none;color:#00A">Province</a>  
  </label>  
  <input type="text" id="province" class="textInput" style="display:none;visibility:hidden;" />  
  <select id="state" style="display:inherit;visibility:visible;">  
    <option selected="selected" value="">-Not Known-</option>  
    <option value="TX">Texas</option>  
    <option value="WY">Wyoming</option>  
  </select>  
</div>  
<div class="ctrlHolder">  
  <label for="country">Country</label>  
    <select id="country" onchange="UpdateState(this);">  
      <option value="">-Not Known-</option>  
      <option value="GB">United Kingdom</option>  
      <option selected="selected" value="US">United States</option>  
    </select>  
</div>  

I'm at a loss to why IE6 won't take it. There's got to be something I've forgotten / blocked out of my mind here. Any ideas??

Answer 1

I don't know whether this is the root of your problem, but IE6 has problems with display: inherit.

From Smashing Magazine: Differences in Internet Explorer 6, 7 and 8

IE6 and IE7 do not support the value inherit except when applied to the direction and visibility properties.

As I said, I don't know whether this is what causes your problem, and I don't know at which point you get the error (is it display: none) but it sounds like it.

You could try replacing all inherits by empty values just to check whether this is it.