boardom

[richardx]

Hi,

I am trying to adapt my b2 weblog to fit in with the template for the rest of my website however I have some teething issues:

Please visit http://weblog.richardlennox.net/index.php with Netscape, IE and Opera. What you see is the variation of what I would like. The renderingin netscape is the closest that I can get however I would like to lose the horizontal scroll and have each posting spread the width of the column in the table. As you can see each of the rendering has various problems. Can anyone help me with it. As my personal website is undergoing a full rework this is the only page with the template shown online.

Cheers Richard

[Sigg3]

Richie (I just had to:), the issue is in the template's css files most probably. But I'm not sure. Can you post the css code and the php code here, pls?
_________________
Sigg3.net - You know you're worth it! | b2 Cafelog Resource Center | Fight my BattleImp!

[richardx]

Whats in a name??

css code:

/*Layout Design*/

body {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: normal;
color: #666666;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #00285E;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #669999;
border-right-color: #669999;
border-bottom-color: #669999;
border-left-color: #669999;
padding: 3px 3px 3px 4px;
vertical-align: bottom;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}

h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 800;
color: #00285E;
text-align: right;
margin-top: 5px;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 0px;
border: thin none #339966;
}

h1, h4, h5, .storyTitle, .storyCategory, .storyAuthor {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 800;
color: #00285E;
margin-top: 5px;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 0px;
border: thin none #339966;
}
h4, h5, .storyTitle, .storyCategory, .storyAuthor {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bold;
color: #666666;

}
.storyCategory, .storyAuthor {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bold;
color: #666666;
}
h5, .storyAuthor {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bold;
color: #666666;
}
p, .storyContent {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: normal;
color: #666666;
}

.storyContent {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: normal;
color: #666666;
width: 100%;
}


a {
color:#000033;
}

.menuBtm {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: normal;
color: #666699;
}
.menuBtm a,.menuBtm a:link, .menuBtm a:visited, .menuBtm a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: normal;
color: #666699;
text-decoration: underline;
}


#header {
margin:20px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:43px; /* 14px + 17px + 2px = 33px */
/* border-style:solid;
border-color:black;
border-width:1px 0px;
*/ /* top and bottom borders: 1px; left and right borders: 0px */
border-bottom:1px solid #999;
border-right:1px solid #999;
line-height:11px;
background-color:#eee;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:43px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#header {height:43px;}


#header a {
font-size:18px;
font-weight:800;
}

#content {
margin:0px 210px 50px 10px;
padding:10px;
}

#contentcomments {
margin:0px 0px 50px 10px;
padding:10px;
}

#menu {
position:absolute;
top:100px;
right:20px;
width:172px;
padding:10px;
background-color:#eee;
border-bottom:1px solid #999;
border-right:1px solid #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#menu {width:150px;}

#menu a {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}

#menu h4 {
margin: 12px 0px 4px 0px;
}

#chaff {
text-align: right;
}
#chaff a {
color: #fff;
font-size:2px;
}
#chaff a:link { color: #fff; }
#chaff a:visited { color: #fff; }
#chaff a:hover { background-color:#fff; }

.centerP {
text-align: center;
}

#contentcomments input, #content input, #menu input {
margin: 1px;
padding: 1px 1px 4px 1px;
border: 1px solid #ccc;
font:11px/14px verdana, arial, helvetica, sans-serif;
}
#contentcomments textarea, #content textarea, #menu textarea {
margin: 1px;
padding: 1px;
border: 1px solid #ccc;
font:11px/14px verdana, arial, helvetica, sans-serif;
}
.commentfield {
margin-bottom: 4px;
}
#scroll
{
height:100%;
overflow:auto;
}
.subHead {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bolder;
color: #00285E;
}
.formEntry {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: normal;
color: #000000;
}


php code

<?php /* Don't remove this line, it calls the b2 function files ! */ $blog=1; include ("blog.header.php"); ?>
<!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>Richard Lennox: <?php bloginfo('name') ?><?php single_post_title(' :: ') ?><?php single_cat_title(' :: ') ?><?php single_month_title(' :: ') ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="reply-to" content="<?php bloginfo('admin_email'); ?>" />
<meta http-equiv="imagetoolbar" content="no" />
<meta content="TRUE" name="MSSmartTagsPreventParsing" />

<style type="text/css" media="screen">
@import url( ../layout2b.css );
</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="alternate" type="application/rdf+xml" title="RDF" href="<?php bloginfo('rdf_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php comments_popup_script() ?>

