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 (http://outdoorsindoors.net/DEV/BVO/index.php?page=mods/staff/mindex&month=10&year=2009)

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/index.php?page=mods/staff/mindex2&month=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?

[gpigate]

yep still working on it, but it looks good to me for now. more interested if you css pros can look at the style / code and see if there is a better way to do it?

[BLiZZaRD]

The only thing I really see is the lack of "short cuts" in your CSS, but that isn't wrong.

For example having: padding: 0 0 0 0; is pointless. either drop it completely (if padding is set to 0 in the body element) or just have padding: 0;

Colors that are the same in RGB such as #000000, #FFFFFF, #336699; etc... can be shortened to #000, #FFF, #369...

It also doesn't matter if your CSS file is 100kb or 100MB, so spread it out man, make it human readable, easier to get in an change one item....



.mlink a{ color: #ffffff; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 0 0 0 20px;}


becomes:



.mlink a{
color: #FFF;
font-size: 12pt;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding-bottom: 20px;
}


Much easier to read and edit.

[gpigate]

I guess that is what I get for being archaic :) I am an old school c oracle cobol etc guy. I personally like it all on one line and if I could I would have every option/setting set :)

I will come around. Thanks for taking a look

Is the div layout approach correcT?

[BLiZZaRD]

Well, if the single line works for you then stick with it. Its all about ease of use.

As far as the Divs go the only thing I could see wrong with it so far is this one P tag:



<p style="float:right">


I would have given it an ID, and set the float: right; in the CSS. But again, it's not "wrong" just a personal preference.

[gpigate]

yeah that p float was a quickie

any idea why it works in FF but not in IE? is like the drop padding isnt working in IE

http://outdoorsindoors.net/DEV/BVO/index.php?page=mods/staff/mindex

[BLiZZaRD]

Usually (not always) this is due to the different default margins and paddings the browsers give themselves to the view port. You can (again) usually circumvent this by setting the margins and paddings to 0 for all browsers at the top of the CSS, like so:



* {
margin: 0;
padding: 0;
}


Put that at the very very top of your CSS and see if that helps.

[gpigate]

didnt fix it and actually made the entire site left align in firefox.

any ideas?

[gpigate]

I think the problem is that the background image should go on the smonthhead and not the link. but if I put it there it only shows up in IE? I have tried just about everything at this point and I am to the point where I am just trying to things....... banging head




<div class="scenter">
<div class="smonthhead"><p class="smonthheadlink"><?php echo $m." ".$y;?></p></div>
<?php



.scenter { width:550; float: left;};
.smonthhead{ height:50px; width:550x; }
.staffhead{ color: #ffc20f; font-size: 14pt; font-weight:bold; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 0 0 0 20px;}
.jead{ color: #ffc20f; font-size: 14pt; font-weight:bold; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 0 0 0 20px;}
.smonthheadlink{ background-image:url('monthhead.jpg'); height:35px; width:550x;color:#990000; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 15px 0 0 25px; font-weight:bold; margin:6px 0 5px 0 }
.scentinfo{color: #000000; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; margin:0px }
.scentinfo img{float: left; padding: 0 5px 0 0}

[BLiZZaRD]

in your CSS ensure that EVERY line has a semicolon at the end. Most of yours don't.

[gpigate]

changed that.

no matter what I do though, I cant get them in the same place on IE and FF. I do really appreciate you taking the time to look at this with me.

http://outdoorsindoors.net/DEV/BVO/index.php?page=mods/staff/mindex


.sheaderrow{float: right; color: #ffffff; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif ; margin:0px;padding:0;}
.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; margin:0;}
.mlink a:hover{ color: #ffc20f; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 0 0 0 20px; margin:0;}

.scenter { float: left; width:550px; margin:0px; padding:0px;}
.smonthhead{background-image:url('monthhead.jpg'); height:50px; width:550x; }
.staffhead{ color: #ffc20f; font-size: 14pt; font-weight:bold; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 0 0 0 20px;}
.jhead{ color: #ffc20f; font-size: 14pt; font-weight:bold; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 0 0 0 20px;}
.smonthheadlink{ height:35px; width:550x;color:#990000; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; padding: 15px 0 0 25px; font-weight:bold; margin:6px 0 5px 0 ;}
.scentinfo{color: #000000; font-size: 12pt; font-family:Geneva, Arial, Helvetica, sans-serif; margin:0px; padding:0;}
.scentinfo img{float: left;padding:0;margin:0;}

.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; }


<div class="sheaderrow"><a href="index.php?page=mods/staff/mindex">Journals by Month</a></div>
<div class="smonthcol">
<div class="staffhead">ProStaff</div>

<?php $lsql = mysql_query("select * from asdfsadf where access >= 100 and userid<>1 and uname<>'admin'");
//$lsql = mysql_query("SELECT DISTINCT month, year, count(id) as numr FROMasdfasdf where `release` = 1 and archive <> 1 group by month, year order by year desc, month desc");
while ($list = mysql_fetch_array($lsql)){
echo "<div class=\"mlink\"><a href=\"index.php?page=mods/staff/index&sid=".$list["userid"]."\">".$list["fname"]." ".$list["lname"]."</a></div>";
}
?>
</div>
<div class="scenter">
<?php
if ($_GET["sid"]!= ''){
$sql = mysql_query("select * from asdfsadfwhere userid = ".$_GET["sid"]." ");
$count = mysql_num_rows($sql);
$row = mysql_fetch_array($sql);
$name = $row["fname"]." ".$row["lname"];
?>
<div class="smonthhead"><p class="smonthheadlink"><?php echo $name;?></p></div>
<?php
if ($count==0){
echo "<p>No Journal Entries Found</p>";
} else{
if ($row['profilePic'] == ''){$profimg = 'mods/staff/profile/blank.jpg';} else {$profimg=$row['profilePic'];}
?>
<div class="scentinfo">
<img src = "<?php echo $profimg;?>" width="200">
<?php echo $name."<br>".$row["city"].", ".$row["state"];?>
<p ><?php echo $row["pinfo"];?></p>
</div>
<?php
}
}else {
?>
<div class="smonthhead"><p class="smonthheadlink">Buckventures Outdoors Prostaff</p></div>
<div class="scentinfo">
<img src = "<?php echo ($row["thumb"]==''?"mods/staff/thumbs/blank.jpg":$row["thumb"]);?>" width="200">
<p >Statement to go here regarding Buckventures Outdoors Prostaff team, possibly how to apply, any other language we want to put here, etc. This could include other photos, or maybe a video or whatever we want to put here. This is a landing page. Or we could have it default to a certain staff member first such as the owner.</p>
</div>
<?php

}

?>
</div>

[gpigate]

still no luck with this one. anyone have any ideas?