SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: Footer problems

  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer problems

    Hi!

    I'm relaunching a site soon, but I'm having problems with a footer. I use a 3 column layout using CSS, plus a header and a footer. The problem is that the footer doesn't stay at the bottom, when there is little content on a page, and it totally disregards the the two side columns.

    What I need to figure out:

    How do I get the footer to stay below the content in the two side columns?

    How do I get the footer to always stay at the bottom of the page if the content is smaller than the current "view".

    I've read a lot on this forum and a lot of the 3-column guides around the net, but I've not cracked it yet.. Any help appreciated!

    The site:

    http://www.templeoftech.com/cms/viewnews

    Vidar

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    How do I get the footer to stay below the content in the two side columns?
    You will have to change the way that you place the left and right columns. As you have absolutely placed the columns then they are removed from the flow of the document.

    This means that they can't be used as a point of reference for anything else as other content on the page behaves as if they don't exist.

    You will need to float the columns left and right but this also means that they will need to come first in the html.

    Once you have achieved that then the 100% height can be addressed although the solution is a little convoluted.

    If you refer to my thread at the top of the page (3 col layout) there is an explanation and example of how to achieve 100% height.

    Basically you can only specify 100%. Yopu can't have a container of xx pixels and then another container to fill up the 100%. The container of xx pixels needs to be inside the 100% height container.

    The footer can be placed at the bottom of the 100% high container but it needs to be absolutely placed so therefore you have to make sure content doesn't overwrite it by using a clearing footer that has nothing in it but height to hold the content back and away from the footer.

    There is a fuller explanation on the thread that I mentioned.

    If you're willing to float your columns left and right then let me know and I will help you with the code for 100% height. (Some people however like to have their content first for search engines etc and this is not possible if you float the columns as the order cannot be changed).

    Paul

  3. #3
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,
    You will need to float the columns left and right but this also means that they will need to come first in the html.

    If you're willing to float your columns left and right then let me know and I will help you with the code for 100% height. (Some people however like to have their content first for search engines etc and this is not possible if you float the columns as the order cannot be changed).

    Paul
    I don't care if I have to have the left and right columns first in the html.. But do you mean before the top div as well? I just want it to work, but I don't know where to start..


    Vidar

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    But do you mean before the top div as well? I just want it to work, but I don't know where to start.
    No the floats just have to come before the content, then the content will wrap in the middle.

    If you want I'll have a look at it this afternoon and give you some pointers to get you going. The floats are easy and can be made to push the footer down so it doesn't overlap. However the 100% height is a little bit tricky although it's possible.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    No the floats just have to come before the content, then the content will wrap in the middle.

    If you want I'll have a look at it this afternoon and give you some pointers to get you going. The floats are easy and can be made to push the footer down so it doesn't overlap. However the 100% height is a little bit tricky although it's possible.

    Paul
    It would be great if you could give me some pointers.. I'm stuck.. :-(

    Thanks!

    Vidar

  6. #6
    SitePoint Zealot willoworks's Avatar
    Join Date
    May 2003
    Location
    Trappe, MD
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vidar,
    go to http://positioniseverything.net/ and study the sample layouts offered there. There are lots of sites offering css for layouts. Compare the ones there with what you have and you can see where the problem is.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    There are lots of sites offering css for layouts
    Very few of them offer 100% height width footer at the bottom of the window or at the bottom of the document if longer (unfortunately ).
    you can see where the problem is.
    I have identified and explained the problem correctly but thanks for your help anyway

    It would be great if you could give me some pointers.. I'm stuck.. :-(
    Here's an initial layout that should get you going although it will probably need tweaking as I've only done this quicklysorry for the long code everybody)
    Code:
    <!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>Temple Of Technology</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html, body{
     height: 100%;
    }
    #contents {
     min-height:100%;
     height:100%;
     margin-bottom:-73px;
    }
    html>#contents {height:auto}
    .bgfill {
     background-image: none;
     background-repeat: repeat-x;
     background-color: #000000;
    }
    h4 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #FFFFFF;
     margin: 2px;
     padding: 2px;
    
    }
    .articleheading{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: Gray;
     margin: 2px;
     padding: 2px;
    }
    .leftdottedcellborder{
      border-left: 1px solid Gray;
      vertical-align: top;
    }
     
    h3 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     line-height: normal;
     font-weight: bold;
     font-variant: small-caps;
     margin: 1px;
     padding-top: 2px;
     padding-right: 2px;
     padding-bottom: 2px;
     padding-left: 5px;
    }
    p {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 21px;
     padding: 1px 3px 1px 5px;
     margin: 1px 3px 1px 5px;
    }
    .celldotted {
     list-style-type: none;
     border-top: 1px dotted #333333;
     border-right: 0px dotted #333333;
     border-bottom: 1px dotted #333333;
     border-left: 1px dotted #333333;
    
    }
    .menu1 {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 27px;
     font-variant: small-caps;
     margin: 2px 2px 2px 3px;
     padding: 3px 3px 3px 7px;
    }
    .heading {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 36px;
     font-style: normal;
     font-weight: bold;
     height: auto;
     width: auto;
     white-space: pre;
     display: none;
     margin: 10px;
     padding: 10px;
     color: #CCCCCC;
    
    }
    body{
    	padding : 0;
    	margin : 0;
    	background-image : url(images/bg.gif);
    	background-repeat : repeat-x;
    }
    #content{
       margin-top:240px;
       margin-left : 165px;
       margin-right : 160px;
    }
    #content h1{
    	  font-family : "Trebuchet MS", Georgia, Times, serif;
    	  font-size : 120%;
    	  font-weight : normal;
    	  color : #000;
    }
    #content h2{
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 100%;
     font-weight: bold;
     color: #000000;
    }
    #content p{
     font-family: arial, Helvetica, sans-serif;
     font-size : 80%;
     font-weight : normal;
     color : Black;
     background-color : transparent;
     line-height : 100%;
    }
    #content a:visited{
     color : Maroon;
    }
    #content a:hover{
    background-color: Silver;
     color : Maroon;
    }
    #content a:link{
     color : #47547D;
    }
    #logo{
     position : absolute;
     top : 16px;
     left : 0px;
     width: 100%;
     z-index: 0;
     background: #718BBC;
     border-bottom: 1px solid Black;
    }
    #script{
    	position : absolute;
    	top : 12px;
    	right : 0;
    	text-align : right; /*Mild hack for Netscape 4*/
    }
    #menu{
     float:left;
     margin-top : 200px;
     width : 140px;
     background: white;
    }
    #menu p{
     font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size : 12px;
     font-weight : normal;
     color : #000;
     background-color : transparent;
     line-height : 140%;
      border-bottom: 1px dotted gray;
    }
    #menu a:link{
     color : #707069;
     font-style: normal;
     font-weight: bold;
     font-family: arial, Helvetica, sans-serif;
    }
    #menu a:hover{
     color : Blue;
     font-style: normal;
     font-weight: bolder;
    }
    #menu a:visited{
     color : #707069;
     font-style: normal;
     font-weight: bold;
     font-family: arial, Helvetica, sans-serif;
    }
    #leftcontent{
     float:right;
     margin-top: 200px;
     width: 155px;
    }
    #leftcontent p{
       font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size: 10px;
       line-height: 15px;
       padding-top: none;
    	margin-top: none;
     padding-bottom: 3px;
    }
    #leftcontent h5{
       font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size: 12px;
       font-weight: bold;
       background: #A9A9A9;
       color: white;
       padding-left: 6px;
       padding-top: 5px;
       padding-bottom: 4px;
       margin-bottom: 3px;
       margin: 0px;
     
    }
    #leftcontent a{
      color: #474747;
    }
    #test p {
      font-family: "Courier New", Courier, monospace;
      font-size: 18px;
    }
    .headingbackground {
     background-color: #000066;
    }
    #bar{
     position: absolute;
     top: 137px;
     left:0;
     width: 100%;
     background: #A9A9A9;
     border-top: 1px solid Black;
     border-bottom: 1px solid #000;
    }
    #topbar{
     position: absolute;
     top: 0px;
     left:0px;
     width: 100%;
     height: 15px;
     z-index: 1;
     background: #A9A9A9;
     border-top: 1px solid Black;
     border-bottom: 1px solid #000;
    }
    #bar p{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bolder;
     color: White;
    }
    #bar a:link{ 
     color: White;
    }
    #bar a:visited{ 
     color: White;
    }
    #bar a:hover{ 
     color: blue;
    }
    #footer {
    width:100%;
    clear:both;
    height:70px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: Silver;
    text-align:center;
    position:relative;
    }
    * html #footer {/*only ie gets this style*/
    \height:73px;/* for ie5 */
    he\ight:71px;/* for ie6 */
    }
    #footer p{
      font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size: 9px;
    }
    #logoad{
     position : absolute;
     top: 40px;
     left: 480px;
    }
    #printandemail{
     position :  absolute;
     top: 250px;
    	right: 160px;
     width: 170px;
    }
    #banner{
     position :  absolute;
     top: 170px;
    	left: 165px;
     width: 465px;
    }
    #news{
    }
    #news h2{
       font-family : "Trebuchet MS", Georgia, Times, serif;
    	  font-size : 120%;
    	  font-weight : bold;
    	  color : #000;
       padding: 0px;
       margin-bottom: 0px;
       margin-top: 10px;
       margin-left: 10px;
       margin-right: 10px;
    }
    #news p{
     font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size : 12px;
     font-weight : normal;
     color : #000;
     padding: 0px;
     margin-bottom: 0px;
     margin-left: 10px;
     margin-right: 10px;
     line-height: 135%;
    }
     p.details{
     font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size : 9px;
     font-weight : bold;
     color : #757A75;
     padding: 0px;
     margin-bottom: 0px;
     margin-top: 0px;
     margin-left: 10px;
     margin-right: 10px;
    }
    #news a:link{
    color: #7575AD;
    }
    #newarticles{
     background: white;
    }
    #newarticles p{
     font-size: 9px;
     font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
     line-height: normal;
     
    }
    #newarticles h3{
     font-size: 12px;
     font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
     line-height: normal;
     font-variant: small-caps;
    }
    .articledescription{
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 10px;
     line-height: 13px;
    }
    #article{
       padding-top : 260px;
       padding-bottom : 30px;
       padding-left : 165px;
       padding-right : 160px;
    }
    #article  p{
     font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size : 12px;
     font-weight : normal;
     color : #000;
     padding: 0px;
     margin-bottom: 0px;
     margin-top: 1px;
     margin-left: 10px;
     margin-right: 10px;
     line-height: 135%;
    }
    #article h2{
    	  font-family : "Trebuchet MS", Georgia, Times, serif;
    	  font-size : 120%;
    	  font-weight : bold;
    	  color : #000;
       padding: 0px;
       margin-bottom:0px;
       margin-top: 10px;
       margin-left: 10px;
       margin-right: 10px;
    }
    div#news>p{margin:0}
    #clearfooter {height:73px;width:100%;clear:both}/* to clear footer */
    * html #content {height:1%}/* combat ie's 3pixel jog */
    </style>
    </head>
    <body>
    <div id="contents"> 
      <div id="topbar"> &nbsp;</div>
      <div id="logo"> <img src="/resources/themes/default/images/tot5.gif;jsessionid=aNeNiBeP-zX5" width="400" height="120">&nbsp;&nbsp;&nbsp;&nbsp; 
    	<div id="logoad"><img src="/resources/themes/default/images/ad234x60.gif;jsessionid=aNeNiBeP-zX5"></div>
      </div>
      <div id="bar"> 
    	<table width="100%" border="0" cellpadding="0" cellspacing="0">
    	  <tr> 
    		<td align="center"><p><img src="/resources/themes/default/images/play.gif;jsessionid=aNeNiBeP-zX5" width="10" height="10">&nbsp;&nbsp;<a href="/cms/viewnews;jsessionid=aNeNiBeP-zX5">Home</a></p></td>
    		<td align="center"><p><img src="/resources/themes/default/images/play.gif;jsessionid=aNeNiBeP-zX5" width="10" height="10"> 
    			&nbsp;&nbsp;<a href="/cms/viewpage;jsessionid=aNeNiBeP-zX5?cpid=4">About 
    			Us</a></p></td>
    		<td align="center"><p><img src="/resources/themes/default/images/play.gif;jsessionid=aNeNiBeP-zX5" width="10" height="10"> 
    			&nbsp;&nbsp;<a href="/cms/viewpage;jsessionid=aNeNiBeP-zX5?cpid=1">Advertising</a></p></td>
    		<td align="center"><p><img src="/resources/themes/default/images/play.gif;jsessionid=aNeNiBeP-zX5" width="10" height="10"> 
    			&nbsp;&nbsp;<a href="/cms/viewpage;jsessionid=aNeNiBeP-zX5?cpid=2">Contact 
    			Us</a></p></td>
    		<td align="center"><p><img src="/resources/themes/default/images/play.gif;jsessionid=aNeNiBeP-zX5" width="10" height="10"> 
    			&nbsp;&nbsp;<a href="/cms/viewpage;jsessionid=aNeNiBeP-zX5?cpid=8">Review 
    			policy</a></p></td>
    	</table>
      </div>
      <div id="banner"> 
    	<div align="center"><img src="/resources/themes/default/images/ad468x60.gif;jsessionid=aNeNiBeP-zX5"></div>
      </div>
      <div id="menu"> 
    	<h3>Site Content</h3>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" border="0" align="middle">&nbsp;&nbsp;<a href="viewnews">News</a><br/>
    	</p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" border="0" align="middle">&nbsp;&nbsp;<a href="/cms/viewarticles;jsessionid=aNeNiBeP-zX5?at=11">Analysis</a><br/>
    	</p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" border="0" align="middle">&nbsp;&nbsp;<a href="/cms/viewarticles;jsessionid=aNeNiBeP-zX5?at=10">Guide</a><br/>
    	</p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" border="0" align="middle">&nbsp;&nbsp;<a href="/cms/viewarticles;jsessionid=aNeNiBeP-zX5?at=9">Editorial</a><br/>
    	</p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" border="0" align="middle">&nbsp;&nbsp;<a href="/cms/viewarticles;jsessionid=aNeNiBeP-zX5?at=6">Previews</a><br/>
    	</p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" border="0" align="middle">&nbsp;&nbsp;<a href="/cms/viewarticles;jsessionid=aNeNiBeP-zX5?at=5">Tutorials</a><br/>
    	</p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" border="0" align="middle">&nbsp;&nbsp;<a href="/cms/viewarticles;jsessionid=aNeNiBeP-zX5?at=4">Interviews</a><br/>
    	</p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" border="0" align="middle">&nbsp;&nbsp;<a href="/cms/viewarticles;jsessionid=aNeNiBeP-zX5?at=1">Reviews</a><br/>
    	</p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" align="middle">&nbsp;&nbsp;<a href="viewnews">Links</a></p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" align="middle">&nbsp;&nbsp;<a href="">Press 
    	  Releases</a></p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" align="middle">&nbsp;&nbsp;<a href="">Forum</a></p>
    	<p><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" width="18" height="18" align="middle">&nbsp;&nbsp;<a href="">Polls</a></p>
    	<div align="center"><br>
    	  <br>
    	  <img src="/resources/themes/default/images/ad125x125.gif;jsessionid=aNeNiBeP-zX5"> 
    	  <br>
    	  <br>
    	  <img src="/resources/themes/default/images/ad125x125.gif;jsessionid=aNeNiBeP-zX5"> 
    	</div>
      </div>
      <div id="leftcontent"> 
    	<h5>Latest press releases</h5>
    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
    	  <tr> 
    		<td valign="top"><img src="/resources/themes/default/images/blue_arrow.gif;jsessionid=aNeNiBeP-zX5" border="0" align="middle"></td>
    		<td><p><a href="/cms/viewpressrelease;jsessionid=aNeNiBeP-zX5?prid=52">AMD 
    			INTRODUCES HIGHEST PERFORMANCE AMD ATHLON(tm) XP PROCESSOR 2200+ BASED 
    			ON 0.13 MICRON TECHNOLOGY</a></td>
    	  </tr>
    	  <tr> 
    		<td valign="top"><img src="/resources/themes/default/images/blue_arrow.gif;jsessionid=aNeNiBeP-zX5" border="0" align="middle"></td>
    		<td><p><a href="/cms/viewpressrelease;jsessionid=aNeNiBeP-zX5?prid=51">SiS 
    			Takes COMPUTEX Taipei by Storm with New Generation Graphics Chip</a></td>
    	  </tr>
    	  <tr> 
    		<td valign="top"><img src="/resources/themes/default/images/blue_arrow.gif;jsessionid=aNeNiBeP-zX5" border="0" align="middle"></td>
    		<td><p><a href="/cms/viewpressrelease;jsessionid=aNeNiBeP-zX5?prid=50">3Dlabs 
    			Introduces Breakthrough Visual Processing Architecture</a></td>
    	  </tr>
    	  <tr> 
    		<td valign="top"><img src="/resources/themes/default/images/blue_arrow.gif;jsessionid=aNeNiBeP-zX5" border="0" align="middle"></td>
    		<td><p><a href="/cms/viewpressrelease;jsessionid=aNeNiBeP-zX5?prid=49">AMD 
    			Reports First Quarter Results</a></td>
    	  </tr>
    	  <tr> 
    		<td valign="top"><img src="/resources/themes/default/images/blue_arrow.gif;jsessionid=aNeNiBeP-zX5" border="0" align="middle"></td>
    		<td><p><a href="/cms/viewpressrelease;jsessionid=aNeNiBeP-zX5?prid=48">CRUCIAL 
    			AND MICRON PROVIDE PC2700 DDR SDRAM TO THE UPGRADE MARKET</a></td>
    	  </tr>
    	</table>
    	<h5>Affiliate sites</h5>
    	<table width="100%%" border="0" cellspacing="0" cellpadding="0">
    	  <tr> 
    		<td><img src="/resources/themes/default/images/blue_arrow.gif;jsessionid=aNeNiBeP-zX5" border="0" align="middle"></td>
    		<td><p><a href="/viewnews">MBHelp.com</a></p></td>
    	  </tr>
    	  <tr> 
    		<td><img src="/resources/themes/default/images/blue_arrow.gif;jsessionid=aNeNiBeP-zX5" border="0" align="middle"></td>
    		<td><p><a href="http://www.combatjets.com">Combatjets</a></p></td>
    	  </tr>
    	  <tr> 
    		<td><img src="/resources/themes/default/images/blue_arrow.gif;jsessionid=aNeNiBeP-zX5" border="0" align="middle"></td>
    		<td><p><a href="http://www.kingsoftech.com">Kings Of Technology</a></p></td>
    	  </tr>
    	</table>
    	<p>&nbsp;</p>
    	<h5>Users online</h5>
    	<p> </p>
      </div>
      <div id="content"> 
    	<div id="newarticles"> 
    	  <table width="95%" border="0" cellspacing="0" cellpadding="0">
    		<tr> 
    		  <h3>Latest articles:</h3>
    		  <td class="leftdottedcellborder" width="33%"><h4 align="left" class="articleheading"><a href="  /cms/viewarticlepage;jsessionid=aNeNiBeP-zX5?articleid=58&pageid=1">Interview 
    			  with Fleecy Moss, CTO at Amiga Inc</a></h4>
    			<div align="left"> 
    			  <p>Amiga is re-entering the computer market with their AmigaOS and 
    				Amiga Anywhere products. Fleecy Moss is their Chief Technological 
    				Officer. In this interview we ask him about the past, present 
    				and the future of the Amiga.</p>
    			</div></td>
    		  <td class="leftdottedcellborder" width="33%"><h4 align="left" class="articleheading"><a href="  /cms/viewarticlepage;jsessionid=aNeNiBeP-zX5?articleid=54&pageid=1">ECS 
    			  K7AMA socketA motherboard review</a></h4>
    			<div align="left"> 
    			  <p>The ECS K7AMA is a motherboard that uses the ALI MAGIk chipset, 
    				and it supports both SDR and DDR memory. It is also one of the 
    				cheapest socketA motherboards on the market. Is it any good? Read 
    				the review to find out! :)</p>
    			</div></td>
    		  <td class="leftdottedcellborder" width="33%"><h4 align="left" class="articleheading"><a href="  /cms/viewarticlepage;jsessionid=aNeNiBeP-zX5?articleid=53&pageid=1">EPOX 
    			  8K7A+ socketA motherboard review</a></h4>
    			<div align="left"> 
    			  <p>The EPOX 8K7A+ is one of the hottest socketA DDR motherboards 
    				on the market. With high-end features at a low price it looks 
    				like the ideal solution for the overclocker and power user. Is 
    				it? Read the review to find out!</p>
    			</div></td>
    		</tr>
    	  </table>
    	</div>
    	<div id="news"> 
    	  <h2><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" align="middle">&nbsp;This 
    		site is changing hands </h2>
    	  <p class="details">Posted By: Vidar Langberget. Date : 2002-06-13</p>
    	  <p> Due to the limited time and effort I've been able to put into this site 
    		in the last year, I've decided to sell the site. While I would love to 
    		continue with the site, I see no point in keeping it without being able 
    		to do more reviews. <br />
    		<br />
    		I've already had some offers, but if you're interested, I will not sell 
    		the site for another week. </p>
    	  <p class="details"><a href=""></a> </p>
    	  <h2><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" align="middle">&nbsp;AMD 
    		releases Athlon XP 2200+ </h2>
    	  <p class="details">Posted By: Vidar Langberget. Date : 2002-06-10</p>
    	  <p> AMD released the Athlon XP 2200+ today, and the usual sites have reviews 
    		of it. The best review I've read so far is the one at Ace's Hardware. 
    		While all the other sites focus on how bad AMD's 0.13 micron process is 
    		doing, Ace's looked back at previous AMD processor launches, and noted 
    		that AMD have usually been able to improve their process a LOT from their 
    		first release on a process. A quote: <br />
    		<br />
    		<i>"At first, the 0.18 Athlon K75 needed 1.8V to reach 1 GHz, while a 
    		few months later, the 1 GHz Athlon Thunderbird happily ran at 1.75V. The 
    		first Palominos were limited to 1200 MHz, but achieved 1733 MHz a few 
    		months ago. So, as you can see, there's a history here where it always 
    		takes a little time to get the most from a particular process/core. "</i> 
    		<br />
    		<br />
    		<br />
    		<br />
    	  </p>
    	  <p class="details"><a href=""></a> </p>
    	  <h2><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" align="middle">&nbsp;First 
    		Hammer benchmarks </h2>
    	  <p class="details">Posted By: Vidar Langberget. Date : 2002-06-07</p>
    	  <p> TecChannel have posted the first available Hammer benchmarks. They have 
    		benchmarked a 800MHz Hammer against Athlons and P4s. The Hammer trounces 
    		the opposition.. <br />
    		<br />
    		If AMD can clock it high enough for the release late this year, Intel 
    		will have some very serious competition. A lot of people are suggesting 
    		problems with getting high enough clock speeds, but I'm not very concerned. 
    	  </p>
    	  <p class="details"><a href=""></a> </p>
    	  <h2><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" align="middle">&nbsp;Professional 
    		Grade Graphic cards </h2>
    	  <p class="details">Posted By: Vidar Langberget. Date : 2002-05-30</p>
    	  <p> Ace's hardware have posted a follow-up article to their article in January. 
    		As usual, this is great stuff.. I won't spoil anything, but the article 
    		is highly recommended. <br />
    		<br />
    		I've been very busy lately, with my MSc dissertation. I'm doing some Extreme 
    		Programming stuff, with a distributed twist.. If you know anyone that 
    		has done any distributed XP projects, please <a href="mailto:vidar@nownet.co.uk">contact 
    		me</a>! <br />
    		<br />
    		I'm hoping to review at least one of the Xabre graphics cards from SiS. 
    		From what I understand, they'll start shipping in a month or so. I've 
    		tried to get a Parhelia review sample as well, but so far I've had no 
    		answer from Matrox. </p>
    	  <p class="details"><a href=""></a> </p>
    	  <h2><img src="/resources/themes/default/images/arrow.gif;jsessionid=aNeNiBeP-zX5" align="middle">&nbsp;Matrox 
    		Parhelia due out on monday? </h2>
    	  <p class="details">Posted By: Vidar Langberget. Date : 2002-05-07</p>
    	  <p> It seems like Matrox will launch/aanounce their new graphics chip on 
    		monday the 14th of May.. Just take a look at the link below. </p>
    	  <p class="details"><a href=""></a> </p>
    	</div>
      </div>
    	  <div id="clearfooter"></div><!-- needed to clear footer -->
    </div>
      <div id="footer"> 
    	<p> Copyright © Kings Of Technology 2003<br>
    	  <a href="mailto:webmaster@templeoftech.com">Webmaster</a></p>
    	<p>Privacy statement</p>
      </div>
    
    </body>
    </html>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    A couple of changes to the css to make it work on mozilla/firebird.

    Replace the css above with this:
    Code:
    <style type="text/css">
    html, body{
     height: 100%;
    }
    #contents {
     min-height:100%;
     height:100%;
     margin-bottom:-73px;
    }
    html>body #contents {height:auto}
    .bgfill {
     background-image: none;
     background-repeat: repeat-x;
     background-color: #000000;
    }
    h4 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #FFFFFF;
     margin: 2px;
     padding: 2px;
    
    }
    .articleheading{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: Gray;
     margin: 2px;
     padding: 2px;
    }
    .leftdottedcellborder{
      border-left: 1px solid Gray;
      vertical-align: top;
    }
     
    h3 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     line-height: normal;
     font-weight: bold;
     font-variant: small-caps;
     margin: 1px;
     padding-top: 2px;
     padding-right: 2px;
     padding-bottom: 2px;
     padding-left: 5px;
    }
    p {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 21px;
     padding: 1px 3px 1px 5px;
     margin: 1px 3px 1px 5px;
    }
    .celldotted {
     list-style-type: none;
     border-top: 1px dotted #333333;
     border-right: 0px dotted #333333;
     border-bottom: 1px dotted #333333;
     border-left: 1px dotted #333333;
    
    }
    .menu1 {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 27px;
     font-variant: small-caps;
     margin: 2px 2px 2px 3px;
     padding: 3px 3px 3px 7px;
    }
    .heading {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 36px;
     font-style: normal;
     font-weight: bold;
     height: auto;
     width: auto;
     white-space: pre;
     display: none;
     margin: 10px;
     padding: 10px;
     color: #CCCCCC;
    
    }
    body{
    	padding : 0;
    	margin : 0;
    	background-image : url(http://www.templeoftech.com/images/bg.gif);
    	background-repeat : repeat-x;
    }
    #content{
       margin-top:240px;
       margin-left : 165px;
       margin-right : 160px;
    }
    #content h1{
    	  font-family : "Trebuchet MS", Georgia, Times, serif;
    	  font-size : 120%;
    	  font-weight : normal;
    	  color : #000;
    }
    #content h2{
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 100%;
     font-weight: bold;
     color: #000000;
    }
    #content p{
     font-family: arial, Helvetica, sans-serif;
     font-size : 80%;
     font-weight : normal;
     color : Black;
     background-color : transparent;
     line-height : 100%;
    }
    #content a:visited{
     color : Maroon;
    }
    #content a:hover{
    background-color: Silver;
     color : Maroon;
    }
    #content a:link{
     color : #47547D;
    }
    #logo{
     position : absolute;
     top : 16px;
     left : 0px;
     width: 100%;
     z-index: 0;
     background: #718BBC;
     border-bottom: 1px solid Black;
    }
    #script{
    	position : absolute;
    	top : 12px;
    	right : 0;
    	text-align : right; /*Mild hack for Netscape 4*/
    }
    #menu{
     float:left;
     width : 140px;
     background: white;
    }
    * html #menu { margin-top : 200px;}
    
    #menu p{
     font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size : 12px;
     font-weight : normal;
     color : #000;
     background-color : transparent;
     line-height : 140%;
      border-bottom: 1px dotted gray;
    }
    #menu a:link{
     color : #707069;
     font-style: normal;
     font-weight: bold;
     font-family: arial, Helvetica, sans-serif;
    }
    #menu a:hover{
     color : Blue;
     font-style: normal;
     font-weight: bolder;
    }
    #menu a:visited{
     color : #707069;
     font-style: normal;
     font-weight: bold;
     font-family: arial, Helvetica, sans-serif;
    }
    #leftcontent{
     float:right;
     width: 155px;
    }
    * html #leftcontent{margin-top: 200px;}
    
    #leftcontent p{
       font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size: 10px;
       line-height: 15px;
       padding-top: none;
    	margin-top: none;
     padding-bottom: 3px;
    }
    #leftcontent h5{
       font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size: 12px;
       font-weight: bold;
       background: #A9A9A9;
       color: white;
       padding-left: 6px;
       padding-top: 5px;
       padding-bottom: 4px;
       margin-bottom: 3px;
       margin: 0px;
     
    }
    #leftcontent a{
      color: #474747;
    }
    #test p {
      font-family: "Courier New", Courier, monospace;
      font-size: 18px;
    }
    .headingbackground {
     background-color: #000066;
    }
    #bar{
     position: absolute;
     top: 137px;
     left:0;
     width: 100%;
     background: #A9A9A9;
     border-top: 1px solid Black;
     border-bottom: 1px solid #000;
    }
    #topbar{
     position: absolute;
     top: 0px;
     left:0px;
     width: 100%;
     height: 15px;
     z-index: 1;
     background: #A9A9A9;
     border-top: 1px solid Black;
     border-bottom: 1px solid #000;
    }
    #bar p{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bolder;
     color: White;
    }
    #bar a:link{ 
     color: White;
    }
    #bar a:visited{ 
     color: White;
    }
    #bar a:hover{ 
     color: blue;
    }
    #footer {
    width:100%;
    clear:both;
    height:70px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: Silver;
    text-align:center;
    position:relative;
    }
    * html #footer {/*only ie gets this style*/
    \height:73px;/* for ie5 */
    he\ight:71px;/* for ie6 */
    }
    #footer p{
      font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size: 9px;
    }
    #logoad{
     position : absolute;
     top: 40px;
     left: 480px;
    }
    #printandemail{
     position :  absolute;
     top: 250px;
    	right: 160px;
     width: 170px;
    }
    #banner{
     position :  absolute;
     top: 170px;
    	left: 165px;
     width: 465px;
    }
    #news{
    }
    #news h2{
       font-family : "Trebuchet MS", Georgia, Times, serif;
    	  font-size : 120%;
    	  font-weight : bold;
    	  color : #000;
       padding: 0px;
       margin-bottom: 0px;
       margin-top: 10px;
       margin-left: 10px;
       margin-right: 10px;
    }
    #news p{
     font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size : 12px;
     font-weight : normal;
     color : #000;
     padding: 0px;
     margin-bottom: 0px;
     margin-left: 10px;
     margin-right: 10px;
     line-height: 135%;
    }
     p.details{
     font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size : 9px;
     font-weight : bold;
     color : #757A75;
     padding: 0px;
     margin-bottom: 0px;
     margin-top: 0px;
     margin-left: 10px;
     margin-right: 10px;
    }
    #news a:link{
    color: #7575AD;
    }
    #newarticles{
     background: white;
    }
    #newarticles p{
     font-size: 9px;
     font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
     line-height: normal;
     
    }
    #newarticles h3{
     font-size: 12px;
     font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
     line-height: normal;
     font-variant: small-caps;
    }
    .articledescription{
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 10px;
     line-height: 13px;
    }
    #article{
       padding-top : 260px;
       padding-bottom : 30px;
       padding-left : 165px;
       padding-right : 160px;
    }
    #article  p{
     font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size : 12px;
     font-weight : normal;
     color : #000;
     padding: 0px;
     margin-bottom: 0px;
     margin-top: 1px;
     margin-left: 10px;
     margin-right: 10px;
     line-height: 135%;
    }
    #article h2{
    	  font-family : "Trebuchet MS", Georgia, Times, serif;
    	  font-size : 120%;
    	  font-weight : bold;
    	  color : #000;
       padding: 0px;
       margin-bottom:0px;
       margin-top: 10px;
       margin-left: 10px;
       margin-right: 10px;
    }
    div#news>p{margin:0}
    #clearfooter {height:73px;width:100%;clear:both}/* to clear footer */
    * html #content {height:1%}/* combat ie's 3pixel jog */
    </style>
    Paul

  9. #9
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    A couple of changes to the css to make it work on mozilla/firebird.

    Paul
    Thanks a lot! This works almost in firebird (the side columns are pushed 70-80px down below the top bar, and the footer covers a bit of the middle content if it is longer than the side columns).

    Unfortunately none of your suggestions work correctly in IE.. The middle content is pushed below the side columns.

    I'll see if I can figure out how the floating side columns work, so that I can tweak it a bit.. Please let me know if you have an idea what might be causing the problems..

    Thanks again!

    Vidar

  10. #10
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by VidarL
    Unfortunately none of your suggestions work correctly in IE.. The middle content is pushed below the side columns.

    Vidar
    I'm replying to myself.. It does work in IE, in special cases. If the browser window is between 950 and 800 pixels wide, it works. But if it's wider or smaller, the main content is pushed below the side columns. Is there any way to fix it?

    Vidar

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Unfortunately none of your suggestions work correctly in IE
    That's a bit harsh lol I spent a lot of time on that.

    The problem is with the table in the centre column that gets as small as it can and then at about 500px it has to drop below. Theres not much that can be done unless you want to change that little 3 column table into something else.

    The screen is fine at larger resolutions. You had some unclosed and missing tags that were causing some display problems (and a strange problem with the italic tag that I've never seen before).

    Here's a quick mock up so you can see how it looks:
    http://www.pmob.co.uk/temp/temple3.htm

    There's still lots to do. There are loads of errors to validate to clean the code up and you need to decide what that big advertisement is to do. Do you want all the content underneath (that's the only sensible option really.)

    If as you say the content in mozilla is running ubder the footer then the clear footer margin just needs to be increased. It looks ok on the one online.

    It works a lot better in mozilla than your original version did as you had elements on top of each other all the time (and not just when resized smaller ).

    The rest is just tweaking the margins to make sure everything fits in different situations such as when right and left columns are longer.

    Mozilla will probably need some different margins for it's left and right floats to even up with IE but that should be easy enough.

    Let me know if there are any major problems and I'll see if i can fix them.

    Paul

  12. #12
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,
    Let me know if there are any major problems and I'll see if i can fix them.
    Thanks a lot for all the help so far. I really appreciate it!

    I've spent some time cleaning up the files a bit, and it works pretty good now. There's one problem left, and that's the issue with the main content area being pushed below the side columns when the browser window is at various sizes.

    The easiest way to replicate the error is to open the favourites list on the left hand of the browser. Then start changing the size of the favourites list, both smaller and bigger.

    What could be causing that? I tried to change the table with the latest articles from three horizontal cells to three rows, but the problem still exist.


    regards,

    Vidar

  13. #13
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Btw, you can now access the front page from www.templeoftech.com.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I haven't replied sooner but I've been away (I'm still away really but just looking in ).

    I think the problem in ie where the text jumps down is due to a strange ie bug to do with the following italic test.
    <i>"At first, the 0.18 Athlon K75 needed 1.8V to reach 1 GHz, while a few months later, the 1 GHz Athlon Thunderbird happily ran at 1.75V. The first Palominos were limited to 1200 MHz, but achieved 1733 MHz a few months ago. So, as you can see, there's a history here where it always takes a little time to get the most from a particular process/core. "</i>
    Try changing the italic test to strong and see if the problem still occurs. I remember doing this in my example and it seemed to cure the problem.

    Let me know if it makes a diffenrence and if not I'll have another look when I get properly back on Friday.

    Hope that's OK.

    Paul

  15. #15
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    I think the problem in ie where the text jumps down is due to a strange ie bug to do with the following italic test.

    Try changing the italic test to strong and see if the problem still occurs. I remember doing this in my example and it seemed to cure the problem.

    Let me know if it makes a diffenrence and if not I'll have another look when I get properly back on Friday.
    It works perfectly without italic. I tried to make a class and define font style as italic there, but I got the same problem. I guess I'll have to live without italic then.. :-(

    Thanks a lot for all your help!

    Vidar

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Vidar,

    That's a strange bug as it shouldn't make any difference. I've tried using the <em> tag instead of italic and it's the same problem.

    I also tried using multiple <em> for small portions of the text and the problem improved but didn't go away. This is obviously an ie rendering bug and you may just have to revert to using strong etc. I've tried all the normal fixes of width,height and position:relative all to no avail.

    (I also tried [cite] which gives italic test and this also caused the problem.)

    You may just have to live without italic in this instance

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •