Question

Here is my form code:

<td align="center" style=" width=50%; height=50%; background: url(images/side.gif) repeat-x ;">
<img src="images/iphone.gif" width="670" height="549" alt="">
<img style="position:fixed; left:280px; bottom:50px;"src="spr2.png" width="2%" height="15%" alt="">
<form style="display:inline-block;" method="POST" action="index.php">
<label style="position:fixed; left: 200px; bottom: 130px;">: اسم المستخدم</label>
<input style="position:fixed; left:50px; bottom:130px;" type="text" name="username" size="20"><br>
<label style="position:fixed; left:200px; bottom:100px;">: كلمة المرور</label>
<input style="position:fixed; left:50px; bottom:100px;" type="password" name="password" size="20"><br>
<input style="position:fixed; left:50px; bottom:60px;" type="submit" value=" تسجيل دخول ">
</form>
</td>

Here are screen shots from different browsers:

The elements change position when I resize the window:

How can I prevent the elements from changing position and width?

Answer 1

For the width issue, try utilizing the width, like in this JSFiddle.

<input type="text" style="width:200px;" size="20">
<input type="text" style="width:200px;" size="40">​

Your problem with position might stem from the fact that you’re using the value of fixed. Absolute positioning inside of relative positioning might be more like what you’re going for.