<meta name="keywords" content="Richard, Lennox, Richard Lennox, richardlennox, richard, lennox, Richard David Lennox, Carlisle, Heriot-Watt University Edinburgh, Computer Science,"><link href="../lennox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/global.js"></script>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preload../images() { //v3.0
var d=document; if(d.../images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preload../images.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preload../images('file:///C|/Documents%20and%20Settings/Richard%20Lennox/My%20Documents/New%20Site/../images/btnWhatWeDo_over.gif','file:///C|/Documents%20and%20Settings/Richard%20Lennox/My%20Documents/New%20Site/../images/btnProfiles_over.gif','file:///C|/Documents%20and%20Settings/Richard%20Lennox/My%20Documents/New%20Site/../images/btnNews_over.gif','file:///C|/Documents%20and%20Settings/Richard%20Lennox/My%20Documents/New%20Site/../images/btnContactUs_over.gif')">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><table width="775" border="0" cellpadding="0" cellspacing="0" class="siteBorder">
<tr>
<td><table width="775" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="141" colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="775" height="141">
<param name="movie" value="../images/lennox.swf">
<param name="quality" value="high">
<embed src="../images/lennox.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="775" height="141"></embed>
</object>
</td>
</tr>
<tr>
<td colspan="2"><img src="../images/topBorder.gif" width=775 height=10></td>
</tr>
<tr>
<td width="187" height="264" valign="top" background="../images/navBkg.gif"><table width="187" height="234" cellpadding="0" cellspacing="0" background="../images/navBkg.gif">
<tr>
<td height="84" valign="top"> <img src="../images/navTop.gif" width=187 height=84></td>
</tr>
<tr>
<td height="30"><a href="../education.htm" onMouseOver="MM_swapImage('imgNav2','','../images/btnEducation_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/btnEducation.gif" alt="Education" name="imgNav2" width=187 height=30 border="0" id="imgNav2"></a></td>
</tr>
<tr>
<td height="30"><a href="../work.htm" onMouseOver="MM_swapImage('imgNav3','','../images/btnWork_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/btnWork.gif" alt="Work History" name="imgNav3" width=187 height=30 border="0" id="imgNav3"></a></td>
</tr>
<tr>
<td height="30"><a href="../personal.htm" onMouseOver="MM_swapImage('imgNav4','','../images/btnPersonal_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/btnPersonal.gif" alt="Personal Statement" name="imgNav4" width=187 height=30 border="0" id="imgNav4"></a></td>
</tr>
<tr>
<td height="30"><a href="../gallery.htm" onMouseOver="MM_swapImage('imgNav6','','../images/btnGallery_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/btnGallery.gif" alt="Gallery" name="imgNav6" width=187 height=30 border="0" id="imgNav6"></a></td>
</tr>
<tr>
<td height="30"><a href="../index.htm" onMouseOver="MM_swapImage('imgNav5','','../images/btnWeblog_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/btnWeblog.gif" alt="Weblog" name="imgNav5" width=187 height=30 border="0" id="imgNav5"></a></td>
</tr>
<tr>
<td height="30"><a href="../contact.htm" onMouseOver="MM_swapImage('imgNav7','','../images/btnContact_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/btnContact.gif" alt="contact Richard Lennox" name="imgNav7" width=187 height=30 border="0" id="imgNav7"></a></td>
</tr>
</table></td>
<td rowspan="3" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25" align="left"><img src="../images/spacer.gif" width="25" height="8"></td>
<td colspan="2" align="left"><!-- TemplateBeginEditable name="editHeading" -->
<h6>Weblog</h6>
<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td><img src="../../images/spacer.gif" width="1" height="1"></td>
<td height="430" align="left" valign="top" class="bodyNorm"><!-- TemplateBeginEditable name="editMain" -->


<!-- COMMENT TABLE CONTENT HERE -->

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!--DWLayoutTable-->
<tr valign="top">
<td width="307" height="430" valign="top"> <div id="scroll">
<div id="content">
<!-- // b2 loop start -->
<?php while($row = mysql_fetch_object($result)) { start_b2(); ?>
<?php the_date("","<h2>","</h2>"); ?><br />
<?php permalink_anchor(); ?>
<div class="storyTitle">
<?php the_title(); ?>
<a href="?cat=<?php the_category_ID() ?>" title="category: <?php the_category() ?>"><span class="storyCategory">[
<?php the_category() ?>
]</span></a>-<span class="storyAuthor">
<?php the_author() ?>
-
<?php the_author_email() ?>
</span> @ <a href="<?php permalink_link() ?>">
<?php the_time() ?>
</a></div>
<div class="storyContent">
<?php the_content(); ?>
<div class="rightFlush">
<?php link_pages("<br />Pages: ","<br />","number") ?>
<?php comments_popup_link("Comments (0)", "Comments (1)", "Comments (%)") ?>
<?php trackback_popup_link("TrackBack (0)", "TrackBack (1)", "TrackBack (%)") ?>
<?php pingback_popup_link("PingBack (0)", "PingBack (1)", "PingBack (%)") ?>
<?php trackback_rdf() ?>
<br>
<!-- this includes the comments and a form to add a new comment -->
<?php include ("b2comments.php"); ?>
<!-- this includes the trackbacks -->
<?php include ("b2trackback.php"); ?>
<!-- this includes the pingbacks -->
<?php include ("b2pingbacks.php"); ?>
</div>
</div>
<!-- // this is just the end of the motor - don't touch that line either -->
<?php } ?>
</div>
</div></td>
<td width="129" valign="top"> <h2>Categories:</h2>
<?php list_cats(0, 'All', 'name'); ?>
<br /> <br /> <h2>Search:</h2>
<form name="searchform" method="get" action="<?php echo $PHP_SELF; /*$siteurl."/".$blogfilename*/ ?>">
<p>
<input type="text" name="s" size="15" />
<br />
<input type="submit" name="submit" value="search" />
</p>
</form>
<h2>Archives:</h2>
<?php include("b2archives.php"); ?>
<br /> <h2>Login/Register:</h2>
<a href="rllogin.php">login</a><br /> <a href="rlregister.php">register</a><br />
<br /> <a href="b2rss.php"><img src="b2-img/xml.gif" alt="view this weblog as RSS !" width="36" height="14" border="0" /></a><br />
<a href="http://validator.w3.org/check/referer" title="this page validates as XHTML 1.0 Transitional"><img src="http://www.w3.org/Icons/valid-xhtml10.gif" alt="Valid XHTML 1.0!" height="31" width="88" border="0" /></a><br />
<br />
[ powered by <a href="http://www.cafelog.com">b2</a>
] </td>
</tr>
</table>

<!-- COMMENT TABLE CONTENT ENDS -->


<!-- TemplateEndEditable --></td>
<td width="30" align="right" valign="bottom" class="bodyNorm"><img src="../images/rightBtm.gif" width="30" height="73"></td>
</tr>
<tr align="right">
<td colspan="3"><img src="../images/btmBorder.gif" width="588" height="33"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="187" height="100%" align="left" valign="top" background="../images/navBkg.gif"><img src="../images/spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td height="184" valign="bottom" background="../images/navBkg.gif"><img src="../images/navBtm.gif" alt="" width=187 height=184 border="0" usemap="#mapContact"></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://www.richardlennox.net" target="_blank"><img src="../images/footerLeft.gif" alt="Designed by Richard Lennox" width="301" height="47" border="0"></a></td>
<td><img src="../images/footerRight.gif" width="474" height="47"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" align="center" valign="middle" class="menuBtm"><a href="../Templates/index.htm">Home</a> | <a href="../Templates/education.htm">Education
</a> | <a href="../Templates/work.htm">Work History</a> | <a href="../Templates/statement.htm">Personal
Statement</a> | <a href="../Templates/gallery.htm">Gallery</a> | <a href="../Templates/weblog.htm">Weblog</a> | <a href="../Templates/contact.htm">Contact</a></td>
</tr>
</table>
<map name="mapContact">
<area shape="rect" coords="25,23,170,40" href="mailto:[email protected]">
</map>
</body>
</html>

[richardx]

the problem does lie in the css at the

#content
where a margin is set at 210px!!

[Sigg3]

You've fixed it?
_________________
Sigg3.net - You know you're worth it! | b2 Cafelog Resource Center | Fight my BattleImp!

[richardx]

yeah went through every line in the css and php!! It is a small thing but margin seems to be set to enable a menu to be placed to the right of the posts on the main menu!! In trying to completely change the layout from the one provided by b2 this margin must be altered to somethign drastically smaller!!

[Sigg3]

Yeah, the b2 css is obsolete if you ain't going for the default layout.

Great!
_________________
Sigg3.net - You know you're worth it! | b2 Cafelog Resource Center | Fight my BattleImp!