Tue, 2003-11-04 18:00
Need Suggestions to Fix...a hybrid html/css liquid layout. The problem is in Mozilla and Firebird, IE shows fine, I haven't tried Opera yet. I've been trying to figure a fix for this for a week and I'm plumb stumped. I'd appreciate help 
http://www.atypicalfemale.com/skins/index2.php?newskin=2
Choose "Use This Skin' and it will load the main page.
As you can see, the two left columns are stretching out until the main content loads. I basically took everything out of the page one by one until it stopped bumping out, and the 2 of the 3 javascripts used in that yellow column appear to be the culprits.
I don't know if I can fix it with a css tweak to the classes or tables, or what. The other skin is doing it too, but since it's in a fixed table it's not jumping nearly as much. It's barely noticeable.
To help your eyes, the main code that controls this page 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Atypical Female</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.atypicalfemale.com/index.rdf" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.atypicalfemale.com/rsd.xml" />
<link href="http://www.atypicalfemale.com/skins/2/skin2.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" text="#666666" link="#AE1D1D" vlink="#AE1D1D" alink="#AE1D1D" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1%" valign="top" bgcolor="#AE1D1D" class="links1">
<table width="165" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="spacer.gif" width="1" height="220" alt=""></td>
</tr>
<tr>
<td>
<!--an include for the red column's contents-->
</td>
</tr>
</table>
</td>
<td width="1%" valign="top" bgcolor="#F3E56C" class="links2">
<table width="156" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="spacer.gif" width="1" height="420" alt=""></td>
</tr>
<tr>
<td>
<!--an include for the yellow column's contents-->
</td>
</tr>
</table>
</td>
<td width="97%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="header.gif" width="458" height="109"></td>
</tr>
<tr>
<td valign="top">
<div id="content">
<!--an include for main content entries-->
<div class="blog"> </div>
</div>
</td>
</tr>
</table>
</td>
<td width="1%" bgcolor="#000000"><img src="spacer.gif" width="50" height="1" alt=""></td>
</tr>
</table>
</body>
</html>
The javascript's are:
<!--Referrers Code--> <div class="sidetitle-column2">Referrers</div> <div class="side-column2"> <script language="Javascript" src="http://www.atypicalfemale.com/scripts/referrers/referrers.js"></script> </div> <!--Sitemeter Code--> <div class="side-column2"> <!--WEBBOT bot="HTMLMarkup" startspan ALT="Site Meter" --> <script type="text/javascript" language="JavaScript">var site="s16atypicalfemale"</script> <script type="text/javascript" language="JavaScript1.2" src="http://s16.sitemeter.com/js/counter.js?site=s16atypicalfemale"> </script> <noscript> <a href="http://s16.sitemeter.com/stats.asp?site=s16atypicalfemale" target="_top"> <img src="http://s16.sitemeter.com/meter.asp?site=s16atypicalfemale" alt="Site Meter" border=0></a> </noscript> <!-- Copyright (c)2002 Site Meter --> <!--WEBBOT bot="HTMLMarkup" Endspan --> </div>
The (edited for relevance) css file is:
body{
margin:0px 0px 0px 0px;
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#000000;
}
.blog{
padding:5px;
background:#FFFFFF;
width:100%;
}
.blogbody{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:small;
font-weight:normal;
color:#5C5C5C;
font-size:small;
font-weight:normal;
padding:5px 15px 5px;
margin-bottom:10px;
margin-top:0px;
background-color:#FFFFFF;
line-height:120%;
}
.blogrollmain{
font-family:Arial,Helvetica,sans-serif;
color:#000000;
font-size:11px;
font-weight:normal;
margin-top:0px;
margin-bottom:5px;
border:0px solid #FFFFFF;
padding:5px;
}
.comments-body{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#000000;
font-size:11px;
font-weight:normal;
background:#EDEDED;
line-height:14px;
padding:10px;
margin:10px;
border:1px solid #911A17;
}
.comments-head{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:14px;
color:#AD1C18;
font-weight:bold;
font-variant:normal;
text-transform:capitalize;
padding:2px 15px 2px;
border-bottom:2px solid #F7E76B;
}
.comments-post{
font-family:Arial,Helvetica,sans-serif;
color:#000000;
font-size:10px;
font-weight:normal;
background:#FFFFFF;
padding:2px;
text-align:left;
}
.content{
color:#41413F;
margin:10px;
padding:5px;
}
.date{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:14px;
color:#AE1D1D;
font-weight:bold;
font-variant:normal;
border-bottom:2px solid #F7E76B;
}
.expandable-comments-body{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#000000;
font-size:11px;
font-weight:normal;
background:#EDEDED;
line-height:14px;
padding:10px;
border:1px solid #AD1C18;
margin-top:10px;
margin-bottom:10px;
text-align:left;
}
.expandable-comments-post{
font-family:Arial,Helvetica,sans-serif;
color:#41413F;
font-size:10px;
font-weight:normal;
background:#FFFFFF;
}
.links1 {
background-image: url("http://www.atypicalfemale.com/skins/2/bkg_girl_red.gif");
background-position: left top;
background-attachment: scroll;
background-repeat: no-repeat;
}
.links2 {
background-image: url("http://www.atypicalfemale.com/skins/2/bkg_girl_yel.gif");
background-position: left top;
background-attachment: scroll;
background-repeat: no-repeat;
}
.posted{
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
color:#000000;
margin-bottom:25px;
text-align:right;
}
.posted-column1{
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
color:#CCCCCC;
margin-bottom:25px;
text-align:right;
}
.powered{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#000000;
font-size:11px;
font-weight:bold;
text-align:center;
background:#FFFFFF;
}
.side{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#FFFFFF;
font-size:10px;
font-weight:normal;
margin-top:0px;
margin-bottom:5px;
border:0px solid #FFFFFF;
padding:5px;
}
.side a,
.side a:link,
.side a:visited,
.side a:active{
font-weight:normal;
text-decoration:none;
color:#F7E76B;
}
.side b{
color:#FFFFFF;
}
.side-column2{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#41413F;
font-size:10px;
font-weight:normal;
margin-top:0px;
margin-bottom:5px;
border:0px solid #FFFFFF;
padding:5px;
}
.sidetitle{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#F7E76B;
font-size:12px;
font-weight:bold;
line-height:14px;
padding-top:15px;
padding-left:5px;
letter-spacing:0.1em;
text-align:left;
text-transform:capitalize;
}
.sidetitle-column2{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#000000;
font-size:12px;
font-weight:bold;
line-height:14px;
padding-top:15px;
padding-left:5px;
letter-spacing:0.1em;
text-align:left;
text-transform:capitalize;
}
.signature{
font-size:10px;
}
.syndicate{
font-family:Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:14px;
padding:2px;
margin-top:10px;
text-align:center;
background:#EDEDED;
color:#911A17;
}
.title{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:#000000;
}
form{
font-family:Arial,Helvetica,sans-serif;
color:#41413F;
font-size:11px;
}
select{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#000000;
background-color:#EDEDED;
font-size:11px;
border:1px solid #AD1C18;
}
textarea,input,option{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#000000;
background-color:#FFFFFF;
font-size:11px;
border:1px solid #AD1C18;
}
Any ideas on how I can fix this?
Tue, 2003-11-04 19:18
#1
Need Suggestions to Fix...
Hi Gina,
The problem may be the table needing to load all of it's content before calculating the width and heights of the columns.
Try table {table-layout: fixed;}
Otherwise you could try removing the table altogether 
Hope that helps
Tue, 2003-11-04 20:04
#2
Need Suggestions to Fix...
Hi Tony,
Thanks for replying, but wouldn't that just render my layout fixed instead of liquid? I needed to keep this layout liquid.
I made a copy of the troublesome layout with everything the same except the javascript, and it does the bumping thing once for me then it doesn't do it anymore.
Go to http://www.atypicalfemale.com/skins/index.php and choose skin 3. That's the one that takes out both scripts. You can switch between skin 2 (has the scripts) and skin 3(removes the scripts) to see the difference by clicking the link under the 'Skin the Site" area in the sidebars.
Tue, 2003-11-04 20:07
#3
Need Suggestions to Fix...
Oh, and about removing the table altogether--I'm an idiot with CSS positioning. I tried, but I ended up taking two weeks and still having bugs in one or the other browser I gave up and enclosed the divs in tables. ](*,)
If you want to take a stab at it though, be my guest!