Topic: Need help getting this table to match the default theme.

[ApplianceJunk]

I would like to make the items in this table match the rest of the default theme.

Here is the code I'm using now. It creates the 'Find Parts & Diagrams' search box at the top of our site.

As you can see it's kind of matches, but I would like for it to match the theme a lot more, such as same rounded corners, font, text size, same size text box and button, but I'm not sure how to go about doing that.

Code: [Select]

<table border="1" width="468" height="" cellpadding="0" cellspacing="0">
<tr class="catbg">
<td style="border-width: 0px 0px 1px; border-style: none none solid; padding: 6px; margin: 0px; font-size: 160%;" align="center"><font face="Times New Roman" color="#FFFFFF">Find Parts & Diagrams Here</font></td>
</tr>
<tr>
<td style="border: 0px none; padding: 5px; margin: 0px; font-size: 100%; line-height: 100%;" align="center">Enter Model Number, Part Numer, or Description.
</td>

</tr>
<tr >
<td style="border: 0px none;" align="center">

<!-- APP SmartSearch -->

<form method="get" action="http://click.linksynergy.com/fs-bin/statform" target="_blank">

<input name="id" value="omv7WULuxaw" type="hidden"><input name="offerid" value="225193" type="hidden">
<input name="bnid" value="1673" type="hidden">
<input name="subid" value="" type="hidden">
<input name="keyword" maxlength="60" size="35" type="text" />
<input type="submit" title="Search" value="Search" class="button_submit">

</form><IMG width="1" height="1" border="0" src="http://ad.linksynergy.com/fs-bin/show?id=omv7WULuxaw&bids=93887&type=5">

<!-- APP SmartSearch -->



</td>
</tr>

 <tr>
  <td style="border: 0px none; padding: 5px; margin: 0px; font-size: 100%; line-height: 100%;" align="center">
<a href="http://www.repairclinic.com/General/Help-Me-Find-My-Model-Number?RCAID=24039" target='_blank'><font color="#D97B33">Help Me Find My Model Number</font></a><br/><br/>
  </td>
 </tr>
 
</table>
<br/>

[IchBin™]

What makes the bar across the top is this:

Code: [Select]

<div class="cat_bar">
    <h3 class="catbg">Text goes here</h3>
</div>
You could put that in your table, but you'll end up have to do a bit of styling to get what you want, like removing the table border so it doesn't border the top bar etc. That should help you get it though. Let me know if you get stuck.

[ApplianceJunk]

That helped a lot, thanks!

So my one table is now two.

I put this in one table.

Code: [Select]

<div class="cat_bar">
    <h3 class="catbg">Find Parts & Diagrams Here</h3>
</div>

Then the rest of it in another table using...

Code: [Select]

<table class="windowbg2" width="468">
Then I used class="info" for the top line of text.

Code: [Select]

<td align="center" class="info">Enter Model Number, Part Numer, or Description.
</td>

and class="middle text" for the other line...

Code: [Select]


<tr>
  <td align="center" class="middletext">
<a href="http://www.repairclinic.com/General/Help-Me-Find-My-Model-Number?RCAID=24039" target='_blank'><font color="#D97B33">Help Me Find My Model Number</font></a><br/><br/>
  </td>
 </tr>

I have tried different things for the text search box and button, but can't seem to get it the same size as the SMF search in the top right of our forum.

So that is were I'm stuck at now.

I think it looks so much better now then it was, but would still like to learn how to make the two searches the same.

Thanks again.

[IchBin™]

You probably need to add cellpadding="0" and cellspacing="0" to the table for the headers. Browsers assume their own default values if you don't specify the cell attributes for many html elements.

[ApplianceJunk]

Awesome!

You must have been reading my mind. I was just wondering why the extra white space and before I created the two tables I had cellpadding="0" and cellspacing="0", but it got removed for some reason.

To me the search box and button is a little larger looking then the SMF one. I would guess my browser is deciding the size of that right now.

Anyway I can make it size the same as the SMF one?

Thanks for all the help,

[IchBin™]

oh lol. You're being pretty picky there. I would have never noticed what you were talking about. But yes I see it, but I don't see why it is behaving that way. I can only suggest trying different things to see if the browser is treating the containing elements different for some reason. Like put your search code into a div instead of a table or something. Just different tags to see if it is affected differently.

[ApplianceJunk]

The text box and button for the search form is not that big of a deal.
More or less just curious about how it works now.

Will mark this topic solved.

Thanks again.