View Full Version : HTML5 - Chrome, Form Notifications, & Relative Positioning

09-17-2011, 05:03 AM
Has anyone else had this problem? I have a body container div (positioned relatively), a header within the container, and then a second container div (positioned relatively) following the header. What happens is the form I have inside the second container seems to think the header is twice as big as it is and the notification bubbles (e.g. "Please fill out this field.") are way down below where they are supposed to be.

<div id="body" style="position: relative;">
<header style="height: 100px;">...Some content...<br /><br /><br /></header>
<div id="container" style="position: relative;">
<input type="text" name="blah" required="required" />
<input type="submit" value="Submit" />

09-17-2011, 01:50 PM
You have a whole bunch of line breaks after the header. Could that be the problem?

09-17-2011, 07:06 PM
That's just to give the header some height (they're like pretend content). The relative container is somehow causing the problem; if container is made static, the forms work fine.