Page 1 of 1

HTML nightmare, only on certain browsers

Posted: Tue Jun 06, 2006 5:35 am
by SpiderMonkey
I have the following HTML:

Code: Select all

<table border=0 cellspacing=0 cellpadding=0>
<tr height=100>
  <td height=100 width=175 valign=top>&nbsp</td>

  <td height=100 width=350><a href="index.php"><img border=0 src="images/logo.png" ></a></td>
  <td width=295><img border=0 src="banners/banner2.jpg"></td>
</tr>
<tr>
  <td height=32 rowspan=2>&nbsp</td>
  <td height=32 rowspan=2>
  <form name="searchbar" action="content.php" method="GET">
  <table border=0 cellspacing=0  cellpadding=0>
   <tr>
    <td rowspan=3><img src="images/searchbarright.png"></td>

    <td width=117 height=2><img src="images/searchbartop.png"></td>
    <td width=117 height=2><img src="images/searchbartop.png"></td>
    <td width=117 height=2><img src="images/searchbartop.png"></td>
    <td rowspan=3><img src="images/searchbarleft.png"></td>
   </tr>
   <tr align=top>
    <td width=230 valign=center colspan=2 height=26><input name="search" type=text size=30 style="width:200px; height: 18px; font-size:10pt;"></td>
    <td width=80 valign=center><img onclick="click_submit()" onmouseover="over_submit()"  onmouseout="off_submit()" name="srchbut" border=0 src="images/submita.png"></td>
   </tr>

   <tr>
    <td width=117 height=2><img src="images/searchbarbottom.png"></td>
    <td width=117 height=2><img src="images/searchbarbottom.png"></td>
    <td width=117 height=2><img src="images/searchbarbottom.png"></td>
   </tr>
  </table>
  </form>
  </td>
  <td width=151 height=1 bgcolor="#0B3253"></td>

</tr>
<tr>
  <td width=151>&nbsp</td>
</tr>
<tr>
  <td height=15 width=175></td>
  <td height=15 valign=top><font size=-1><center><i>Enter any combination of date, location and name to search for fairs and centres</font></center></i></td>
</tr>
<tr><td colspan=3>
The problem is the text at the bottom, which should be flush to the bottom of the search bar. In IE and some other browsers it does that, while in Firefox and Safari it refuses to work.

Anybody idea why this is? I have the feeling Firefox is overriding my HTML for some misguided readability reasons, but does anybody know how to stop it thinking it knows better than I do?

Posted: Tue Jun 06, 2006 6:28 am
by neophyte
There's a margin at the bottom of forms, eh.

So you have to adjut the margin. Ok, eh?

Code: Select all

<form name="searchbar" style="margin-bottom:0" action="content.php" method="GET">
Like forms are really fleshy headed mutants in disguise eh.

Posted: Tue Jun 06, 2006 6:29 am
by jayshields
Make a start by passing it through the w3c HTML validator and make sure your code is valid.

Then I would suggest re-posting your code, this time all of it, using the [ syntax="html"] [ /syntax ] tags, and also uploading the HTML file somewhere so we can see the results.

Edit: OK, seems neo looked into your code more than me - nevermind.

Posted: Tue Jun 06, 2006 6:40 am
by SpiderMonkey
Yeah, that got it properly, thanks.

Sorry about the tags, I haven't got used to them quite yet.

Posted: Tue Jun 06, 2006 6:11 pm
by daedalus__
I didn't read that incredibly thoroughly but I noticed the logo.

If that is a layout of a sort, I highly recommend reading about <divs> and CSS for layouts.

It will be easier to learn now rather than changing from table based layouts later.

Posted: Wed Jun 07, 2006 3:11 am
by SpiderMonkey
I've been trying to move in that direction, but the majority of the site in question was designed in freeway, a nasty piece of software that seems hell bent on keeping me away from my own HTML, and screwing up style sheets. Tables, in this case, weren't really my choice.