Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Trouble with form inside table Firefox/IE discrepancy 1

Status
Not open for further replies.
wraygun

wraygun

Programmer
Dec 9, 2001
272
US
Hi there,

I have a simple table with a form inside it and I can't seem to get it display properly. In Firefox, it looks perfect, but in Internet Explorer, it's not displaying correctly. I was hoping that someone could point me in the right direction. This should be enough code to duplicate the problem.

Code: 
<table width="752" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <th align="center" valign="middle" bgcolor="#000000" scope="col">Products</th>
      <th width="376" align="center" valign="bottom" bgcolor="#000000" scope="col">
<form id="form1" name="form1" method="post" action="search.php">
        <input name="txtSearch" type="text" id="txtSearch" />
          <input type="submit" name="Submit" value="Search" />
        </form>
      </th>
    </tr>
  </table>

Thanks and best regards,
Harold

***You can't change your past, but you can change your future***
 
Sort by date Sort by votes
First: tables for layout, big no no.

Second: if you are going to use tables i suggest you use the proper tags.
<th> tags are supposed to be used by themselves as header rows not inside <tr> tags. you want to use <td> for cells inside rows.

Third: its always a good idea to specify units. when defining widths. width=234[red]px[/red].

try that and see if it works. Also a valid doctype might help.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Hi Vacunita,

Thanks for your prompt reply. I had no idea tables were bad for layout. What is the alternative? As for the tag structure, I'm using Dreamweaver and the <th> tags were inserted automatically when I inserted the table. My doctype is as follows:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

and the updated code as per your recommendations.
Code: 
<table width="752px" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" valign="middle" bgcolor="#000000" scope="col">Products</td>
      <td width="376px" align="center" valign="middle" bgcolor="#000000" scope="col">
        <div align="right">
          <form id="form1" name="form1" method="post" action="search.php"><input name="txtSearch" type="text" id="txtSearch" />
          <input type="submit" name="Submit" value="Search" /></form>
        </div>
      
      </td>
    </tr>
  </table>

That didn't seem to change anything in regards to aesthetics. Firefox still looks good, IE looks bad.

Thanks again and best regards,
Harold

***You can't change your past, but you can change your future***
 
Upvote 0 Downvote
I'm sorry to say but vacunita's advice was wrong. Apart from using a valid doctype (which you are) and moving away from table based layout (which you are not).

<th> meaning table header is a replacement for a <td> and should be used to denote a header cell for the table. I suppose given your example, your usage of <th> was correct.

Likewise you should not specify units in html attributes. Html attributes accept two different units -- percentage and pixels. If you're using percentage, add percentage sign after the number and if units, do not put anything.

All that said, you should still be struggling with the form. However, I see no particular reason you should be using table to create what you are creating. A simple:
Code: 
<form id="form1" name="form1" method="post" action="search.php">
  <fieldset>
    <label>Products</label>
    <input name="txtSearch" type="text" id="txtSearch" />
    <input type="submit" name="Submit" value="Search" />
  </fieldset>
</form>
should produce a roughly similar result. If you need to do additional styling, I suggest you use css on that. You should be able to find enough examples googling for it.
 
Upvote 0 Downvote
Hi Vragabond,

Thanks for putting me back on the right path. Greatly appreciated. I'm sure Vacunita was well intentioned.

I appreciate the code example, but it's not quite what I'm looking for aesthetically. I will look for some tutorials on css as per your recommendation and take a stab at learning a new layout method. Here's an screenshot of what I'm trying to achieve. Again, works well in FF, but not in IE.

FF Version:
screenshot.jpg


IE Version:
screenshot2.jpg


I've narrowed it down to the form tag itself. If I insert a text field and label without the <form> tags, it doesn't show this behavior. odd.

Best regards,
Harold

***You can't change your past, but you can change your future***
 
Upvote 0 Downvote
For easy fix, add this:
Code: 
<form id="form1" name="form1" method="post" action="search.php" [b][blue]style="margin: 0;"[/blue][/b]>
However, my solution is (or can be) aesthetically identical to yours with a little bit of css to make it look the way you want. That way your content and layout are separate. You would.

1. Add black background colour to the fieldset.
2. Float the label to the left, make it about 50% wide and align the text to the centre.
3. Float both input elements to the right and add some horizontal margin between them.
4. Your fieldset will have borders around it. If you want the dividing line between add a right border to the label.
 
Upvote 0 Downvote
Thanks. A remarkably simple solution that works. Thanks for the help. I'm grateful. As for the css solution, I will explore that this evening when I get in. I have to admit that css looks infinitely more flexible when it comes to layout and is definitely worth learning. I appreciate the heads up.

Best regards,
Harold

***You can't change your past, but you can change your future***
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
711
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
901
spamjim
spamjim
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
171
pendle666
pendle666
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
168
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top