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????
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?
You can see how its behaving at http://www.joeytea.com/contact. As for safari zoom settings I'm not sure but I don't think its relevant because I've tested the site on different browsers and its behaves the same in all of them. Here's the code for my form. I've found that the div and the table are irrelvant to the problem because when I remove them the form still resizes and moves when zooming out.
<td><form id="form1" name="form1" method="post" action="/gdform.php" method="post">
<input name="name" type="text" id="name"/>
<input name="email" type="text" id="email" />
<textarea name="message" cols="45" rows="15" id="message">holla holla holla</textarea>
<input name="button" type="submit" id="button" onclick="MM_validateForm('name','','R','email','','RisEmail','message ','','R');return document.MM_returnValue" value="Send" />
<input name="reciepient" type="hidden" id="reciepient" value=" " />
<input name="redirect" type="hidden" id="redirect" value="thankYou.html" />
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.