Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    626
    Thanks
    51
    Thanked 67 Times in 67 Posts

    HTML5 - Chrome, Form Notifications, & Relative Positioning

    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.
    Code:
    <body>
    <div id="body" style="position: relative;">
    <header style="height: 100px;">...Some content...<br /><br /><br /></header>
    <div id="container" style="position: relative;">
    <form>
    <input type="text" name="blah" required="required" />
    <input type="submit" value="Submit" />
    </form>
    </div>
    </div>
    </body>
    "Yeah science!"
    Online Science Tools

  • #2
    New Coder
    Join Date
    Sep 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    You have a whole bunch of line breaks after the header. Could that be the problem?

  • #3
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    626
    Thanks
    51
    Thanked 67 Times in 67 Posts
    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.
    "Yeah science!"
    Online Science Tools


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •