Member Avatar for Reliable

I'm integrating a Lightform AJAX contact form with a web page I already made. The error messages render properly in all major browsers except IE8. Assuming it's a CSS problem are there some IE8 CSS bugs I am overlooking? Are there any fixes for those bugs if so?

  • 6 Contributors
  • 7 Replies
  • 107 Views
  • 7 Months Discussion Span
  • Latest Post Latest Post by johnny_rotten

Dani AI

Generated

Lightform/formcheck.js error nodes are being positioned correctly in modern browsers but end up far away in IE8 only. The usual root here is positioning/context rather than the validation logic itself: the script computes an absolute position for each message and then places the message into the DOM. If IE8 is running in a different document mode or the message’s offsetParent is not the same container you expect, the computed top/left will put the bubble in the wrong place.

Quick diagnostic checklist

  • Use IE8’s F12 tools to check Browser Mode and Document Mode; compatibility/quirks modes change layout math and can break offsets (see for the original doctype hint).
  • Inspect the DOM after triggering an error: note where formcheck.js inserts the error node (inside the form, or appended to body?) and what CSS rules apply to it.
  • Check whether the error element is absolutely positioned and whether a nearby ancestor has position: relative; absolute elements position relative to their nearest positioned ancestor.
  • Reproduce the problem outside any iframe to rule out iframe-specific offset or cross-origin issues that mentioned.

Practical fixes to try

  • Force a standards document mode with an X-UA-Compatible header/meta and test again.
  • Ensure each form row/container that should be the positioning reference has position: relative. If the script appends errors to body, either change the script to insert next to the field or make the page’s positioning context explicit.
  • For older IE quirks, triggering layout on the container (for example zoom:1) sometimes stabilizes offset calculations.
    Example meta and CSS (add inside your page head or stylesheet):
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

/* make the form a positioning context */
.form-wrapper { position: relative; zoom: 1; }

/* ensure the error uses absolute placement */
.formcheck-error { position: absolute; z-index: 9999; }

If the problem persists, identify the exact placement code in formcheck.js (the part that reads offsets or uses getBoundingClientRect) and test alternate calculations: getBoundingClientRect() plus page scroll is more consistent across browsers. For reference on positioning and offset APIs see MDN: CSS position, Element.getBoundingClientRect(), and HTMLElement.offsetParent.

Recommended Answers

All 7 Replies

Member Avatar for harrierdh

Every browser has bugs. In theory, if your running in IE8 and your in quirks mode you will inherit IE6 and IE7 problems. The best thing you can do is put in a valid strict doctype then validate your code. Once you've cleaned up any errors it should work fine.

If you want some help and explanation, post your code or a link to the site.

Member Avatar for influxive

I'm integrating a Lightform AJAX contact form with a web page I already made. The error messages render properly in all major browsers except IE8. Assuming it's a CSS problem are there some IE8 CSS bugs I am overlooking? Are there any fixes for those bugs if so?

can you post the error message you are getting?

Member Avatar for Reliable

can you post the error message you are getting?

No, the error messages are a product of one of the JS sheets linked to the contact form.

Member Avatar for MidiMagic

What IS it doing wrong? Be specific.

Member Avatar for Reliable

What IS it doing wrong? Be specific.

The problem I am encountering is that only with IE8 do the error messages that are programmed by the external sheet to show up if the visitor inputs incorrect or improperly formatted information show up far away from the form itself. In all other major browsers each error message shows up right near its corresponding input text field.

Member Avatar for nkdweb

To fix the CSS issue in IE8, all the width and height need to be mentioned with proper value. That i ll fix all the main issues in IE8

Member Avatar for johnny_rotten

I just integrated this LightForm. I have an issue with IE if used in iframes: AJAX error messages don't show up at all and it let's the form processed with empty fields.

Anybody had similar issues?

I googled for 4 hours now and no solution.

Thanks for the advice.

(I have to use iframe, as we have several similar websites and want to use the same contact form on all of them, and to collect all contacts into one database - and also don't want to update on several websites if there is a slight modification on the contact form)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.