php table heights in different browsers

Bananna man

Hey,

If you look at my site http://www.irishpokeronline.com with internet explorer and then firefox the table heights where the upcoming tournaments are stored come up differently. The html for this is stored in a php script but i dont understand how it interprets the code differently.

the code is as follows:

echo "<table width='335px' border='1' cellpadding='0' cellspacing='0'>";
						
						echo "<tr class='veranda_10'>";
						echo "<th width='86' align='center' height='40'><font size='2' face='verdana' color='#CC0000'><b>Date</b></font>";
						echo "<th width='178' align='center' height='40'><font size='2' face='verdana' color='#CC0000'><b>Location</b></font>";
						echo "<th width='71' align='center' height='40'><font size='2' face='verdana' color='#CC0000'><b>Click for More Info</b></font>";
						echo "</tr>";
						echo "<td>";

					$todays_date = date('Y-m-d');
					$nextWeek = time() + (7 * 24 * 60 * 60);
					$next_week2 = date('Y-m-d', $nextWeek);
						

					$query="SELECT address , date, event_id
						FROM poker
						WHERE date>='".$todays_date."'
						AND date<='".$next_week2."'
						ORDER BY date
						";

					$results=mysql_query($query)
						or die (mysql_error());
			 		while ($rows=mysql_fetch_array($results)) {
						extract ($rows);
						
						echo "<tr class='text_main'>";
						echo "<th width='86' align='center' height='30'><font size='1' face='verdana' color='#333333'>".date("D dS M", strtotime($date))."</font>";
						echo "<th width='178' align='center' height='30'><font size='1' face='verdana' color='#333333'>".$address."</font>";
						echo "<th width='71' align='center' height='30'><form name='form1' method='post' action='http://www.irishpokeronline.com/poker%20website/tournament_info.php'><input type='submit' name='submit' value='".$event_id."'></form>";
						echo "</tr>";
						echo "<td>";
						}
						echo "</body>";
						echo "</table>";
						?>

am i doing something wrong?

Thanks

DonkeyStyle \o/

Well from looking at the final html output, it seems the submit buttons are throwing a line break in IE.
I managed to kill these by adding...

<INPUT type=submit style="{float:right}" value=116 name=submit>

But aligning them right isn't perfect either, so I offset them with a margin like so...

<INPUT type=submit style="{float:right;margin-right:17px;}" value=116 name=submit>

It's a bit dirty, but it stops the tables from streching.
Maybe someone more handy with the css can come up with something more elegant.

DonkeyStyle \o/

Actually scratch that, the button itself seems alright, I think it's the form element adding the line-break (doh!)... if you just add display: inline to your form tag, that should sort it without causing centering issues.

<FORM name=form1 style="{display: inline}" action=http://www.irishpokeronline.com/poker%20website/tournament_info.php method=post>

Bananna man

Hey Donkey,

What do you mean by the submit button. The table output im referring to just gets the info it displays from a database so how would the submit button have an effect on this part?

Also, what are those tag's you sudjested? I've never seen them before!!!

DonkeyStyle \o/

Ok, deep breath...

Bananna man wrote:

What do you mean by the submit button.

One of these...

I call them submit buttons because of the html used in their creation.

<input type='[COLOR="Red"]submit[/COLOR]' name='submit' value='".$event_id."'>

Bananna man wrote:

The table output im referring to just gets the info it displays from a database so how would the submit button have an effect on this part?

Ok firstly forget about php, forget about the database (and forget about the submit button)... what you've got is a html rendering problem... that is, it's happening on the client-side... if you want to test this out, just open the site in mozilla/firefox to see the un-fúcked version, then view the html source from the browser, save it, and then open the saved file in internet explorer... yep.. same html code; same problem. (php is a non-issue at this point since the browser recieves html generated by the php, not the php code itself)

The cells are streching vertically in IE but not in mozilla/firefox because the browsers don't agree on how exactly to display the page (given the same html).
The source of this disagreement lies with the <form> tags... internet explorer wants to add a line-break after it... mozilla/firefox apparently doesn't... which is why you see a blank space (new line) below the buttons in IE, which makes the table row longer vertically than it does in mozilla/firefox.

Bananna man wrote:

Also, what are those tag's you sudjested? I've never seen them before!!!

This is a CSS property/tag... you should get to know these, as well as being handy in tricky situations like this, they also allow you to pull off some very neat design tricks and can save you a ton of time.
- More info on CSS

The display: property I posted is a CSS property that basically forces the browser to not add a line-break after the <form> element... getting rid of that troublesome new line (and hence the table-row streching that we don't want).

All you have to do is edit the code you posted above to include style="{display: inline}" within the effected <form> tags.
The example I posted in my 2nd post was a modified line from the final output of that script, the html... but you can easily add that CSS property to the php script, since it'll be echo'ed out just the same.

Not sure how much better I can put it than that tbh.

rsynnott

Eeek, that is really odd from a human interface point of view. It makes my vision blur.

Bananna man

Doh!!!! I see what you mean about the submit button now. I must have been having a blonde moment!!! Thats soretd it, i'll have to brush up on my CSS.

Cheers Donkey