...

View Full Version : Relatively positioned form elements "shift-up" in Firefox



Beau
10-06-2004, 07:56 PM
I have an image that I am trying to lay text Input fields onto in very specific locations. I have been able to get them lined up exactly where I want them in IE, but in Firefox, they shift upwards, each just a bit more than the previous.

You can see an example here: http://www.halibutharpoon.com/mbm/index.html

What, if anything, am I doing wrong (or failing to do) or am I just SOL and need to look at hacking my image up into a table?



<html>
<head>
<title>Untitled</title>
<style>
body {
margin : 0px;
}
input {
border : 0px;
font-family : verdana, sans-serif;
font-size : 10px;
text-align : center;
background-color : none;
}
.share_input {
font-family : verdana, sans-serif;
font-size : 10px;
}
</style>
</head>

<body>
<br>
<img src="sharetree.gif" alt="" border="0">
<div class="share_input" style="position : relative; left : 95px; bottom : 129px;"><input type="text" size="2" value="100">%</div>
<div class="share_input" style="position : relative; left : 188px; bottom : 179px;"><input type="text" size="2" value="100">%</div>
<div class="share_input" style="position : relative; left : 282px; bottom : 230px;"><input type="text" size="2" value="100">%</div>
<div class="share_input" style="position : relative; left : 380px; bottom : 280px;"><input type="text" size="2" value="100">%</div>
<div class="share_input" style="position : relative; left : 478px; bottom : 330px;"><input type="text" size="2" value="100">%</div>
</body>
</html>

AaronW
10-06-2004, 08:08 PM
Try another approach:



<div style="background-image: url(yourimage); width: ---px; height: ---px; position: relative;">
<input style="position: relative; left: ---px; top: ---px;" />
<input style="position: relative; left: ---px; top: ---px;" />
<input style="position: relative; left: ---px; top: ---px;" />
<input style="position: relative; left: ---px; top: ---px;" />
<input style="position: relative; left: ---px; top: ---px;" />
</div>


Just adjust the widths and heights, use the right image for the background, and should look the same in either browser...

Beau
10-06-2004, 08:35 PM
Thanks Aaron, I think this might just work for me.


edit: link to the working prototype, if you're interested (http://www.halibutharpoon.com/mbm/itworks.html)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum