images not lining up

[gpigate]

I am new at trying to do everything with css and I am nowhere near there yet. However I am trying to learn as go. So with that said, please dont blast the code too bad I do want to continue learning though so pointers are appreciated.

this page

On the page aboe you can see where there is a left column listing months, then on the right will be a blog for that month by a staff member.

There is a white space / line between those two images. It appears to be caused by a cellspacing/padding issue, but I can not get it to work out regardless of what I try.

The important css attributes are

.jmonthl{background-image:url('smonthbg.jpg'); height:500px; width:200px; padding: 30px 0 0 0; margin:0 0 0 0; border:0;}
.jmonth_header{ color: #ffffff; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif }
.mlink a{ color: #ffffff; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 0 0 0 20px;}
.jmonthhead{background-image:url('monthhead.jpg'); height:50px; width:298px; text-align:left; padding:0; border:0; }
.jmonthheadlink{ color: #000000; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 5px 0 0 25px; font-weight:bold; margin:0px }
.jmiddle{ padding:25px 0 0 0; margin:0px; }
.middletable{width:550px; padding:0 0 0 0; margin: 0 0 0 0; }

and the php /html is

<table width="100%" ><tr><td  align="right"><a href="index.php?page=mods/staff/index">Journals by Staff Member</a></td></tr></table>
<table  align="left" cellpading="0" cellspacing="0">
<tr><td valign="top">
	<table cellpading="0" cellspacing="0">
    <!--<tr><td valign="top"><p class="jmonth_header">Monthly</p></td></tr>-->
    <tr><Td class="jmonthl" valign="top" >
	<?php $lsql = mysql_query("SELECT DISTINCT month, year, count(id) as numr FROM table_name where `release` = 1 and archive <> 1 group by month, year order by year desc, month desc");
		  while ($list = mysql_fetch_array($lsql)){
		  switch ($list["month"]){  case 1: $m = "January"; break;
                    case 2: $m =  "February"; break;
                    case 3: $m =  "March"; break;
                    case 4: $m =  "April"; break;
                    case 5: $m =  "May"; break;
                    case 6: $m =  "June"; break;
                    case 7: $m =  "July"; break;
                    case 8: $m =  "August"; break;
                    case 9: $m =  "September"; break;
                    case 10: $m =  "October"; break;
                    case 11: $m =  "November"; break;
                    case 12: $m =  "December"; break;
                    case 0: $m =  "Not Set"; }
echo "<p class=\"mlink\"><a href=\"index.php?page=mods/staff/mindex&month=".$list["month"]."&year=".$list["year"]."\">".$m." ".$list["year"]." (".$list["numr"].")</a></p>";
		  }		  
		  if (!isset($_GET["month"])){
  		    $month = date(n);
		    $y = date(Y);
		  } else {
		    $month = $_GET["month"];
			$y=$_GET["year"];
		  }
		  switch ($month){
			case 1: $m = "January"; break;
			case 2: $m =  "February"; break;
			case 3: $m =  "March"; break;
			case 4: $m =  "April"; break;
			case 5: $m =  "May"; break;
			case 6: $m =  "June"; break;
			case 7: $m =  "July"; break;
			case 8: $m =  "August"; break;
			case 9: $m =  "September"; break;
			case 10: $m =  "October"; break;
			case 11: $m =  "November"; break;
			case 12: $m =  "December"; break;
			case 0: $m =  "Not Set"; }		  
		  
	?>
    </Td></Tr>
    </table>
    </td>
    <td valign="top" class="jmiddle">
  	  <table class="middletable" >
      <tr><td class="jmonthhead" align="left" ><p class="jmonthheadlink"><?php echo $m." ".$y;?></p></td></tr>    
      <?php 
	  $sql = mysql_query("select * from table_name where month = ".$month." and year = ".$y." and `release` = 1 and archive <> 1 ");
	  $count = mysql_num_rows($sql);
	  if ($count==0){
	  echo "<tr><td class=\"jtitle\">No Journal Entries Found</td></tr>";
	  }
	  while ($row = mysql_fetch_array($sql)){
		$nsql = mysql_query("select * from table_name where userid = ".$row["userid"]."");
		$n=mysql_fetch_array($nsql);
		$name = $n["fname"]." ".$n["lname"];
	  ?>
	  <tr><td align="left" ><table width="100%">
      			<tr><td valign="top" width="150"><img src = "<?php echo ($row["thumb"]==''?"mods/staff/thumbs/blank.jpg":$row["thumb"]);?>" width="150"></td>
                	<td valign="top" align="left"><p class ="jtitle"><?php echo $row["subject"];?></p><?php echo $name."<br>".$row["preview"];?>
                    							  <p style="float:right"><a href="index.php?page=mods/staff/detail&id=<?php echo $row["id"];?>"><img src="themes/BVO/view.jpg" border="0" /></a></p></Td>
                </tr>
          	  </table>
          </td>
      </tr>
      <?php 
	  }
	  
	  ?>
      </table>
    </td>
</tr>
</table>

I would love to get to where I do not use tables any more so if you see how to do this with this one and would like to make an example please do. Otherwise any help with the white space between those 2 images would be greatly appreciated.

[BLiZZaRD]

Well, since you are using tables you haven't set any cell padding or cell spacing and I am not sure what the default is, but maybe if you set the cell to 0:

<table  border="0" cellpadding="0" cellspacing="0">

[gpigate]

in the css you mean?

[BLiZZaRD]

No, the actual table. You can define your tables in the CSS, but since you haven't yet.. no real point to start for one attribute.

[gpigate]

yeah I have tried cellspacing/padding = 0 all over the place and I still get the white line.

[BLiZZaRD]

To be honest, it is probably the different tables and the placement of the items inside them. This "pixel-perfect" layout style is why tables aren't meant for layouts or designing. They are meant to hold data. Switching to a Div defined layout will probably solve your problems.

You could try a negative left margin on the jmpnthheadlink P or that table it is in. But its only a temp fix.

[gpigate]

I had tried the - left margin before and it only seemed to work in FF. I guess I will try it in div and see what I can do. no time like the present to try and learn

[BLiZZaRD]

If you want help or advice... you know where to find me

[gpigate]

ok I gave it a try, still working on it. I am sure I am doing something simple wrong but I can not get that right side image that is supposed to be behind the month and year to show up. You see anything?

new link, as I saved off a version of the file http://outdoorsindoors.net/DEV/BVO/i...h=10&year=2009

.sheaderrow{float: right; color: #ffffff; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif }
.smonthcol{float:left; background-image:url('smonthbg.jpg'); height:500px; width:200px; padding: 30px 0 0 0; margin:0 0 0 0; border:0;}
.mlink a{ color: #ffffff; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 0 0 0 20px;}
.scenter { width:550; float: left;};
.smonthhead{background-image:url('monthhead.jpg'); height:50px; width:550x; text-align:left; padding:0; border:0; }
.smonthheadlink{ color: #000000; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 5px 0 0 25px; font-weight:bold; margin:0px }


.jmonth_header{ color: #ffffff; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif }

.jmonthhead{background-image:url('monthhead.jpg'); height:50px; width:298px; text-align:left; padding:0; border:0; }
.jmonthheadlink{ color: #000000; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 5px 0 0 25px; font-weight:bold; margin:0px }
.jmiddle{ padding:25px 0 0 0; margin:0px; }
.middletable{width:550px; padding:0 0 0 0; margin: 0 0 0 0; }

<?php centeruppertheme();?>
<div class="sheaderrow"><a href="index.php?page=mods/staff/index">Journals by Staff Member</a></div>
<div class="smonthcol">
	<?php $lsql = mysql_query("SELECT DISTINCT month, year, count(id) as numr FROM table where `release` = 1 and archive <> 1 group by month, year order by year desc, month desc");
		  while ($list = mysql_fetch_array($lsql)){
		  switch ($list["month"]){
																	    case 1: $m = "January"; break;
																		case 2: $m =  "February"; break;
																		case 3: $m =  "March"; break;
																		case 4: $m =  "April"; break;
																		case 5: $m =  "May"; break;
																		case 6: $m =  "June"; break;
																		case 7: $m =  "July"; break;
																		case 8: $m =  "August"; break;
																		case 9: $m =  "September"; break;
																		case 10: $m =  "October"; break;
																		case 11: $m =  "November"; break;
																		case 12: $m =  "December"; break;
																		case 0: $m =  "Not Set"; }
		    echo "<div class=\"mlink\"><a href=\"index.php?page=mods/staff/mindex&month=".$list["month"]."&year=".$list["year"]."\">".$m." ".$list["year"]." (".$list["numr"].")</a></div>";
		  }		  
		  if (!isset($_GET["month"])){
  		    $month = date(n);
		    $y = date(Y);
		  } else {
		    $month = $_GET["month"];
			$y=$_GET["year"];
		  }
		  switch ($month){
			case 1: $m = "January"; break;
			case 2: $m =  "February"; break;
			case 3: $m =  "March"; break;
			case 4: $m =  "April"; break;
			case 5: $m =  "May"; break;
			case 6: $m =  "June"; break;
			case 7: $m =  "July"; break;
			case 8: $m =  "August"; break;
			case 9: $m =  "September"; break;
			case 10: $m =  "October"; break;
			case 11: $m =  "November"; break;
			case 12: $m =  "December"; break;
			case 0: $m =  "Not Set"; }		  
		  
	?>
</div>
<div class="scenter">
      <div class="smonthhead" ><p class="smonthheadlink"><?php echo $m." ".$y;?></p></div>
      <?php 
	  $sql = mysql_query("select * from table where month = ".$month." and year = ".$y." and `release` = 1 and archive <> 1 ");
	  $count = mysql_num_rows($sql);
	  if ($count==0){
	  echo "<p>No Journal Entries Found</p>";
	  }
	  while ($row = mysql_fetch_array($sql)){
		$nsql = mysql_query("select * from table where userid = ".$row["userid"]."");
		$n=mysql_fetch_array($nsql);
		$name = $n["fname"]." ".$n["lname"];
	  ?>
	  <div class="scentinfo">
      			<img src = "<?php echo ($row["thumb"]==''?"mods/staff/thumbs/blank.jpg":$row["thumb"]);?>" width="150">
                	<p class ="jtitle"><?php echo $row["subject"];?></p><?php echo $name."<br>".$row["preview"];?>
            		<p style="float:right"><a href="index.php?page=mods/staff/detail&id=<?php echo $row["id"];?>"><img src="themes/BVO/view.jpg" border="0" /></a></p>
  	  </div>
      <?php 
	  }
	  
	  ?>
</div>      
<?php centerlowertheme();?>

[BLiZZaRD]

I am assuming you are currently still working on it. I just looked at it and it looks perfect. The only difference than before is that the white space is gone! So.. YAY.. right?