Jump to content

Defining Width Using % in CSS

e1seix

By e1seix
in CSS Help

 Share

Recommended Posts

e1seix Regular Member

e1seix

Posted
Posted 

		// OTHER PRO TABLE					
	echo '<table cellpadding="0" cellspacing="0" width="100%" border="0">';
  		  echo '<tr>';

// PRODUCTS CODE
mysql_connect("127.0.0.1", "xxxxxxx", "xxxxxxxx") or die(mysql_error());
mysql_select_db("xxxxxxxx") or die(mysql_error());

$brandID = $_GET['brandID'];
$limit=15;
$i=0;

$go=mysql_query("SELECT * FROM admin WHERE brandID='$brandID' ORDER BY name LIMIT $startrow, $limit")or
die(mysql_error());
while($row = mysql_fetch_array( $go )) {

    if ($i > 2)
    {
        echo "</tr><tr>";
        $i=0;
    }

	    echo '<td valign="top" style="padding:2px;color:#000000;font-Family:Verdana;font-size:10px;text-align:left;width:33%">';

		// WHITE PIC TABLE
		echo '<table cellpadding="0" cellspacing="0" width="100%" border="0">';
		  echo '<tr>';
		    echo '<td colspan="2" height="1"><img src="http://www.fightshop.com/images/transparent.gif" width="1" height="6"></td>';
		  echo '</tr>';
	  	  echo '<tr>';
		    echo '<td width="11" height="11"><img src="/tabs/white_1.gif" width="11" height="11" alt=""></td>';
		    echo '<td height="11" style="background: url(/tabs/white_2.gif) repeat-x top left"><img src="http://www.fightshop.com/images/transparent.gif" width="11" height="11" alt=""></td>';
    		    echo '<td width="11" height="11"><img src="/tabs/white_3.gif" width="11" height="11" alt=""></td>';									          echo '</tr>';
		  echo '<tr>';
		    echo '<td width="11" style="background: url(/tabs/white_4.gif) repeat-y top left"><img src="http://www.fightshop.com/images/transparent.gif" width="11" height="11" alt=""></td>';
    		    echo '<td valign="top" class="white" style="background:#ffffff;padding:2px;color:#000000;font-Family:Verdana;font-size:10px;text-align:center"><span class="white"><a class="white" href="/show.php?sku='.$row[sku].'"><img src="'.$_HTTPS['PHP_SELF'].'/images/'.$row['image'].'.jpg" height="100" width="100" alt="'.$row[name].'"></a></span></td>';
		    echo '<td width="11" style="background: url(/tabs/white_6.gif) repeat-y top left"><img src="http://www.fightshop.com/images/transparent.gif" width="11" height="11" alt=""></td>';
		  echo '</tr>';
		  echo '<tr>';
		    echo '<td width="11" height="11"><img src="/tabs/white_7.gif" width="11" height="11" alt=""></td>';
		    echo '<td height="11" style="background: url(/tabs/white_8.gif) repeat-x top left"><img src="http://www.fightshop.com/images/transparent.gif" width="11" height="11" alt=""></td>';
    		    echo '<td width="11" height="11"><img src="/tabs/white_9.gif" width="11" height="11" alt=""></td>';
		  echo '</tr>';
		echo '</table>';

		echo '<table cellpadding="0" cellspacing="0" width="100%" border="0">';
		  echo '<tr>';
		    echo '<td width="4px"><img src="/tabs/blue_1.gif" width="4" height="4" alt=""></td>';
		    echo '<td colspan="2" height="4" style="background: url(/tabs/blue_2.gif) repeat-x;"><img src="/tabs/blue_2.gif" width="1" height="4" alt=""></td>';
		    echo '<td width="4px"><img src="/tabs/blue_3.gif" width="4" height="4" alt=""></td>';
		  echo '</tr>';
		  echo '<tr>';
		    echo '<td width="4px" style="background: url(/tabs/blue_left.gif) repeat-y;" valign="top"><img src="/tabs/blue_4.gif" width="4" height="12" alt=""></td>';
		    echo '<td colspan="2" align="center" class="main" height="100" style="background: #0E71AC url(/tabs/blue_x.gif) repeat-x left top" valign="top"><a href="/show.php?sku='.$row[sku].'">'.$row[name].'</a></td>';
		    echo '<td width="4px" style="background: url(/tabs/blue_right.gif) repeat-y;" valign="top"><img src="/tabs/blue_6.gif" width="4" height="12" alt=""></td>';
		  echo '</tr>';
		  echo '<tr>';
		    echo '<td width="4px"><img src="/tabs/blue_7.gif" width="4" height="4" alt=""></td>';
		    echo '<td colspan="2" height="4" style="background: url(/tabs/blue_8.gif) repeat-x;"><img src="/tabs/blue_8.gif" width="1" height="4" alt=""></td>';
		    echo '<td width="4px"><img src="/tabs/blue_9.gif" width="4" height="4" alt=""></td>';
		  echo '</tr>';
		echo '</table>';

		echo '<table cellpadding="0" cellspacing="0" width="100%" border="0">';
		  echo '<tr>';
		    echo '<td width="11" height="11"><img src="/tabs/white_1.gif" width="11" height="11" alt=""></td>';
		    echo '<td colspan="2" height="11" style="background: url(/tabs/white_2.gif) repeat-x top left"><img src="http://www.fightshop.com/images/transparent.gif" width="11" height="11" alt=""></td>';
		    echo '<td width="11" height="11"><img src="/tabs/white_3.gif" width="11" height="11" alt=""></td>';
		  echo '</tr>';
		  echo '<tr>';
		    echo '<td width="11" style="background: url(/tabs/white_4.gif) repeat-y top left"><img src="http://www.fightshop.com/images/transparent.gif" width="11" height="11" alt=""></td>';

		    echo '<td colspan="2" align="center" style="background:#ffffff;color:#000000;font-Family:Verdana;font-size:10px;font-weight:bold" valign="middle">';

if (($row[RRP])<=($row[dataP])) {

		    echo ' <br />';
		    echo '<span style="color:#ff0000;font-size:12px">Our Price £'.$row[dataP].'</span><br />';
		    echo ' </td>';
}

else {
$save_1=($row[RRP]-$row[dataP]);
$save_2 = number_format($save_1, 2, '.', '');
$save_3=($save_1/($row[RRP]/100));
$save_4 = number_format($save_3, 2, '.', '');

		    echo 'RRP £'.$row[RRP].'<br />';
		    echo '<span style="color:#ff0000;font-size:12px">Our Price £'.$row[dataP].'</span><br />';
		    echo 'Saving '.$save_4.'%</td>';
}

		    echo '<td width="11" style="background: url(/tabs/white_6.gif) repeat-y top left"><img src="http://www.fightshop.com/images/transparent.gif" width="11" height="11" alt=""></td>';
		  echo '</tr>';
		  echo '<tr>';
		    echo '<td width="11" height="11"><img src="/tabs/white_7.gif" width="11" height="11" alt=""></td>';
		    echo '<td colspan="2" height="11" style="background: url(/tabs/white_8.gif) repeat-x top left"><img src="http://www.fightshop.com/images/transparent.gif" width="11" height="11" alt=""></td>';
		    echo '<td width="11" height="11"><img src="/tabs/white_9.gif" width="11" height="11" alt=""></td>';
		  echo '</tr>';
		echo '</table>';

	    echo '</td>';

$i++;

}

                  echo '</tr>';
	echo '</table>';

 

This is a code that lists up to 3 products according to a database per row, before it detects to move to next row and print next 3 and so on etc.

 

It works great if there is 3 or more products but where there is only 1 or 2 it stretches the findings across the whole space of the page instead of only still complying with the 33% rule I have introduced on this line:

 

		    echo '<td valign="top" style="padding:2px;color:#000000;font-Family:Verdana;font-size:10px;text-align:left;width:33%">';

 

I have tried to switch things around and even define the 33% as a pixel amount roughly equivilent to a third of page space, but then I get conflicting findings in both IE and Mozilla.

 

Can anyone help define this code to display products according to just 33% of the space available even if there is less than 3 to start with.

 

Many thanks,  ;D ;D ;D

Link to comment
Share on other sites
dbrimlow Member

dbrimlow

Posted
Posted

If you were not using tables for layout it would be easier and work. But tables have a mind of their own when using percentages (particularly in IE).

 

This was the biggest hassle for us veterans back in the old Netscape/IE wars.

 

It can be done, but not easily, not cleanly across browsers and most definitely not unless the page is 100% valid.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.