0

Please help to correctly layout two forms. I use position approach but it fails when the browser Zoom level is changed. The second button is moved slightly up or down. Here is my code:

<div id="container">
<form id="form1">
    <p>Some text here</p>
    <p><input name="submitName1" class="button" id="input1_id" value="Submit1" type="submit" /></p>
</form>
<form id="form2"><input id="input2_id" value="Submit2" disabled="disabled" type="submit" /></form>
</div>

#form1 
{
    bottom: 15px;
    position: relative;
}

#form2 
{
    bottom: 50px;    
    left: 73px;
    position: relative;
}

Again, all is OK when user's browser has the same zoom level as mine, but if not user get wrong arranged button for the second form.

UPDATE: See this example. Even in JSFiddle rendering environment buttons positions are changed while Zoom level is changed at Firefox.

Michael Z
  • 3,883
  • 10
  • 43
  • 57
  • In which browser? Can you provide a demo of what's actually happening? You can [attempt to detect browser zoom](http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers), but I wouldn't recommend it. – Christian Jan 09 '13 at 15:26
  • people usually don't use the zoom. You can reset the zoom with ctrl+0 or cmd+0 – Chanckjh Jan 09 '13 at 15:26
  • @ChristianVarga I'm afraid not - screenshots can't be made for our not free product. But I think I've written understandable. The button for the second form will be moved up or down after Zooming page. If that help I use Firefox but have the same problem at Chrome too. – Michael Z Jan 09 '13 at 15:33
  • @Chanckjh I mean zoom that I use can be NOT the same as user's. More over I can see buttons wrong positions at different browsers so this is more common question regarding correct positioning approach for forms/buttons. – Michael Z Jan 09 '13 at 15:35
  • 1
    Well as a common answer, changing zoom generally doesn't affect the layout. Depending on the browser of course, because changing text size *does* change the layout completely, and that's what old browsers do. It has nothing to do with forms/buttons, or anything else. As I mentioned, without seeing some code, demos, examples, or which browser you're referring too, we're pretty much have no idea what your problem actually is. – Christian Jan 09 '13 at 15:38
  • OK, see this http://jsfiddle.net/B4SeR/ Even in JSFiddle rendering environment buttons positions are changed while Zoom level is changed at Firefox. If it's not for you - I'm ready to make a screen-cast for my code at JSFiddle environment :) – Michael Z Jan 09 '13 at 15:43

2 Answers2

0

The actual problem is with the button, which is a browser/OS dependent element. And you do not supply a certain height/width to it in pixels.

Since your problem is specifically concerning the vertical placement, you will need to specify a height to your input elements: height: 24px;.

Thus my conclusion is that the more properties (border-width, height/width etc) you specify in specific amounts, thus percentages or pixels, the more consistent your layout will be for different zoom-levels in browsers.

You can specify a default height for all your inputs in CSS by using (as matter of an example):

input
{
    height: 24px;
}

Of course you should add more properties here.

Yeti
  • 2,647
  • 2
  • 33
  • 37
  • Well thanks. Actually your solution _almost_ workable. Please see this http://jsfiddle.net/ND6Eb/ for the most small Zoom (maybe not the most too) the second button will be less by height that the first and will overlap the first (checked at Firefox). Is there some solution for this? – Michael Z Jan 14 '13 at 20:39
0

When doing forms try using Monospace fonts, otherwise zooming may do some elements go crazy.

user1813774
  • 33
  • 1
  • 5