Skip navigation
Currently Being Moderated

My form textareas move and grow when zooming out in safari

Feb 4, 2013 9:16 PM

Tags: #cs5 #error #mac #html #dreamweaver #javascript #spry #form #layout #textarea #html5 #textfield

I have set up a simple email form for my contact page. I have a text field for the name, a text field for the email, and a textarea for the message. All of the form objects are set within a table that is placed within a div. The div container has an absolute position but when I zoom out in safari all of my textfiels grow larger and move outside the set space of the divtag. I have found that if i change the div's overflow properties to auto or scroll that i can keep the fields from moving but then unwanted scroll bars appear. I have tried numurous things to stop this such as adding styles with absolute positions to each element and defining the width and height. There must be some code for max chart height and width or stop growth. Any ideas????

  • Currently Being Moderated
    Feb 5, 2013 7:19 AM   in reply to joeyt1018

    I'm thinking this may have something to do with sizing in the html of the inputs, vs sizing in css.


    Also, how do you have your zooming set in Safari? You can zoom all, or zoom text only. Most have it set as all by default.


    Do you have a page we could look at to see the code/behavior?

    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 11:14 AM   in reply to joeyt1018



    The problem is being caused because you are using absolute positioning, (AP Divs) to position almost everything.


    When a page is zoomed in/out the browser has to redraw the entire page, and ap divs cause them to get this redraw wrong when zoom is applied.



    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points