Image in a form element distorts its table cell

HTML fustration

[Fess]

Hello,

I've never asked for help in regards to html but I've grown very frustrated with this problem & FrontPage2000. Not a html novice. I plan to migrate to dream weaver when funds are allocated but for now here is my problem...

I'm making a gateway page for a topsite. The topsite is a "autorank" powered topsite.

Usually the "gateway" has a very boring layout with text link that says "click here".

I'm using a graphic instead of a text link for users to click on.

I must include the following "form" for users to click when they arrive at the gateway page:

Notice the code & the code in bold:

<form name="click" action="#%URL%#" method="POST">
<input type="hidden" name="ses" value="#%SESSION%#">
<input type="hidden" name="id" value="#%USERNAME%#">
<script language="JavaScript">
<!--
document.write('<a href="javascript:document.click.submit()"><img border="0" src="images/offtopic_03.jpg" alt="CLICK HERE TO OFF TOPIC" width="170" height="174""></a>');
//-->
</script>
<noscript>
<input type="submit" value="ENTER OFF TOPIC">
</noscript>
</form>

This code is placed in a table cell. But look at how it displays:

<Sorry, no personal URLs. See TOS [webmasterworld.com]>

The forum displays the graphic (offtopic_03.jpg), but distorts the table cell by making the image rise up about an inch.

Is there a way to make it display correctly?

Any help is greatly appreciated.

Thanks
Fess

[edited by: tedster at 3:54 am (utc) on July 17, 2004]

[tedster]

You didn't mention a DTD, so I assume you're depending on quirks mode [webmasterworld.com] rendering.

It sounds like you may be picking up some default margin or padding on your form element. Try adding a CSS style - even inline will do the trick if this is the issue.

<form name="click" action="#%URL%#" method="POST" style="margin:0;padding:0;display:inline;">

[Fess]

tedster...

My apologies for the incorrect format in my initial post.

DTD is unknown to me at the moment. I read a little on it and was surprised.

The quirks mode rendering is what I'm using.

I inserted the inline style and It reduced the problem, but I still have a more than slight dissertation.

Any further advice is greatly appreciated...

This is the html:

<form name="click" action="#%URL%#" method="POST" style="margin:0;padding:0;spacing:0;display:inline;" >

<input type="hidden" name="ses" value="#%SESSION%#">

<input type="hidden" name="id" value="#%USERNAME%#">

<script language="JavaScript">

<!--

document.write('<a href="javascript:document.click.submit()"><img border="0" src="http://www.geocities.com/fessblackthorn/images/offtopic_03.jpg" alt="CLICK HERE TO OFF TOPIC" width="170" height="174""></a>');

//-->

</script>

<noscript>

<input type="submit" value="ENTER OFF TOPIC">

</noscript>

</form>

Thanks
Fess

[tedster]

OK - you said the form is in a table cell. Have your set the attibutes cellpadding="0" and cellspacing="0" for that table? If not that would create a small "nudge" to your image.

[Fess]

Ted..

Yes, the table has zero cellpadding & spacing.

I've sent you all the html in a private message. Hope it went through.

Was afraid to post a huge amount of code.

Thanks
Fess