skaterdav85 Posted January 21, 2009 Share Posted January 21, 2009 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 More sharing options...
justsomeguy Posted January 21, 2009 Share Posted January 21, 2009 Probably not without the code to look at. Link to comment Share on other sites More sharing options...
skaterdav85 Posted January 21, 2009 Author Share Posted January 21, 2009 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 More sharing options...
justsomeguy Posted January 21, 2009 Share Posted January 21, 2009 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. Link to comment Share on other sites More sharing options...
jeffman Posted January 21, 2009 Share Posted January 21, 2009 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 More sharing options...
justsomeguy Posted January 21, 2009 Share Posted January 21, 2009 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 More sharing options...
skaterdav85 Posted January 28, 2009 Author Share Posted January 28, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.