Table alligning...please help

HTML & CSS
1

Hi everyone…

I am a total newbie to programming. I am really struggling with aligning these tables. This is a gallery thumb page. I really want to position the tables with my background image. But I am not able to use ‘margin-left’ , the only thing that works is ‘width’ . I really want to move the thumbnail block down (I cannot move the block down at all…) and also to the right without increasing the space between the thumbnails. Is that possible?

Hope I don’t sound like an idiot… :smiley:

I get a decent view in Firefox but IE really changes the margin… please check the attached pic also…

Here is my CSS …

<style type="text/css">

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

a, input {
outline-color: invert;
outline-style: none;
outline-width: medium;
}


body
{
    
background-repeat: no-repeat;
background-color:#000000;
}



a {
text-decoration: none;
color: #ff0000;
}

a:visited {
color: #ff0000;
text-decoration: none;
}

a:hover {
text-decoration: none;
color: #ffffff;
}

a:active {
text-decoration: none;
color: #ff0000;
}

p {
font-size: 20px;
margin-top: 10px;
}


p.caption {
font-size: 20px;
color: #ff0000;
margin-top: 10px;
}

.navlinks{
font-size: 20px;
color: #ff0000;
padding-left: 5px;
}

.prevnext{
font-size: 20px;
line-height: 25px;
padding-left: 595px;
}

p.excerpt{ 
font-size: 18px;
color: #ffffff;
width: 750px;
border-top-style: solid;
border-top-color: #2C2C2C; 
background-color:#0F0F0F; 
border-top-width: 1px;
margin-top: 1px;
}

.categoryview{
margin-top: 95px;
margin-left: 35px;
width: 680px;



}

.thumbs{
width: 240px;
height: 200px;

}




</style>

And HTML is

<!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>

    <title>Photography</title>

</head>



<body>

<table  border='0'  style='margin: 0px ; padding: 0px ;'>

<tr>
    <td> 

                        <span class='navlinks'><a href=viewgallery.php>Albums</a></span><font color=#ff0000> >&gt </font>

                        <span class='navlinks'><a href=viewgallery.php?cid=1>Abstract</a></span><br><br/><br/><br/></td>
</tr>
    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=240'><center/><img 

    src='photos/tb_240.jpg' border='0' alt='End Of Day' class='img'/></a></td>
    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=239'><center/><img 

    src='photos/tb_239.jpg' border='0' alt='A Photographer's Dream' class='img'/></a></td>

    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=238'><center/><img 

    src='photos/tb_238.jpg' border='0' alt='Heaven's View' class='img'/></a></td>
    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=237'><center/><img 

    src='photos/tb_237.jpg' border='0' alt='Colorful World ' class='img'/></a></td>

</tr>
<tr class=thumbs>
    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=241'><center/><img 

    src='photos/tb_241.jpg' border='0' alt='' class='img'/></a></td>
    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=242'><center/><img 

    src='photos/tb_242.jpg' border='0' alt='' class='img'/></a></td>
    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=243'><center/><img 

    src='photos/tb_243.jpg' border='0' alt='' class='img'/></a></td>
    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=244'><center/><img 

    src='photos/tb_244.jpg' border='0' alt='' class='img'/></a></td>

</tr>

<tr class=thumbs>
    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=245'><center/><img 

    src='photos/tb_245.jpg' border='0' alt='' class='img'/></a></td>
    <td class=thumbs ><a href='viewgallery.php?cid=1&pid=246'><center/><img 

    src='photos/tb_246.jpg' border='0' alt='' class='img'/></a></td>

      

</table>

</body>
2

I have used your code… and it really made such big difference!! No drastic shifts like before :slight_smile: There is though, one slight move from top to downwards… Firefox pushes the thumbnails up a bit and IE pushes it down… you can see the padding increasing and decreases…

3

Your PHP wasn’t as bad as I was expecting – to take the code I had provided and work it into that PHP, and clean it up a bit adding some more robust error handling and doing a wee bit more sanitizing of values, I came up with this:


else if (!empty($cid) && empty($pid)) {

	$numberThumbsPerRow=4;
	$maxResults=400;

	$safeCid=mysql_real_escape_string($cid);

	/* Now, I'm not paranoid about trusting get... */
	if (
		isset($_GET['page']) &&
		is_numeric($_GET['page']) &&
		($_GET['page']>0)
	) {
		$page=$_GET['page'];
	} else $page=1;

	$from=($page-1)*$max_results;

	$result_final='
<div class="gallery">
	<ul>
		<li><a href="viewgallery.php">Albums</a> &raquo;</li>
		<li>';

	$query="
		SELECT category_name
		FROM	 gallery_category
		WHERE  category_id = '$safeCid'
	";

	if ($result=mysql_query($query)) {
		if ($data=mysql_fetch_array($result)) {
			$result_final.='<a href="viewgallery.php?cid='.$cid.'">'.
				$data['category_name'].
				'</a>';
		} else {
			$result_final.='Category Not Found';
		}
	} else {
		$result_final.='
			Unable to run MySQL Query. Returned error was:<br />
			Code '.mysql_errno().' - '.mysql_error().'<br />
			Query attempted was:
			<pre>',$query,'</pre>
		';
	}

	$result_final.='
		</li>
	</ul>

	<table>
		<tr>';

	$query="
		SELECT
			photo_id,
			photo_caption,
			photo_filename,
			photo_category
		FROM	gallery_photos
		WHERE photo_category = '$safeCid'
		LIMIT $from,$max_results
	";

	$result=mysql_query($query);

	if ($result=mysql_num_rows($result)) {

		if (($numRows=mysql_num_rows($result))>0) {

			$counter=0;

			while ($row=mysql_fetch_array($result)) {

				if (($counter&#37;$numberThumbsPerRow==0)) && ($counter>0)) {
					$result_final.='
		</tr><tr>';
				}

				$result_final.='
			<td>
				<a href="viewgallery.php?cid=$cid&pid='.$row['photo_id'].'">
					<img
						src="'.$images_dir.'/tb_'.$row['photo_filename'].'"
						alt="'.(
							empty($row['photo_caption']) ?
							'No description provided' :
							$row['photo_caption']
						).'"
					/>
				</a>
			</td>';

			}

			if ($counter%$numberThumbsPerRow>0) {
				$result_final.='
			<td colspan="'.$numberThumbsPerRow-$counter%$numberThumbsPerRow.'"></td>';
			}

		} else {
		 $result_final.='
			<td>No Photos found</td>';
		}

	} else {
		$result_final.='
			<td>
				Unable to run MySQL Query. Returned error was:<br />
				Code '.mysql_errno().' - '.mysql_error().'<br />
				Query attempted was:
				<pre>',$query,'</pre>
			</td>';
	}

	$result_final.='
		</tr>
	</table>

<!-- .gallery --></div>';

	/* force garbage collection before exit */
	mysql_free_result($result);

}

Might be a couple minor typo’s in there as that’s untested code, but that should give you the overall idea of what needs to be done.

Though I’m not wild about that storing the output in a variable thing :wink: Usually if one needs buffering of output, you just turn it on to use the much faster built-in one.

4

Expanding on the reset abomination: See my post [here, and this,

One [url=http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/]source of pro reset arguments even confuses IE’s layout/margin-collapse bug with css defaults. [url=http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/]Meyer’s apologia](http://csscreator.com/node/34411#comment-145634) simply makes no sense.
from later in that same thread.

cheers,

gary

5

I am going through that discussion… lots of new info… thank you very much… :goof:

6

That said, Rajeev, it’s understandable why you have it. You see it in lots of peoples code, also in big templates like Drupal.

Just be careful with it, and remove outline:0;

7

If a table has 3 cells in a row then all rows in that table will need to have 3 cells also. If you want one cell to span across other cell columns then you should apply the colspan attribute as I mentioned above. If you don’t have even cells then it’s still valid but effectively you get the gaps filled with blank cells by the browser.

8

I just wanted to move the tables Paul… :slight_smile: My English is not the best… :x

Can you please explain … ’ to have mismatched cells’ what does that mean?

Also …this is a PHP generated HTML … and the tables are generated by it. Looks like my tables are not produced in the traditional

<table>
<tr>
<td>

</td>
</tr>
</table>

format as above. Your code gave a good idea about how it should be. Your CSS code was able to do what I wanted to the table structure you created. But my PHP script is producing really skewed tables.

9

Did you mean that you just want to move the table?

You could just use a left margin to move it if you remove the inline styles where you have set it to margin:0.

Your code is invalid and you should remove the <center/> tag as it is not a self closing tag and is misplaced anyway (there are many other simple errors also so validate your code often).

Just set text-align:center on the tds in the table and the content will be centred within the cell.

You also seem to have mismatched cells as all cells need to add up to the same. If you want to span columns then use colspan.

Your code could be reduced to something roughly like this (which is now valid).


<!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=utf-8" />
<title>Photography</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100&#37;;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
}

ins {
    text-decoration:none;
}
del {
    text-decoration:line-through;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
a, input {
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
}
body {
    background-color:#000000;
}
a {
    text-decoration: none;
    color: #ff0000;
}
a:visited {
    color: #ff0000;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #ffffff;
}
a:active {
    text-decoration: none;
    color: #ff0000;
}
img, a img {
    border:none
}
p {
    font-size: 20px;
    margin-top: 10px;
}
p.caption {
    font-size: 20px;
    color: #ff0000;
    margin-top: 10px;
}
.prevnext {
    font-size: 20px;
    line-height: 25px;
    padding-left: 595px;
}
p.excerpt {
    font-size: 18px;
    color: #ffffff;
    width: 750px;
    background-color:#0F0F0F;
    border-top:1px solid #2c2c2c;
    margin-top: 1px;
}
.categoryview {
    margin-top: 95px;
    margin-left: 35px;
    width: 680px;
}
.thumbnails {
    margin:0 0 0 100px;
    width:960px;
    table-layout:fixed;
}
.thumbnails td, .thumbnails th {
    vertical-align:top;
    padding:10px 0;
    border:none;
}
.thumbnails td {
    text-align:center;
    width: 240px;
    height: 200px;
}
.thumbnails th {
    font-size: 20px;
    color: #ff0000;
    padding-left: 5px;
    text-align:left;
}
.thumbnails th a {
    font-size: 20px;
    color: #ff0000;
}
</style>
</head>
<body>
<table class="thumbnails">
    <thead>
        <tr>
            <th colspan="4"><a href='viewgallery.php'>Albums</a> >> <a href='viewgallery.php?cid=1'>Abstract</a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href='viewgallery.php?cid=1&amp;pid=240'><img src='photos/tb_240.jpg' alt='End Of Day' /></a></td>
            <td><a href='viewgallery.php?cid=1&amp;pid=239'><img src='photos/tb_239.jpg' alt="A Photographer's Dream"  /></a></td>
            <td><a href='viewgallery.php?cid=1&amp;pid=238'><img src='photos/tb_238.jpg' alt="Heaven's View"  /></a></td>
            <td><a href='viewgallery.php?cid=1&amp;pid=237'><img src='photos/tb_237.jpg' alt='Colorful World ' /></a></td>
        </tr>
        <tr>
            <td><a href='viewgallery.php?cid=1&amp;pid=241'><img src='photos/tb_241.jpg' alt='' /></a></td>
            <td><a href='viewgallery.php?cid=1&amp;pid=242'><img src='photos/tb_242.jpg' alt='' /></a></td>
            <td><a href='viewgallery.php?cid=1&amp;pid=243'><img src='photos/tb_243.jpg' alt='' /></a></td>
            <td><a href='viewgallery.php?cid=1&amp;pid=244'><img src='photos/tb_244.jpg' alt='' /></a></td>
        </tr>
        <tr>
            <td><a href='viewgallery.php?cid=1&amp;pid=245'><img  src='photos/tb_245.jpg' alt='' /></a></td>
            <td><a href='viewgallery.php?cid=1&amp;pid=246'><img  src='photos/tb_246.jpg' alt='' /></a></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
</body>
</html>

It obviously won’t display as you wanted because I didn’t know what its supposed to look like and what has to match but you should be able to adjust to suit.

10

Hi everyone again…

I have somehow managed to ( :stuck_out_tongue: ) make the table positioning happen. But I have two different views on Firefox and IE. Looks like IE is compressing everything to the left compare to Firefox. What am I doing wrong? Can you help me?

Please look at the attachments too…

This is my table output…

<table width='100%'>



<span class='navlinks'><a href=viewgallery.php>Albums</a></span><font color=#ff0000> >&gt </font> 


<span class='navlinks'><a href=viewgallery.php?cid=1>Abstract</a><br><br>


<table class=thumbs><tr>
    <td><a href='viewgallery.php?cid=1&pid=240'><img 

    src='photos/tb_240.jpg' border='0' alt='End Of Day' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=239'><img 

    src='photos/tb_239.jpg' border='0' alt='A Photographer's Dream' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=238'><img 

    src='photos/tb_238.jpg' border='0' alt='Heaven's View' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=237'><img 

    src='photos/tb_237.jpg' border='0' alt='Colorful World ' class='img'/></a></td>

</tr>
<tr>
    <td><a href='viewgallery.php?cid=1&pid=241'><img 

    src='photos/tb_241.jpg' border='0' alt='' class='img'/></a></td>

    <td><a href='viewgallery.php?cid=1&pid=242'><img 

    src='photos/tb_242.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=243'><img 

    src='photos/tb_243.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=244'><img 

    src='photos/tb_244.jpg' border='0' alt='' class='img'/></a></td>

</tr>
<tr>
    <td><a href='viewgallery.php?cid=1&pid=245'><img 

    src='photos/tb_245.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=246'><img 

    src='photos/tb_246.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=247'><img 

    src='photos/tb_247.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=248'><img 

    src='photos/tb_248.jpg' border='0' alt='' class='img'/></a></td>

</tr>
<tr>
    <td><a href='viewgallery.php?cid=1&pid=249'><img 

    src='photos/tb_249.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=250'><img 

    src='photos/tb_250.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=251'><img 

    src='photos/tb_251.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=252'><img 

    src='photos/tb_252.jpg' border='0' alt='' class='img'/></a></td>

</tr>
<tr>
    <td><a href='viewgallery.php?cid=1&pid=253'><img 

    src='photos/tb_253.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=254'><img 

    src='photos/tb_254.jpg' border='0' alt='' class='img'/></a></td>

    <td><a href='viewgallery.php?cid=1&pid=255'><img 

    src='photos/tb_255.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=256'><img 

    src='photos/tb_256.jpg' border='0' alt='' class='img'/></a></td>

</tr>
<tr>
    <td><a href='viewgallery.php?cid=1&pid=257'><img 

    src='photos/tb_257.jpg' border='0' alt='' class='img'/></a></td>
    <td><a href='viewgallery.php?cid=1&pid=258'><img 

    src='photos/tb_258.jpg' border='0' alt='' class='img'/></a></td>
    <td colspan='-2'>&nbsp;</td>
</tr></table>
      

</table>

My CSS…

<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

}

blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
}

ins {
    text-decoration:none;
}
del {
    text-decoration:line-through;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
a, input {
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
}
body {
    background-color:#000000;
}
a {
    text-decoration: none;
    color: #ff0000;
}
a:visited {
    color: #ff0000;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #ffffff;
}
a:active {
    text-decoration: none;
    color: #ff0000;
}
img, a img {
    border:none
}
p {
    font-size: 20px;
    margin-top: 10px;
}
p.caption {
    font-size: 20px;
    color: #ff0000;
    margin-top: 10px;
}
.prevnext {
    font-size: 20px;
    line-height: 25px;
    padding-left: 595px;
}
p.excerpt {
    font-size: 18px;
    color: #ffffff;
    width: 750px;
    background-color:#0F0F0F;
    border-top:1px solid #2c2c2c;
    margin-top: 1px;
}
.categoryview {
    margin-top: 95px;
    margin-left: 35px;
    width: 680px;
}
.thumbs {
    margin:100px 100px 100px 100px;
    width:580px;
    table-layout:fixed;
}
.thumbs td, .thumbs th {
    vertical-align:top;
    padding:20px 20px;
    border:none;
}
.thumbs td {
    text-align:center;
    width: 230px;
    height: 180px;
}
.thumbs th {
    font-size: 20px;
    color: #ff0000;
    padding-left: 505px;
    text-align:left;
}

</style>
11

Paul… I will get back with soon… wow… thank you for such detailed explanation and help with the code…you are right …I just need to move the tables freely… I haven’t tried you suggestions but I will tonight and will get back with you… thanks again…

12

Not tested. Of course, I may not understand exactly what you want.

td {
  text-align: center;
  vertical-align: top;
  }

Lose the center tag(s).

cheers,

gary

13

Paul… sorry about this. I thought since I asked the new questions at the end of the old thread I should start another one to get answers…didn’t mean to break any forum rules :confused:… I really appreciate your help.

Stomme… I just validated the CSS… but HTML…I need to work on that one… I have many errors… :slight_smile: Thank you for your reply… I need to look in to the PHP file about the inner table… I am a newbie…

deathshadow… Mea Culpa …Mea Culpa… for breaking all kinds of markup rules… man … I am not sure how that -2 colspan got in there!! :eek: I am a newbie but I know better than that… thank you for being honest with me here. I really don’t know what I am doing so your answer help me so much…you are right about the code… my gallery making attempt started from here, Sitepoint, from Mayank Gandhi’s tutorial… with my poor knowledge of PHP and that old code I am sure I brought home some old codes and methods…

Thank you very much …deathshadow… I removed all the ‘img’ class nonsense and the nonsensical colspan stuff. You are a funny man with your comments… :smiley:

My PHP code part for the thumbnails is

 // Thumbnail Listing

else if( $cid && empty( $pid ) )

{

  $number_of_thumbs_in_row = 4;

// If current page number, use it 

  // if not, set one! 

  if(!isset($_GET['page'])){ 

      $page = 1; 

  } else { 

      $page = $_GET['page']; 

  } 

// Define the number of results per page 

  $max_results = 400; 



// Figure out the limit for the query based 

// on the current page number. 

  $from = (($page * $max_results) - $max_results); 

  $result = mysql_query("
    SELECT 
          photo_id
        , photo_caption
        , photo_filename 
        , photo_category
    FROM 
        gallery_photos 
    WHERE 
        photo_category='".addslashes($cid)."' 
    LIMIT 
        $from, $max_results
    "); 

  $nr = mysql_num_rows( $result );

  if( empty( $nr ) )

  {

   $result_final = "\	<tr><td>No Photos found</td></tr>\
";

  }

   else

  {

   while( $row = mysql_fetch_array( $result ) )

   {

    $result_array[]= "<a href='viewgallery.php?cid=$cid&pid=".$row[0]."'><img 

    src='".$images_dir."/tb_".$row[2]."' alt='".$row[1]."' /></a>";

   }



    $result = mysql_query( "SELECT category_name FROM gallery_category WHERE category_id='".addslashes($cid)."'" ); 

    $nr = mysql_num_rows( $result );

    list($category_name) = mysql_fetch_array( $result ); 

    mysql_free_result( $result );     


    $result_final = "
    
<a href=viewgallery.php>Albums</a><font color=#ff0000> >&gt </font> 

<a href=viewgallery.php?cid=$cid>$category_name</a><br><br>


<table class=thumbs><tr>\
";



            foreach($result_array as $thumbnail_link)
            {
                if($counter == $number_of_thumbs_in_row)
                {    
                    $counter = 1;
                    $result_final .= "\
</tr>\
<tr>\
";
                }
                else
                $counter++;

                $result_final .= "\	<td>".$thumbnail_link."</td>\
";
            }
    
            if($counter)
            {
                if($number_of_thumbs_in_row-$counter)
            $result_final .= "\	<td colspan='".($number_of_thumbs_in_row-$counter)."'>&nbsp;</td>\
";

                $result_final .= "</tr></table>";

I am sure there are many poor coding practices in it…

Thanks again…you guys gave me so much information…thank you for that… :slight_smile:

14

Gary…your suggestion gave me some control over the tables. Thank you and it did remove the inconsistencies between the browser look… I hope I can give you a better job of explaining this time.

I have three columns and three rows images on my thumbnail page. My problem is I cannot position my thumbnail block (as whole), where I want it to be. The only CSS property that works for me is ‘width’. When I use width it spreads out my thumbnails.

Is there anyway I can position my thumbnail block in exact location without increasing the space in between the thumbnails…? ( in another words… moving …the whole block of three rows and columns left to right without increasing the space between the thumbnails. ) Does absolute positioning work with tables?

Thank you for any help that you can give me…

15

It was the Eric Meyer reset…

I recognised it. I’m sure he hangs his head with shame whenever he sees his reset on a page.

His reset has a comment, your copy doesn’t have it: don’t forget to add focus styles!

If I’m on my laptop, no mouse, I can’t see where I’m at if you remove outline.

And, if you’re styling :hover, usually that’s the place to style :focus

Basically that reset tells the browser to spend a lot of time resetting things that don’t need to be reset.

As you code CSS more and more, you’ll start noticing that you write certain code over and over again to undo some browser default or something. That’s when you make your own reset. Eric’s was originally for himself. But lots of people copied it.

Resetting some things make life easier cross-browser, but most things in that reset are overkill. They also make debugging harder if it’s not your own reset.

16

Thank you again… for giving me some directions… and I really understand what my problem is at least! :slight_smile:

17

Stomme…

It was the Eric Meyer reset… why do you say it bad… ? :slight_smile: I do not know much … please explain…

:slight_smile:

18

My take on doing it with the table – a little different from Paul’s since I prefer XHTML, and I deleted a whole bunch of pointless hooks and CSS – and fixed the markup to be more semantic.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<title>
	Gallery demo
</title>

<style type="text/css">

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	font:normal 85&#37;/140% arial,helvetica,sans-serif;
	background:#000;
}

a {
	text-decoration: none;
	color:#F00;
}

a:active,
a:focus,
a:hover {
	color:#FFF;
}

.gallery {
	table-layout:fixed;
	empty-cells:show;
	border-collapse:collapse;
	width:960px;
	margin:0 auto;
}

.gallery ul {
	list-style:none;
}

.gallery li {
	display:inline;
	color:#F00;
}

.gallery td {
	text-align:center;
	width: 240px;
	height: 180px;
}

</style>

</head><body>

<div class="gallery">

	<ul>
		<li><a href=viewgallery.php>Albums</a> &raquo;</li>
		<li><a href=viewgallery.php?cid=1>Abstract</a></li>
	</ul>
	
	<table>
		<tr>
			<td>
				<a href="viewgallery.php?cid=1&amp;pid=240">
					<img src="photos/tb_240.jpg" alt="End Of Day" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=239">
					<img src="photos/tb_239.jpg" alt="A Photographer"s Dream" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=238">
					<img src="photos/tb_238.jpg" alt="Heaven"s View" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=237">
					<img src="photos/tb_237.jpg" alt="Colorful World " />
				</a>
			</td>
		</tr><tr>
			<td>
				<a href="viewgallery.php?cid=1&amp;pid=241">
					<img src="photos/tb_241.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=242">
					<img src="photos/tb_242.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=243">
					<img src="photos/tb_243.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=244">
					<img src="photos/tb_244.jpg" alt="No description given" />
				</a>
			</td>
		</tr><tr>
			<td>
				<a href="viewgallery.php?cid=1&amp;pid=245">
					<img src="photos/tb_245.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=246">
					<img src="photos/tb_246.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=247">
					<img src="photos/tb_247.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=248">
					<img src="photos/tb_248.jpg" alt="No description given" />
				</a>
			</td>
		</tr><tr>
			<td>
				<a href="viewgallery.php?cid=1&amp;pid=249">
					<img src="photos/tb_249.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=250">
					<img src="photos/tb_250.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=251">
					<img src="photos/tb_251.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=252">
					<img src="photos/tb_252.jpg" alt="No description given" />
				</a>
			</td>
		</tr><tr>
			<td>
				<a href="viewgallery.php?cid=1&amp;pid=253">
					<img src="photos/tb_253.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=254">
					<img src="photos/tb_254.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=255">
					<img src="photos/tb_255.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=256">
					<img src="photos/tb_256.jpg" alt="No description given" />
				</a>
			</td>
		</tr><tr>
			<td>
				<a href="viewgallery.php?cid=1&amp;pid=257">
					<img src="photos/tb_257.jpg" alt="No description given" />
				</a>
			</td><td>
				<a href="viewgallery.php?cid=1&amp;pid=258">
					<img src="photos/tb_258.jpg" alt="No description given" />
				</a>
			</td>
			<td colspan="2"></td>
		</tr>
	</table>
	
<!-- .gallery --></div>	

</body></html>

Which assuming this has something like PHP underneath it, and assuming we had a $results array containing our values, the underlying code would be something like:


echo '
		<table>
			<tr>';

$counter=0;

/*
	using foreach with a counter as I don't know if your
	keys can be trusted as a index for formatting
*/

foreach ($results as $data) {
	if (($counter%4==0)) && ($counter>0)) {
		echo '
			</tr><tr>
				';
	}
	
	echo '<td>
					<a href="viewgallery.php?cid=1&amp;pid=',$data['id'],'">
						<img src="photos/',$data['url'],'" alt="',(
							empty($data['alttext']) ?
							'No description given' :
							$data['alttext']
						),'" />
					</a>
				</td>';
			
	$counter++;
}

if ($counter%4>0) {
	echo '
				<td colspan="',4-$counter%4,'"></td>';
}

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

Or something to that effect. Hey look, formatting AND proper quotes.

19

Thank you for taking your time to write all that code down for me… you are awesome!! :slight_smile: I did have a doctype but it was the <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> …

20

By roughly he means he forgot to delete all the pointless class=“img” nonsense :wink: