Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2002
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Relatively positioned form elements "shift-up" in Firefox

    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?

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try another approach:

    Code:
    <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...

  • #3
    New Coder
    Join Date
    Oct 2002
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Aaron, I think this might just work for me.


    edit: link to the working prototype, if you're interested
    Last edited by Beau; 10-06-2004 at 10:35 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •