3 replies [Last post]
Gina
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-5
Joined: 2003-11-04
Posts: 3
Points: 0

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 Smile

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?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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 Cool

Hope that helps

Gina
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-5
Joined: 2003-11-04
Posts: 3
Points: 0

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.

Gina
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-5
Joined: 2003-11-04
Posts: 3
Points: 0

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