Another Instance of IE vs Firefox vs Standards

Here's another example of behavioral differences between IE and Firefox. I ran into this one about a month ago and then again this morning.

I currently have some webpages where I'm dynamically displaying and hiding controls. This is done via JavaScript/DOM by setting the style.display property of the control I wish to hide or display. To hide a control, setting this property to none does the trick, but to display it, there's a way that works only in IE, and a way that works for both IE and Firefox -- which would be the correct way of doing it.

In IE, setting the style.display property to block will re-display the control after it has been hidden, and will display it correctly. But in Firefox, doing this will display the control again but in a different way -- for example, the height of the control as it was before it was hidden is no longer maintained.

The correct way of doing this is to set the style.display property to an empty string. Apparently, this is the "standards" way of doing it (although it's not exactly intuitive -- I mean, really. A blank string?). Doing it this way will work in both IE and Firefox.

Example:
mytable.style.display = '';

I hope this saves someone some time.

Comments

Popular Posts

Resolving the "n timer(s) still in the queue" Error In Angular Unit Tests

How to Get Norton Security Suite Firewall to Allow Remote Desktop Connections in Windows

How to Determine if a Column Exists in a DataReader

Silent Renew and the "login_required" Error When Using oidc-client

Fixing the "Please add a @Pipe/@Directive/@Component annotation" Error In An Angular App After Upgrading to webpack 4