views:

138

answers:

1

Internet Explorer does not remove the extra padding from my button when the input button is missing. The input button will sometimes be missing, because on a dynamic page the button will sometimes be hidden.

See my example using Internet Explorer when viewing my demo link: http://media.apus.edu/it/evan-testing/form.htm

I tested this in Firefox, Safari, Chrome, etc. and all browsers have my style completely removed if the form button is missing.

edit It was asked what internet explorer version does this happen in and it occurs in ie7. It works just fine in IE8. Any hacks for this for IE7 then?

A: 

There are a few solutions:

  • Don't output the span when the button is hidden.
  • Set the display CSS property to none when the button is hidden.
  • Style the actual button instead of a span wrapped around the button.
Brian Ortiz
regarding your responses,---1. can you explain your don't output the span when the button is hidden? ---2. is there a javascript i can add that it may look for the the class "form_button" and when its not there, it will hide the class "button"? i can't use jquery in this scenario.---3. because of limitations of styling a form button using <input> i can't use <button>, i have to wrap a span around the button and then I'm adding a class to the input to complete the package.
Evan
Well you mentioned it was a dynamic page, so assuming you mean server-side, then hide the span along with the button.
Brian Ortiz
also, i found out this is an IE 7 issue. Good question by the way. i didn't think to try IE8 and IE8 works fine. It's IE7 that's the issue. Any ideas how I can tell IE7 to not show it?
Evan
Brian - oh, the woes of a designer talking to a developer. They said no managing styling in the code-behind and that all styles should be at the presentation layer. so, this is my last piece of the puzzle to fix this little glitch. it's only an IE7 issue and not IE8 or any other browser.
Evan