Hello readers,

Im making a login form for a webbased game, Styled it very pretty etc. Used Cufon to markup some text.

Now i have a submit button which is very standard. So i tried applying css and Cufon. Not working.

Then i wrote a bit of jquery to: 1 hide the submit button 2 add a span with the same class after the submit button 3 set its text to the same as the submit button 4 add a click event to the span in which the click event of the original button is called.

$('input.button-submit').hide().after('<span class="button-submit">').next('span.button-submit').text($('.button-submit').val()).click(function(){
  $('.button-submit').prev('input.button-submit').click();
});

This works in Chrome, Opera, firefox and safari.

Now the problem: IE (every version) doesnt show the span. It hides the original submit button, but it doesnt add the span. It looks like the .after() doesnt get properly executed. No warnings, No errors, ive debugged for about an hour now and i cant find anything on the web stating this problem.

Anyone here knows how to fix this? or an idea about the direction to search? Any help is appreciated!

~Menno

1 answer

danwellman 5600
2
points
This was chosen as the best answer

Try closing the span, IE often refuses to insert new inline elements if the closing syntax isn't used:

.after('<span class="button-submit"></span>')
Answered about 6 years ago by danwellman