Jump to content
skaterdav85

Ie7: Cross Browser Compatibility Using Innerhtml Property?

Recommended Posts

so i created a form and did some JS validation on it. I have a text input field for emails, where if a condition is not met, it writes to an h3 tag"*please enter a valid email address".this works fine in the browsers, but in IE, it acts a little weird. even if the form is valid, it writes a blank space or line break or something to the h3 tag, shifting everything under it down a bit. In firefox, opera, and safari, it just doesn't write anything to the h3 tag, leaving all the text etc where it should be.anyone know how to stop IE from doing this? Thanks!

Share this post


Link to post
Share on other sites
Probably not without the code to look at.
ok here is the link where its at. just try typing in the email field a valid email address, and you'll notice how everything gets shifted down. I was using IE 7. it works fine though in safari, opera, and ff.http://www-scf.usc.edu/~dtang/PellaBella/contact.php

Share this post


Link to post
Share on other sites

I don't know specifically why it's doing that, but you can try to add a space to the h3 to start with, or instead of just using innerHTML you can also use a display property to hide it.

Share this post


Link to post
Share on other sites

This suggestion doesn't solve the problem in quite the way you expect, but . . .The page "jump" that happens when you fill the <h3> element with text is really annoying. I would have a better user experience if you put the error text into a page element that already had a defined height. Then there would be no jumping at all. And I think your IE problem would disappear.In principle, you should be able to set the height of your <h3> element to 1em and it would be exactly the size it needs to be (assuming your message only ever takes up one line).Or if any browser objects to that, instead of having <h3> empty, fill it with a  , at page load and after the error check, and you should be okay.Edit: I was still writing when JSG posted, so I'm not necessarily disagreeing with him.

Share this post


Link to post
Share on other sites
Or if any browser objects to that, instead of having <h3> empty, fill it with a  , at page load and after the error check, and you should be okay.
That's what I was thinking when I said add the space to start with, if the h3 already contains text (even just a space), then there won't be any movement when you add text to it.

Share this post


Link to post
Share on other sites
That's what I was thinking when I said add the space to start with, if the h3 already contains text (even just a space), then there won't be any movement when you add text to it.
good idea using the display property instead of innerHTML. that worked in IE and FF, and im assuming it will be fine in the other browsers. Thanks!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...