asked on

Placing a textbox on an Image

I need to place a textbox right on top of an image.
I've seen enough from other questions to make it work
with Internet Explorer but it wont work with Netscape.
Can anybody give me a working example that works with both
IE and with Netscape?
Thanks.

lexxwern

<input type="text" style="position:absolute;left:100;top:100;"/>

please change the values

lexxwern

ASKER CERTIFIED SOLUTION

webwoman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lexxwern

for <textarea>

<textarea style="position:absolute;left:100;top:100;">
</textarea>

lexxwern

DreamMaster

<html>
<head>
<title>Textbox on top of image</title>
</head>
<body>
<div id="layImage" style="position:absolute; left:10px;top:10px;">
<img src="someimage.gif" width="200" height="200">
</div>

<div id="layTextbox" style="position:absolute; left:20px; top:20px;">
<form>
<input type="text" name="inpOnTopOfImage">
</form>
</div>
</body>
</html>

Good luck,
Max.

lexxwern

>>>>background="yourimage.gif"<<<<

i think netscape has its issues here;

lexxwern

webwoman

If you want a form, put a form in the table. Still works. Still no divs, no hassles, no problems if there are other form fields that DON'T need to be over a pic.

Not everything requires divs for positioning. ;-)

webwoman

Not in a td. It would in a table, but not a TD.

See it in action! www.chesapeake.edu/test_a.asp It's dropdowns, but the same principle applies. Works in IE4-6, NN4-6, probably anything else. ;-)

lexxwern

Do we need div's for positioning? try the style attribute directly in the <input>; no?

lexxwern

webwoman

And it even stays centered when you resize... will wonders never cease. ;-)

Again, no divs, no scripting (other than for the dropdowns, which has nothing to do with the layout), no hassles, works for everything.

DreamMaster

webwoman,

You might want to add the trick for not making the background repeat if you use the background on a cell..just a suggestion..

So if you use the background on the cell and you place an extra table in that cell...all rows in that cell need to get the background="" to make sure the cells do not repeat the background...

Max.

webwoman

No, divs are not necessary for what they asked. Not at all. Positioning in a style attribute won't work in NN4, may not in 6 either.

Why do it the hard way when you can just use some ingenuity in how you set up your tables? And in the bargain, have it work in just about everything?

webwoman

Max, right. I forgot that when I posted the code.

But it definitely works, works well, and works for everything. ;-)

CJ_S

Max learned *wink*

lexxwern

"Why do it the hard way when you can just use some ingenuity in how you set up your tables? And in the bargain, have it work in just about everything?"

tables are hard ww; specially if one types in the code in notepad;

lexxwern

DreamMaster

Max learns every day CJ.. :) Fortunately.. :)

And webwoman, yes...I know...but you allready posted that code...didn't want to copy that...so provided an other way to do the same.. :)

Max.

DreamMaster

"tables are hard ww; specially if one types in the code in notepad;"

Depends on the table structure...I know there are some times where I can hardly get the table structure right...but the most times, tables are easy enough...

And I ALWAYS use a texteditor...not notepad, but textpad which has color coding, which helps.. :)

Max.

lexxwern

<table (set cellpadding/spacing/ however you want) border="0">
<tr><td background="yourimage.gif" valign="bottom"><img src="spacer.gif" width=(bg image width) height=(bg
image height - space for caption)><br>
<table (set cellpadding/spacing/ however you want) border="0">
<tr><td>caption goes here</td></tr></table>
</td></tr></table>

simpler than

<input type="text" style = "position:absolute;left:100;top:100;"/>

lexxwern

???

DreamMaster

not simpler....but better...as that first one will actually work...while <input type="text" style="position:absolute;left:100px;top:100px;" /> will only work in IE...and even that I doubt....because I do not believe input types can be absolutely positioned like that...as far as I know it doesn't support that style...

Max.

lexxwern

"will only work in IE...and even that I doubt....because I do not believe input types can be absolutely positioned like that...as far as I know it doesn't support that style..."

no they can Max.;

ie6
ie5.5
ie5
ns6.2
ns6
ns4(not very sure tho)

lexxwern

DreamMaster

NS4, I am sure won't support it..NS6.x, not a clue, never used it..and not likely to do so in the future...

But if I may ask...where did you get the information for that lexxwern?

Max.

lexxwern

i keep trying stuff when i get bored of games; i get bored of games cause i happen to get hold of cheats; so damn the cheats;-)

lexxwern

bruno

tables should NOT be used for layout! CSS should. simple as that.

however, not all browsers properly support the correct CSS....so if you really care about less than 10% of the market out there, than go ahead and use tables for your layout.

BRUNO

DreamMaster

or DIV's (pushing his own suggestion into the attention... :p )

Max.

lexxwern

>>>>or DIV's (pushing his own suggestion into the attention... :p )
Max.<<<<

divs are nothing without the css in them; and if you have too have css why not directly in the <input>( pushing his own suggestion into the attention...;-) )?

lexxwern

DreamMaster

Because the style directly into the input is not cross-browser...enough reason for me...

Max.

lexxwern

>>>>Because the style directly into the input is not cross-browser...enough reason for me...

Max.

try it sometime. "surprisingly" work on ns and ie for me.

lexxwern

Matlock

ASKER

I'm overwhelmed with number of comments, but I'm still struggeling to make this work in Netscape (seems OK in IE)
<html>

<head>

<title>Title</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000" >
<form name="form1" method="post" action="">
<table width="526" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#0066CC">
<td width="31" height="32" valign="middle" align="center"><b><b><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">10.</font></b></b></td>
<td valign="top" width="24" align="right">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="2"><b> </b></font></div>
</td>
<td valign="middle" align="left" width="428">
<div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFFF">Fill inthe missing <i> <font size="3">figure</font></i>?</font></b></font></div>
</td>
<td width="43"> </td>
</tr>
<tr>
<td height="13" width="31"></td>
<td width="24"></td>
<td width="428"></td>
<td width="43"></td>
</tr>
<tr>
<td width="31"></td>
<td width="24"></td>
<td width="428"></td>
</tr>
</table>

<table width="526" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#AAD5FF">
<td height="20" valign="top" width="32"> </td>
<td valign="middle" width="425"><font face="Arial, Helvetica, sans-serif" size="2">Complete
the missing part of the sign.</font></td>
<td valign="middle" width="69"> </td>
</tr>
<tr>
<td height="20" width="32"></td>
<td height="300" width="425">
<div id="layImage" style="position:absolute; left:100px;top:100px;width:419;height:286;">
<img src="Images/pag15b.gif" width="418" height="286">
</div>

<div id="layTextbox" style="position:absolute; left:280px; top:160px; width:200px; height:80;">

<input type="text" name="inpOnTopOfImage" size="8">

</div>
</td>
<td valign="middle" align="right" height="20" width="69"><font face="Arial, Helvetica, sans-serif" size="1"><i>
</i></font></td>
</tr>
</table>
<table width="526" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"> </td>
</tr>
<tr>
<td align="right"><font face="Arial, Helvetica, sans-serif" size="2"><i>maximum
1 mark.</i></font></td>
</tr>
<tr>
<td>
<hr>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>

</form>
</body>

</html>

ps: sorry cant provide graphic...

lexxwern

<input type="text" name="inpOnTopOfImage" size="8" style="position:absolute; left:280px; top:160px; width:200px; height:80;">

try this; direct css onto the input box.

lexxwern

COBOLdinosaur

I think I favour the way ww is doing it. The way max did it with the positioned div will work if there is only one fieled in the form, but if there is more than one field then it has problebs because you would have to pit the div inside the form, and that will break the form in Netscrap. The alternative would be two forms with scripting and a hidden field to make it really complicated.

However I would do it like this, with the table in the form and the form displayed as an inline element to eliminate the extra line feed:
<form name="myform" style="display:inine">
<table>
<tr>
<td background="yourimage.gif">
<input name="myfield" type="text">
</td>
</tr>
</table>
</form>

Additional form fields can go into aditional fileds in the table or can be external to the table.

Cd&

webwoman

Matlock, you've got DIVS -- get rid of the divs. Divs in a table are DEATH to Netscape. Also kills the form.

See this?

<td valign="top" width="24" align="right">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="2"><b> </b></font></div>
</td>

Useless... you're contradicting yourself. Is it right or center? and look at it closely - THERE'S NOTHING THERE. The whole cell is EMPTY.

and this...
<tr bgcolor="#0066CC">
<td width="31" height="32" valign="middle" align="center"><b><b><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">10.</font></b></b></td>
<td valign="top" width="24" align="right">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="2"><b> </b></font></div>
</td>
<td valign="middle" align="left" width="428">
<div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFFF">Fill inthe missing <i> <font size="3">figure</font></i>?</font></b></font></div>
</td>
<td width="43"> </td>
</tr>

It looks like you've got a 4 cell table -- why? The numbers don't need to be a separate thing, they can be in the first cell with the text. The second cell is EMPTY -- does it ever have anything? If not, why do you have it? You don't need to set alignment on the cell and then use a div -- it serves no purpose. You also don't need all those #($%*$ font tags.

What editor are you using? If you're using a graphical editor, use it for general layout ONLY, then fix the crap it puts in the code. They all do -- even Dreamweaver. Get rid of the divs and clean up your code. The divs are KILLING it. You do NOT need them if you want this to work RIGHT.

Also get rid of the font tags -- CSS is much better.

And here...
<td height="300" width="425">
<div id="layImage" style="position:absolute; left:100px;top:100px;width:419;height:286;">
<img src="Images/pag15b.gif" width="418" height="286">
</div>

<div id="layTextbox" style="position:absolute; left:280px; top:160px; width:200px; height:80;">

<input type="text" name="inpOnTopOfImage" size="8">

</div>
</td>

MORE DIVS! Totally unnecessary. Put the image in the background of the cell, do EXACTLY what I said with the spacer gif, and put the formfield in.

You're fighting with divs for NOTHING. They're not working. They don't work for something like this. Forget them.

webwoman

Just a note... it's not the amount of code, it's how hard it is to make it WORK.

Lexxwern, yep, it's just one line if you use the positioning in the style... but if you spend 2 days figuring out that it doesn't work right for a chunk of your audience, does it save you any time?

If you set it up as a table, once it works it works for everybody. The worst you might have is a tiled background if you forget to put in the "" on the bg image in the cells. And that takes no time to fix.

The initial question was something that worked in IE AND Netscape -- tables do. Without any scripting, without anything special, and in every version from 2 up.

If you need to add rows, text, other images, they STILL work. And you don't need to recode the entire thing to make them show up in the right spot. ;-)

lexxwern

>>but if you spend 2 days figuring out that it doesn't work right for a chunk of your audience, does it save you any time?

i dont care about ns4x users; for the rest(that is a huge %age) it woks perfect; so i use it;

lexxwern

webwoman

>>i dont care about ns4x users; for the rest(that is a huge %age) it woks perfect; so i use it;>>

Yes, but Matlock DOES -- and stated so at the very beginning. ;-)

lexxwern

>>IE and with Netscape?

this was what is stated by Matlock; I guess Netscape fans shouldve shifted over to ver6x; I do care about NS6x users; or perhaps NS6x cares about my site and this method;-)

Regards,
lexxwern

lexxwern

Correctio: Mozilla cares for us.

lexxwern

Matlock

ASKER

OK, I would have liked to have done it with layers BUT,
as you rightly stated I DID need to develop it with Netscape 4x users in mind.

Thanks to everyone who commented it was all helpfull but I did have to go down this route to make it work for my audience.

Thanks for your advice webwoman.
Matlock