CSS background not expanding with MySQL table generated from loop

damianjames · July 7, 2008

Hi all -

I did a search through the forums and couldn't find anything similar, so I'm hoping someone has an idea as to what to do. I'm new, so please bear with the extraneous code.

The issue is I have a page that displays a table of products with images and information. The rest of the page generates, CSS backgrounds are applied, but the PHP loop is still building the table. My container div doesn't keep resizing with the table as it generates, so the background stops halfway down the table. If I refresh the page the background will stop at different heights down at different times, which is why I'm thinking the problem is that the table is still generating when the rest of the page is done. I'd also like to have a footer on the page, but a footer div winds up behind the table that is generated, farther down than the end of the background image.

Any assistance is greatly appreciated!

CSS:

html {
height:100%;
min-height:100%;
}

body {
margin:0pt;
padding:0pt;
text-align:center;
height:100%;
min-height:100%;
}

img {
border:0px;
}

.centered_float {
margin:0pt auto;
padding:0pt;
position:relative;
text-align:left;
width:1000px;
}

#header {
left: 0px;
top: 0px;
background:#FFFFFF;
height:150px;
}

#logo {
float:left;
margin-left:20px;
}

#logo_sub {
float:left;
display:inline;
margin-top:90px;
margin-left:10px;
}

#language_select {
float:right;
position:absolute;
top:20px;
right:120px;
color:#F3CFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#language_select a {
color:#5F3B6B;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#language_select a:visited {
color:#5F3B6B;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#language_select a:hover {
color:#5F3B6B;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#navigation {
background:url(../images/nav_bg.jpg) repeat-x #6E2B86;
color:#FFFFFF;
height: 38px;
}

.nav_float {
margin:0pt auto;
padding:0pt;
position:relative;
text-align:left;
width:1000px;
line-height:35px;
}

.nav_links {
display:inline;
position:relative;
top:-4px;
}

.nav_links img {
display:inline;
line-height:35px;
position:relative;
top:8px;
}

.nav_links a {
color:#FFFFFF;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-left:5px;
margin-right:5px
}

.nav_links a:hover {
color:#F3CFFF;
}

#banner_blank {
height:40px;
min-height:40px;
background:#6E2B86;
}

#products {
background: #ffffff;
height:100%;
}

.product_float {
margin:0pt auto;
padding:0pt;
text-align:left;
width:1000px;
height:500%;
min-height:100%;
background:#ffffff url(/images/product_float.jpg) repeat-y left top;
}

#product_nav {
width:150px;
min-width:150px;
min-height:500px;
position:relative;
top:0px;
left:0px;
display:inline;
float:left;
background: url(/images/vert_nav_bg.jpg) repeat-x left top;
}

#product_table {
position:relative;
top:0px;
display:inline;
float:left;
width:800px;
height:100%;
min-height:100%;
}

.product_cell {
padding-left:15px;
padding-bottom:25px;
margin-right:10px;
border-bottom:2px solid #6E2B86;
}

