Best way to fix input/text relationship to image

Posted on 2011-10-21
Medium Priority
Last Modified: 2012-06-21
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)
Question by:Silas2
  • 4
  • 3
  • 2
LVL 30

Expert Comment

ID: 37006711
Can you post your code or a live URL?  Live URL would be best

Author Comment

ID: 37006866
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?
LVL 30

Expert Comment

ID: 37006884
You can use a table for the form, however why not just use html/css?  How many fields do you have/need?
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 30

Expert Comment

ID: 37007012
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

LVL 18

Accepted Solution

nap0leon earned 500 total points
ID: 37007088
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('http://www.lendingtree.com/images/redesign/bullseye_home.jpg');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


Author Comment

ID: 37007217
Isn't absolute positioning a recipe for hassles?
LVL 30

Assisted Solution

LZ1 earned 500 total points
ID: 37007366
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.
LVL 18

Expert Comment

ID: 37007459
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).

Author Comment

ID: 37008226
I'm just having a go at it with your suggestions be right back...

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question