Jump to content

Ie7: Cross Browser Compatibility Using Innerhtml Property?


skaterdav85
 Share

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!

Link to comment
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
Link to comment
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.

Link to comment
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.
Link to comment
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!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...