.product_cell a, .product_cell a:visited {
color:#6E2B86;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

.product_cell a:hover {
color:#F3CFFF;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-decoration:none;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php 
require_once("includes/config.php");
?>
<script type="text/javascript" src="scripts/vertmenu.js"></script>
<title>
<?php
	echo("Company - $prodtitle");
?>
</title>
</head>
<?php
require_once("includes/heading.php");
?>
<div id="banner_blank"></div>
<div id="products">
  <div class="product_float">
		<div id="product_nav">
			<ul id="verticalmenu" class="vertmenu">
				<?php
					echo ("
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[0]\">$prod_link_text[0]</a></li>
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[1]\">$prod_link_text[1]</a></li>
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[2]\">$prod_link_text[2]</a></li>
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[3]\">$prod_link_text[3]</a></li>
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[4]\">$prod_link_text[4]</a></li>
						");
				?>
			</ul>
		</div>
	  <div id="product_table">
		  <table>
			  <?php
					echo ("<h3>$prodgroup</h3>");
					$db = @mysql_connect("localhost", "user", "pass");
					if( ! ($db = @mysql_connect("localhost", "user", "pass")) ) {
					} else {
						mysql_select_db("dbname",$db) or die("Select DB Error: ".mysql_error());
					}

					$numcols = 3; // how many columns to display
					$numcolsprinted = 0; // no of columns so far

					// get the results to be displayed
					if ($prodgroup == "top") {
						$query = "SELECT * FROM $lang ORDER BY description";
						$mysql_result = mysql_query($query, $db);
					}
					else {
						$query = "SELECT * FROM $lang WHERE prodgroup = \"$prodgroup\" ORDER BY description";
						$mysql_result = mysql_query($query, $db);
					}
					// get each row
					while($myrow = mysql_fetch_row($mysql_result))
					{
						//get data - eg, reading fields 0 and 1
						$id = $myrow[0];
						$name = $myrow[1];
						$description = $myrow[2];
						$page = $myrow[3];
						$prodgroup = $myrow[4];
						$price = $myrow[5];
						$dimension = $myrow[6];

						if ($numcolsprinted == $numcols) {
							print "</tr>\n<tr>\n";
							$numcolsprinted = 0;
						}

						// output row from database
						echo "<td class=\"product_cell\" valign=\"top\"><a href=\"productdetail.php?lang=$lang&name=$name\">$name<br>$description<br><img src=\"/images/products/thumbs/p$name.jpg\"><br>$prodgroup<br>Dimension: $dimension<br>Price: $price</a></td>\n";

						// bump up row counter
						$numcolsprinted++;

					} // end while loop

					$colstobalance = $numcols - $numcolsprinted;
					for ($i=1; $i<=$colstobalance; $i++) {
					}
				?>
                  </tr>
		  </table>
	  </div>
  </div>
</div>	
</body>
</html>

rhodesa · July 7, 2008

by the looks...you have a bad HTML structure. on the generated page, can you do a view source and copy/paste that code to here.

i notice you have an H3 tag inside a TABLE tag (it needs to be outside or in a table cell)

it doesn't look like you have an open TR or close TR tag at the beginning/end

try running the page through http://validator.w3.org/

damianjames · July 8, 2008

Hi -

Thank you for the response! Here is the generated code from the browser:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
CUADROS Y COSAS - PRODUCTOS</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#ffffff;">

    <script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<div id="header">
	<div class="centered_float">

		<span id="logo"><img src="/images/logo_white.gif" /></span>
		<span id="logo_sub"><img src="/images/decoration_logo_esp.gif" /></span>
		<span id="language_select">
			ESPAÑOL | <a href="?lang=eng">ENGLISH</a>			</span>
	</div>
</div>
<div id="navigation">

	<div class="nav_float">
		<div class="nav_links">
			<a href="/home.php?lang=esp">HOME</a>			</div>
		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>
		<div class="nav_links">
			<a href="/about.php?lang=esp">QUIENES SOMOS</a>			</div>

		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>
		<div class="nav_links">
			<a href="/opportunity.php?lang=esp">OPORTUNIDAD</a>			</div>
		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>

		<div class="nav_links">
			<a href="/product_main.php?lang=esp">PRODUCTOS</a>			</div>
		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>
		<div class="nav_links">
			<a href="/contact.php?lang=esp">CONTÁCTANOS</a>			</div>

		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>
		<div class="nav_links">
			<a href="/events.php?lang=esp">EVENTOS</a>			</div>
		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>

		<div class="nav_links">
			<a href="/private/materials.php?lang=esp">MATERIALES PARA DISEÑADORAS(ES)</a>			</div>
	</div>
</div>
<script type="text/javascript" src="scripts/vertmenu.js" />
<div id="banner_blank"></div>
<div id="products">

  <div class="product_float">
		<div id="product_nav">
			<ul id="verticalmenu" class="vertmenu">

						<li><a href="?lang=esp&prodgroup=GRUPOS">GRUPOS DISEÑADOS</a></li>
						<li><a href="?lang=esp&prodgroup=ARTE_ENMARCADO">ARTE ENMARCADO</a></li>
						<li><a href="?lang=esp&prodgroup=ESPEJOS">ESPEJOS</a></li>
						<li><a href="?lang=esp&prodgroup=ACCESORIOS">ACCESORIOS</a></li>

						<li><a href="?lang=esp&prodgroup=FLORALES_Y_VELAS">FLORALES Y VELAS</a></li>
										</ul>
		</div>
	  <div id="product_table">
		  <table>
              	<tr>
			  <td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3005">3005<br />Alicia I<br /><img src="/images/products/thumbs/p3005.jpg" /><br />ESPEJOS<br />Dimension: 11" X 11"<br />Price: $21.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3000">3000<br />Alicia II<br /><img src="/images/products/thumbs/p3000.jpg" /><br />ESPEJOS<br />Dimension: 14 1/2" X 35"<br />Price: $59.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3004">3004<br />Alicia III<br /><img src="/images/products/thumbs/p3004.jpg" /><br />ESPEJOS<br />Dimension: 24 1/4" X 28 1/4"<br />Price: $129.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3008">3008<br />Diana I<br /><img src="/images/products/thumbs/p3008.jpg" /><br />ESPEJOS<br />Dimension: 10 1/4" X 10 1/4"<br />Price: $19.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3007">3007<br />Diana II<br /><img src="/images/products/thumbs/p3007.jpg" /><br />ESPEJOS<br />Dimension: 26" X 30"<br />Price: $59.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3006">3006<br />Diana III<br /><img src="/images/products/thumbs/p3006.jpg" /><br />ESPEJOS<br />Dimension: 28 1/2" X 41"<br />Price: $119.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3002">3002<br />Fiorella I<br /><img src="/images/products/thumbs/p3002.jpg" /><br />ESPEJOS<br />Dimension: 12" X 12"<br />Price: $24.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3003">3003<br />Fiorella II<br /><img src="/images/products/thumbs/p3003.jpg" /><br />ESPEJOS<br />Dimension: 16" X 36"<br />Price: $69.99 </a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3001">3001<br />Fiorella III <br /><img src="/images/products/thumbs/p3001.jpg" /><br />ESPEJOS<br />Dimension: 30" X 42"<br />Price: $129.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3022">3022<br />Isabella I<br /><img src="/images/products/thumbs/p3022.jpg" /><br />ESPEJOS<br />Dimension: 10.5" X 10.5"<br />Price: $19.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3023">3023<br />Isabella II<br /><img src="/images/products/thumbs/p3023.jpg" /><br />ESPEJOS<br />Dimension: 14" X 34"<br />Price: $59.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3032">3032<br />Laura Mirror<br /><img src="/images/products/thumbs/p3032.jpg" /><br />ESPEJOS<br />Dimension: 26 3/8" X 30 3/8"<br />Price: $41.95</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3020">3020<br />Patricia I<br /><img src="/images/products/thumbs/p3020.jpg" /><br />ESPEJOS<br />Dimension: 12" X 12"<br />Price: $24.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3019">3019<br />Patricia II<br /><img src="/images/products/thumbs/p3019.jpg" /><br />ESPEJOS<br />Dimension: 16" X 36"<br />Price: $69.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3018">3018<br />Patricia III<br /><img src="/images/products/thumbs/p3018.jpg" /><br />ESPEJOS<br />Dimension: 30" X 42"<br />Price: $134.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3017">3017<br />Sofía I <br /><img src="/images/products/thumbs/p3017.jpg" /><br />ESPEJOS<br />Dimension: 12" X 12"<br />Price: $24.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3016">3016<br />Sofía II <br /><img src="/images/products/thumbs/p3016.jpg" /><br />ESPEJOS<br />Dimension: 16" X 36"<br />Price: $69.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3015">3015<br />Sofía III <br /><img src="/images/products/thumbs/p3015.jpg" /><br />ESPEJOS<br />Dimension: 30" X 42"<br />Price: $139.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3021">3021<br />Vanessa I <br /><img src="/images/products/thumbs/p3021.jpg" /><br />ESPEJOS<br />Dimension: 8.5" X 8.5"<br />Price: $14.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3030">3030<br />Victoria Mirror<br /><img src="/images/products/thumbs/p3030.jpg" /><br />ESPEJOS<br />Dimension: 30" X 42"
<br />Price: $129.99</a></td>
                  </tr>
		  </table>
	  </div>
  </div>
</div>
    <div id="footer">

    	<div class="footer_float">
        	©2008 Cuadros y Cosas L.P.	All Rights Reserved.
        </div>
    </div>
</body>
</html>

I ran it through the validator and just about everything has to do with img alt tags and not using an html escape code for the ampersand (switched it and it broke php). It also says a bunch of TD tags aren't closed, but looking through the source of the generated page, I can't find a single one that isn't. I did fix the TR tag at the beginning and remove the H3 tag as well.

Sign In

CSS background not expanding with MySQL table generated from loop

Recommended Posts

damianjames

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

damianjames

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information