[SOLVED] Height/weight and display: inline; ...

[galvin]

I have multiple small tables being generated on a page and they are getting stacked, one on top of the other.  So I added "display: inline" to the CSS (code is below), and that made them display left to right as I wanted.  However, now that I made the tables "inline," the height and width values are being ignored by Firefox and the tables are not displaying in the proper height and width. 

 

Any ideas around this?  Basically, I need them to be displayed inline, but I also need the height and width to be respected, but I think it only does that if display is set to "block."  Hence my problem.

 

table#player {

position: relative;
top: 20px;
left: 50px;
height: 60px;
width: 130px;
display: inline;
border: 1px solid black;
}

[CyberShot]

can you post a link to the site. More info is needed to solve this

[galvin]

I don't have it up on a public site yet, but I'll try to explain better.  Here is the PHP code that generates the multiple tables by pulling info from a MySQL table that has around 150 "players" in it.  In other words, this code generates around 150 individual html tables...

 

<?php

$sql = "SELECT firstname, lastname, playerid, team, teamid
FROM quarterbacks
ORDER BY teamid";
$QBs_set = mysql_query($sql, $connection);
if (!$QBs_set) {
die("Database query failed: " . mysql_error());
} else {

			mysql_data_seek($QBs_set, 0); // reset pointer to 0. 

         		while ($QBsArray = mysql_fetch_array($QBs_set)) {
             
                echo "<table id='player'><tr><td rowspan='2'><input type='checkbox' name='qb[]' value='{$QBsArray['playerid']}'></td><td class='image' rowspan='2'><img src='images/quarterbacks/qb" . $QBsArray['playerid'] . ".jpg' /></td><td id='player' >" . $QBsArray['firstname'] . "<br>" . $QBsArray['lastname'] . "</td></tr><tr><td><img id='logo' src='images/teamlogos/team" . $QBsArray['teamid'] . ".gif' width=30 height=30/></td></tr></table>";
           		 }
			 echo "<input type='submit' name='submit' value='Submit'>";
}
?>

 

And again, the CSS code for all of those Tables that get created with the id of "player" is...

 

table#player {

 

position: relative;

top: 20px;

left: 50px;

height: 60px;

width: 130px;

display: inline;

border: 1px solid black;

}

 

And WITHOUT "display: inline", they get stacked one on top of the other down the left hand side of the page. 

But WITH "display: inline", they get displayed across the page (about seven across) and then jump to the next line and puts 7 more across and so on and so on.  This is the way I NEED them to display.

 

But WITH "display: inline," Firefox doesn't respect the "height" and "width" part of the CSS and that is my problem, because I think it only respects it when display is set to "block."

 

Any ideas?

[TheFilmGod]

table {

  display: block;

  float: left;

}

 

Make sure you clear the floats at the end.

[galvin]

Worked perfectly, thank you so much!!!  If you don't mind, what do you mean by clearing the floats at the end? 

-Greg

[galvin]

I figured out what you meant by clearing, thanks again!