Best way to fix input/text relationship to image

There must be a simple answer to this but...say you have an image with slots drawn in it for input/type=text's, what is the best way to get the inputs to always be in the slots?
(different browsers seem to render the pictures slighly differenty and the text boxes drift out of their slots)
Who is Participating?
nap0leonConnect With a Mentor Commented:
Absolute position and use Div elements instead of tables elements should work.

Avoid using tables because that is a common source of padding and margin differences between browsers - the fewer the number of objects, the less the margin/padding differences will affect your display.

The code below shows example of positioning stuff into specific locations.
<style type="text/css">
* {margin: 0;outline: medium none;padding: 0;}
h2 {position:absolute;left:300px;top:100px;}
#div_container {background-image:url('');height: 235px;width: 952px;}


<div id="div_container">
 <h2>Greetings Earthlings!</h2>
 <div id="left_input"> <input type="text" size="5" value="left"/></div>
 <div id="right_input"> <input type="text" size="5" value="right"/></div>


Open in new window

Can you post your code or a live URL?  Live URL would be best
Silas2Author Commented:
Ummmm....well actually, I'm about to write it, I can do whatever you recommend, the elements are very simple, I have a picture which goes in a div and then a <table><tr><td>Input Text</td></tr></table> and I want it so the td's are in the same spot in the pic, any pointers?
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

You can use a table for the form, however why not just use html/css?  How many fields do you have/need?
This is generally how my forms look:
<div id="formContainer">
		<form  id="seating" name="seating">
			<label>	First Name: 	</label>
			<input type="text" name="firstName" rel="First Name" size="50" maxlength="255"  class="watermarkOn" id="firstName" />
			<label>Last Name: </label>
			<input type="text" name="lastName" rel="Last Name" size="50" maxlength="255"  class="watermarkOn" id="lastName" />

			<label>	Date Hired: </label>
			<input type="text" name="addDate" rel="Date Hired" value=""	 size="50" maxlength="255"  class="watermarkOn" id="addDate" />

			<div id="buttons">
				<input name="Submit" type="submit" class="submit button continue" value="Submit" id="submit">
				<input name="Reset" type="reset" class="reset button" value="Cancel" id="reset">

Open in new window

Silas2Author Commented:
Isn't absolute positioning a recipe for hassles?
LZ1Connect With a Mentor Commented:
To answer your question to nap0leon's code: No. As long as you position the parent to relative, you should have 0 problems. Obviously the more complex the code, the harder time you'll have determining the "parent". But it shouldn't be a problem, as long as you have a proper reset in place as well.
Personally, I hate using absolute positioning...
But, sometimes we are forced into.

When presenting a form on top of a background image, I always request that the area where the form go be "relatively free" (not too tight, lots of wiggle room, etc.)  That way I can use relative positioning and float the content - if stuff wiggles a couple pixels up or down, no one notices.  But, if Marketing provides an area that is "too rigid" for the input boxes I need to put into the cramped space... absolute positioning is, unfortunately, required (without resorting to lots of browser specific coding).
Silas2Author Commented:
I'm just having a go at it with your suggestions be right back...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.