Who Will Get The Solution First?

[seonewbee]

A table is created that has 1 col with 5 rows. Each cell contains a form that has graphic image to click on. The grapic is the only part of the form that is visible. The graphic image is 36px tall and 116px wide. The table is 200px wide and the images are centered in the table cells. The table has cellpadding, cellspacing, and border set to "0". The cells of the table have the height set to the height of the graphic. The height of the cells does not shrink to the size of the graphic. How do you get the cell height to shrink to the size of the graphic? What is the code that needs to be used to make the cell height the same as the image.

[Jazzee]

What?


Edit: Nvm, when I posted this, your post was empty and there was no poll

[Jazzee]

I think if you have <form> inside a table cell, you get extra padding no matter what.

[Jazzee]

I usually get around that by putting the <form> tags outside of the table, but that won't work if you have multiple forms in the same table.

[Jazzee]

So... I guess I don't have an answer for ya

[seonewbee]

Originally Posted by Jazzee

What?


Edit: Nvm, when I posted this, your post was empty and there was no poll

Yes, you are right. The stupid program makes you put in a message before creating the poll. I figured that you might be the first so, I put the question in last - the edit. Just the way the program makes you do things. Have a nice weekend. I have got to go because of the hurricane. My third this year. Hate hurricanes. Lost power for 4 days last time. Not very fun.

[imaginemn]

You could use javascript to get around this. Something like this. The following code is not 100% complete but enough to get the point accross. As Jazzee said adding a form in a table will add extra padding. But there are creative ways around that.

---------------------------------------------------------------
<form name="form1" action="page1.htm"><input type='hidden' name='1'></form>
<form name="form2" action="page2.htm"><input type='hidden' name='2'></form>
<form name="form3" action="page2.htm"><input type='hidden' name='3'></form>
<form name="form4" action="page2.htm"><input type='hidden' name='4'></form>
<form name="form5" action="page2.htm"><input type='hidden' name='5'></form>

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript: document.form1.submit();"><img src="image.jpg" width="11" height="36"></a></td>
<td><a href="javascript: document.form2.submit();"><img src="image.jpg" width="11" height="36"></a></td>
<td><a href="javascript: document.form3.submit();"><img src="image.jpg" width="11" height="36"></a></td>
<td><a href="javascript: document.form4.submit();"><img src="image.jpg" width="11" height="36"></a></td>
<td><a href="javascript: document.form5.submit();"><img src="image.jpg" width="11" height="36"></a></td>
</tr>
</table>
---------------------------------------------------------------

imaginemn

[Jazzee]

Very tricky. Nice

[dave conz]

I have actually used CSS on forms to get rid of the padding. I don't think it's strictly legal but much to my surprise it does work.

[LazyJim]

Just what I was going to say Dave, CSS the extra padding/margins away. In addition you may find the you need to remove any new-line , tabs and spaces from the HTML code with-in each <td>.

[LazyJim]

You could make all sorts of scripts like imaginemn's but depending on what you're actually doing you might not even need to put forms or javascript in there at all

[LazyJim]

p.s. I voted for "someone else"

[Fusion]

I can get it to work in Firefox.

[Jazzee]

Originally Posted by LazyJim

Just what I was going to say Dave, CSS the extra padding/margins away. In addition you may find the you need to remove any new-line , tabs and spaces from the HTML code with-in each <td>.

Two questions:

1. How would you do this with CSS padding and/or margins? Put it on the <form>?

2. I have noticed that sometimes new lines and stuff in the html cause spaces or gaps on the page. Do you know why it does this and why it only happens sometimes?

[Fusion]

Originally Posted by LazyJim

Just what I was going to say Dave, CSS the extra padding/margins away. In addition you may find the you need to remove any new-line , tabs and spaces from the HTML code with-in each <td>.

how does removing lines work?

[Fusion]

Originally Posted by Jazzee

Two questions:

1. How would you do this with CSS padding and/or margins? Put it on the <form>?

2. I have noticed that sometimes new lines and stuff in the html cause spaces or gaps on the page. Do you know why it does this and why it only happens sometimes?

1. Put the css in the Form name.
2. Is this just IE?

[Jazzee]

2. I test in a few browsers. I don't remember if this only happens in IE or not.

[Fusion]

It is only IE. I had problems with forms on templates in IE. There is a way around by putting the Form outside I think. Hmm on this problem maybe use nested tables, to get around the IE problem. That might work then you just have to mess around with that IE hack thing on each table. Cus you cant do it on one table with multiple forms.

[dave conz]

In my experience the css solution works in both IE and Mozilla. The unwanted padding doesn't actually seem to be a problem in Mozilla though.

<form style="margin:0px;padding:0px;">

Try it with 10px padding and you'll see Mozilla and IE behave pretty much the same.

[seonewbee]

imaginemn, Thank you for the code, I shall see how it works. Much rather prefer something that is not client side scripting, but I guess everybody has scripting and javascript turned on. Thanks for taking the time to code me a solution.

Dave, interesting code. I shall try it also. Thanks.

Have a nice day all.