• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 794
  • Last Modified:

CSS-P and Footers

I have tried almost everything to get a Footer to work using CSS-P.

I am using Dreamweaver MX 2004 and am trying to get a common footer to be placed at the bottom of each webpage (which are based on templates).

My situation is this:-

I have created a base template which contains my header information, and my right hand column static information.  I have in addition created two editable regions, one for my Left hand side info, and one for my content info.

I have then created another template from this which contains the basic common info to most of the web pages, in the left hand editable region.  The content area is obviously different for each page.

My problem arises in that the left hand region (and right hand region) could change in the future, and certainly the content varies greatly in length.  So how can I place a footer at the end of each page.  I have tried just about everything to no avail.

This is such a basic requirement that I cannot believe this feature has been left out of these development tools.

Any help would be greatly appreciated as I have spent almost 3 days trying various differing methods.

Regards

Ian
0
Ianternet
Asked:
Ianternet
  • 17
  • 13
  • 7
  • +2
3 Solutions
 
mreuringCommented:
Would the template I supplied in this question help you at all?:
http://experts-exchange.com/Web/Web_Languages/HTML/Q_21375857.html#13705988

Be adviced I had to post a small correction to it, two comments from this solution.

Let me know,

  Martin.
0
 
IanternetAuthor Commented:
Sorry no.  With your website, you just appear to have three areas header, content and footer placed sequentially in order down the page.

I have a header, then under that a lh box, a content box, and a rh box.

Under all those I wish to have a footer area, which will adjust dependent on the info in three boxes.

I have tried your method, and all it does is put the footer at the bottom of the design window, but this then stays in the same place when previewed, and the longer border boxes appear underneath.

Ian
0
 
mreuringCommented:
Did you add a correct doctype to the page, the template I proposed does have a few settings that need to all be set in order for the effect to work.
I'll try to outline them seperately:
- Your doctype has to switch the browser to standards rendering mode, quirksmode won't do. Something similar to this should work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
if in doubt, let me know what you're using and if it's not correct I can supply you with a standards doctype for your particular choice of html conformance.

- Proper preperation of the body element to encertain that your page stretches to the size of your window or, if the content surpasses the available size, stretches to fit your content beyond that.
          html {
               height: 100%; /*Make sure the page is always filled out*/
          }
          html, body { /*Remove default whitespace*/
               margin:0;
               padding: 0;
          }
          body {
               position: relative; /*Enable content of body to be positioned relative to body, you'll need this if the page is longer than the screensize shows.*/
               height: auto !important; /*Make sure CSS2 compliant browsers won't get fixed height*/
               height: 100%; /*Set height for IE, IE will stretch the container to fit it's content*/
               min-height: 100%; /*The proper way to set min-height for CSS2 compliant browsers*/
          }
The comments, I think, should explain why these settings are important.

- Allow for some space below your content to fit the footer into.
          #content {
               margin-bottom: 28px; /*Create whitespace to fit the footer in it*/
          }
 This is a hazy area, I don't know the exact layout of your page, but you should allow some space below any element that may determine the eventual size of the page. In the template the content-div is the only one that determines the height of the page and thus the only one that preserves this space, from what I understand you may need to add this preservation to several elements as any of them could be longer than the others.


If possible, I would like to see a preview of what you're working on so I might better help you prepare the template, but I hope these comments will proof sufficient.

 Martin
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
IanternetAuthor Commented:
Ah!  My template page....in fact none of my pages has the <!DOCTYPE etc comment at the top....I have not removed them, it was how dreamweaver created them!

Below is a copy of the main template page, with the associated css file.

Hope you can help, or at least provide an alternative as it is driving me nuts! :-)  Please ignore a lot of the footer stuff at the bottom of the .css file as it is all the numerous attempts to resolve this problem, and I haven't yet tidied it up.

Cheers

Ian

Main template as follows:-

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- #BeginEditable "doctitle" -->
<title>Main Template</title>
<!-- #EndEditable -->

<link rel="stylesheet" type="text/css" href="../template.css">
<link href="../content.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
a:link {
      text-decoration: none;
      color: #333333;
}
a:visited {
      text-decoration: none;
      color: #333333;
}
a:hover {
      text-decoration: none;
      color: #8cacbb;
}
a:active {
      text-decoration: none;
}
-->
</style>

<!-- TemplateBeginEditable name="javascript" -->
<!-- TemplateEndEditable -->
</head>


<body leftmargin="0" rightmargin="0">
<div id="HeaderBox">
      <div id="HBYorkLogo"><img border="0" src="../images/YorkLogo.gif" width="398" height="49">
            <div id="HBEGU">Epidemiology & Genetics Unit</div>
      </div>
</div>
<div id="NavBar">
      <div id="NBHomeBox"><a href="../default.htm"><div align="center">Home</div></a></div>
      <div id="NBPubsBox"><a href="../publications.htm"><div align="center">Publications</div></a></div>
      <div id="NBContactsBox"><a href="../contacts.htm"><div align="center">Contacts</div></a></div>
      <div id="NBDirectionsBox"><a href="../directions.htm"><div align="center">Directions</div></a></div>
      <div id="NBVacanciesBox"><div align="center"><a href="../vacancies.htm">Vacancies</a></div>
      </div>
</div>
<div id="SiteLocBar">
      <div id="SiteLocText">you are here
            <div id="SiteLocTextArrows"> &raquo; </div>
      </div>
            <div id="SiteLoc">
            <!-- TemplateBeginEditable name="siteloc" -->
            <!-- TemplateEndEditable -->
            </div>
</div>
<div id="Spacer15"></div>
<!-- TemplateBeginEditable name="lhbox" -->
<!-- TemplateEndEditable -->
<div id="ContentBox">
      <!-- TemplateBeginEditable name="contentbox" -->
      <!-- TemplateEndEditable -->
</div>
<div id="RHBox">
      <div id="NewsBox">
            <div id="BoxTitle">
                  <div id="TitleText">News</div>
            </div>
            <div id="BorderBox">
                  <div id="Spacer10"></div>
                  <div id="NavItem">UKCCS Conference</div>
                  <div id="Spacer10"></div>
</div>
      </div>
      <div id="Spacer15"></div>
      <div id="LinksBox">
            <div id="BoxTitle">
                  <div id="TitleText">Links</div>
            </div>
            <div id="BorderBox">
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.lrf.org.uk/" title="LRF" target="_blank"><img src="../images/lrflogo2.gif" alt="LRF Link" width="130" height="34"></a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.york.ac.uk" target="_blank">University of York</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.york.ac.uk/healthsciences/welcome.htm" target="_blank">Health Sciences,<br>University of York</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.york.ac.uk/depts/biol/" target="_blank">Biology,<br> University of York</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.hyms.ac.uk" target="_blank" title="The Hull York Medical School">HYMS</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.hmds.org.uk" target="_blank" title="Haematological  Malignancy Diagnostic Service">HMDS</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.nycris.org.uk" target="_blank" title="Northern &amp; Yorkshire Cancer Registry &amp; Information Service">NYCRIS</a></div>
                  <div id="Spacer10"></div>
            </div>
      </div>
</div>
<div id="footer">help</div>
</body>
</html>

template.css file as follows:-

html {
      height: 100%; /*Make sure the page is always filled out*/
}
html, body { /*Remove default whitespace*/
      margin:0;
      padding: 0;
}
body         {
      font-family: "Verdana";
      font-size: 10pt;
      color: #333333;
      position: relative; /*Enable content of body to be positioned relative to body, you'll need this if the page is longer than the screensize shows.*/
      height: auto !important; /*Make sure CSS2 compliant browsers won't get fixed height*/
      height: 100%; /*Set height for IE, IE will stretch the container to fit it's content*/
      min-height: 100%; /*The proper way to set min-height for CSS2 compliant browsers*/
}
#HeaderBox      {width:100%; height:75}
#HBYorkLogo      {position:absolute; left: 20}
#HBEGU      {position:absolute; left: 20; top: 35; font-size:11pt; font-weight:bold; color:#333399}
#NavBar {position:relative; height: 17; border-top:1px solid #8CACBB; border-bottom:1px solid #8CACBB; width: 100%; background-color:#DEE7EC}
#NBHomeBox {position: absolute; left: 20; width: 80}
#NBPubsBox {position: absolute; left: 105; width: 80}
#NBContactsBox {
      position: absolute;
      right: 150px;
      width: 60px;
      font-size: 8pt;
      top: 2px;
}
#NBDirectionsBox {position: absolute; right: 85; width: 60; font-size: 8pt; top: 2}
#NBVacanciesBox {position: absolute; right: 20; width: 60; font-size: 8pt; top: 2}
#SiteLocBar{
      position:relative;
      border-bottom:1px solid #8CACBB;
      font-size: 10px;
      height: 15px;
}
#SiteLocText{position: absolute; left: 185}
#SiteLoc{position: absolute; left: 270px; width: 100%}
#SiteLocTextArrows {
      position: absolute;
      top: 1px;
}
.backgroundcol {background-color:#DEE7EC}
.borderformat {border-top: 1px solid #8CACBB; border-bottom: 1px solid #8CACBB}
#Spacer10      {position:relative;width:100%; height:10}
#Spacer15      {position:relative;width:100%; height:15}
#RHBox {position:absolute; height:100%; right:20px; width:150px}
#LHBox {position:absolute; height:100%; left:20px; width:150px}
#ContentBox {
      position: absolute;
      height: 100%;
      left: 185px;
      right: 185px;
}
#HomeBox{position: relative; width: 100%}
#PubsBox{position: relative; width: 100%}
#NewsBox{position: relative; width: 100%}
#LinksBox{position: relative; width: 100%}
#BorderBox {border:1px solid #8CACBB; position: relative; Height:100%}
#BoxTitle {border-left:1px solid #8CACBB; border-right:1px solid #8CACBB; border-top:1px solid #8CACBB; background-color:#DEE7EC; width:100}
#TitleText {
      left:10px;
      position: relative;
      width: 1%;
}
#NavItem {
      position:relative;
      left:10px;
      width: 130px;
}
#more {
      position:absolute;
      right: 10px;
}
#footerbox {
      position:relative;
      width:100%;
      border-top:1px solid #8CACBB;
      border-bottom:1px solid #8CACBB;
      background-color:#DEE7EC;
}
#footer {
               position: absolute;
               bottom: 0; /*This will set the bottom of footer to the bottom of body (remember the position: relative, this is what it was for.*/
               width: 100%;/*Fill out the width of the document, adjust to own needs...*/
               height: 27px;/*This template is based on a fixed height footer...*/
               /*The rest is just some styling again.*/
               border-top: 1px solid black;
               background: #4e535f;
               color: white;
          }
#footertable {
      position:absolute;
      left:20px;
      right:20px
}
#contents {
      position:relative;
      margin:0;
      width:100%;
}
      bottom:0px;
      top:100%;
      margin-top:-35px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 35px;
      padding-left: 0px;#ffooterbox {
      position:relative;
      top:100%;
      margin-top:-35px;
      height:35px;
      width:100%;
      border-top:1px solid #8CACBB;
      border-bottom:1px solid #8CACBB;
      background-color:#DEE7EC;
}


0
 
mreuringCommented:
As a prelimenary analysis, there's a lot of properties where you set the width, or top or such values without specifying a unit, like width: 20;. If we want to switch your document to standards-rendering it comes crashing down around you because of this. So you should at least add px as a measurement to these rules, making them into width: 20px; for instance.
This gets us a long way but still creates a lot of noise resulting in a whole stretch of whitespace below the body element. I'm terribly busy atm so if anybody else (Sean, Cd&, GS, anybody) could help you along that would be great. I will try and make time and will get back when I do, but I can't promise it'll be today. I'll try and contact a few regulars to see if they can spare some time though. (This may result in an entiraly different way of fixing things, there's always more than 1 way to skin a website)

Hope to get back to you soon,

 Martin
0
 
mreuringCommented:
Oh, and one question while I'm at it. At the end of your css snippet it shows this:
#contents {
     position:relative;
     margin:0;
     width:100%;
}
     bottom:0px;
     top:100%;
     margin-top:-35px;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 35px;
     padding-left: 0px;#ffooterbox {
     position:relative;
     top:100%;
     margin-top:-35px;
     height:35px;
     width:100%;
     border-top:1px solid #8CACBB;
     border-bottom:1px solid #8CACBB;
     background-color:#DEE7EC;
}

What are all those rules that don't, currently, belong to any selector need to do?
0
 
IanternetAuthor Commented:
Yes, apologies for the lack of clarity in the .css.....I believe this was a .css file created using frontpage and it didn't put the units in.  It is something I have started to amend as you can see.  The rules that don't belong to anything were just temporarily copied there, as I was frantically chopping and changing the definitions in a vain attempt to get them to work.

The footer is not urgent at the moment, as we are still organising the content properly.

Thanks for your help.

Cheers

Ian

PS Please also find below the subsequent template (on which most of the actual pages are based), that contains the lh border info:-

<!--comment to trigger quirks mode in IE -->
<html><!-- #BeginTemplate "/Templates/main.dwt" --><!-- DW6 -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Home Template</title>
<!-- InstanceEndEditable -->

<link rel="stylesheet" type="text/css" href="../template.css">
<link href="../content.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
a:link {
      text-decoration: none;
      color: #333333;
}
a:visited {
      text-decoration: none;
      color: #333333;
}
a:hover {
      text-decoration: none;
      color: #8cacbb;
}
a:active {
      text-decoration: none;
}
-->
</style>

<!-- InstanceBeginEditable name="javascript" --><!-- InstanceEndEditable -->
</head>


<body leftmargin="0" rightmargin="0">
<div id="HeaderBox">
      <div id="HBYorkLogo"><img border="0" src="../images/YorkLogo.gif" width="398" height="49">
            <div id="HBEGU">Epidemiology & Genetics Unit</div>
      </div>
</div>
<div id="NavBar">
      <div id="NBHomeBox"><a href="../default.htm"><div align="center">Home</div></a></div>
      <div id="NBPubsBox"><a href="../publications.htm"><div align="center">Publications</div></a></div>
      <div id="NBContactsBox"><a href="../contacts.htm"><div align="center">Contacts</div></a></div>
      <div id="NBDirectionsBox"><a href="../directions.htm"><div align="center">Directions</div></a></div>
      <div id="NBVacanciesBox"><div align="center"><a href="../vacancies.htm">Vacancies</a></div>
      </div>
</div>
<div id="SiteLocBar">
      <div id="SiteLocText">you are here
            <div id="SiteLocTextArrows"> &raquo; </div>
      </div>
            <div id="SiteLoc">
            <!-- InstanceBeginEditable name="siteloc" -->
            <!-- InstanceEndEditable -->
            </div>
</div>
<div id="Spacer15"></div>
<!-- InstanceBeginEditable name="lhbox" -->
@@(" ")@@
<div id="LHBox">
      <div id="HomeBox">
            <div id="BoxTitle">
                  <div id="TitleText">Home</div>
            </div>
            <div id="BorderBox">
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../default.htm">About Us</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../home/epidemiology.htm">Epidemiology</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../home/genetics.htm">Genetics</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../home/research.htm">Research</a></div>
                  <div id="Spacer10"></div>
            </div>
      </div>
      <div id="Spacer15"></div>
      <div id="PubsBox">
            <div id="BoxTitle">
                  <div id="TitleText">Publications</div>
            </div>
            <div id="BorderBox">
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../publications.htm">Introduction</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../publications/2004.htm">2004</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../publications/2003.htm">2003</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../publications/2002.htm">2002</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../publications/2001.htm">2001</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../publications/2000.htm">2000</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../publications/1999.htm">1999</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="../publications/1998.htm">1998</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.ncbi.nlm.nih.gov/entrez/query.fcgi">Pubmed</a></div>
                  <div id="Spacer10"></div>
            </div>
      </div>
</div>
<!-- InstanceEndEditable -->
<div id="ContentBox">
      <!-- InstanceBeginEditable name="contentbox" -->
      <!-- InstanceEndEditable -->
</div>
<div id="RHBox">
      <div id="NewsBox">
            <div id="BoxTitle">
                  <div id="TitleText">News</div>
            </div>
            <div id="BorderBox">
                  <div id="Spacer10"></div>
                  <div id="NavItem">UKCCS Conference</div>
                  <div id="Spacer10"></div>
</div>
      </div>
      <div id="Spacer15"></div>
      <div id="LinksBox">
            <div id="BoxTitle">
                  <div id="TitleText">Links</div>
            </div>
            <div id="BorderBox">
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.lrf.org.uk/" title="LRF" target="_blank"><img src="../images/lrflogo2.gif" alt="LRF Link" width="130" height="34"></a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.york.ac.uk" target="_blank">University of York</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.york.ac.uk/healthsciences/welcome.htm" target="_blank">Health Sciences,<br>University of York</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.york.ac.uk/depts/biol/" target="_blank">Biology,<br> University of York</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.hyms.ac.uk" target="_blank" title="The Hull York Medical School">HYMS</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.hmds.org.uk" target="_blank" title="Haematological  Malignancy Diagnostic Service">HMDS</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.nycris.org.uk" target="_blank" title="Northern &amp; Yorkshire Cancer Registry &amp; Information Service">NYCRIS</a></div>
                  <div id="Spacer10"></div>
            </div>
      </div>
</div>
<!-- InstanceBeginEditable name="Footer" -->
<!-- InstanceEndEditable -->
<div id="footer">help</div>
</body>
<!-- #EndTemplate --></html>
0
 
GoofyDawgCommented:
Is your site a fixed width, or do you have a fluid center? The reason I ask is that there are two solutions to this basic layout. Here's the non-fluid solution:

  <style type="text/css">
    #header, #contentContainer, #footer {
      clear: both;
      width: 760px;
      height: 100px;
      background-color: #CCCCCC;
    }
    #contentContainer { background-color: white; }
    #leftContent, #rightContent {
      float: left;
      width : 120px;
      background-color: #FFCC00;
      height: 300px;
    }
    #middleContent {
      float: left;
      width: 520px;
      height: 300px;
    }
  </style>

The html would look like this:

<div id="header">HEADER</div>
<div id="contentContainer">
  <div id="leftContent">LEFT</div>
  <div id="middleContent">MIDDLE</div>
  <div id="rightContent">RIGHT</div>
</div>
<div id="footer">FOOTER</div>

Mind you, heights really aren't important, I just put them in for demonstration.

For a 3 column, fluid solution, go here: www.glish.com. If you want a header and a foot, simply put the left, middle and right divs within another container that spans across the entire page. The header and footer divs stay the same.

GoofyDawg
0
 
IanternetAuthor Commented:
Yes our site is a "fluid" solution, although I could change it to fixed!

In order to have the site centred on the page, how would I do this?  Is it a case of just aligning the body to centre?

However, I would prefer to have the fluid solution, but am a little confused about your reference to the site above.....does it have a solution there, or is it a case of viewing the source and figuring it from there?

Cheers

Ian
0
 
IanternetAuthor Commented:
S'ok, I found it!

Will try the methods first thing next week and let you know how I get on.

Cheers

Ian
0
 
craigofcapetownCommented:
Note :

The correct way to align the body content to center is by using css :

<body style="text-align: center; ">

To align a container tag (i.e div, layer, span...) can also be done using css :

<div style="position: absolute; bottom: 0px; ">

C
0
 
mreuringCommented:
@craigofcapetown
Please, in TA try to avoid inline styles when at all possible, in your example you should have used:
body {
   text-align: center;
}

Also, try to avoid absolute positioning when at all possible. Your example will not work verry well if the container is larger than the screensize.

On centering, your example will only work in IE and will center-align all text on the page, something you cannot solve with just that inline piece of CSS. For proper center-alignment a container div will accually be nessecary:
<body>
  <div id="bodyelement">
    Accual content goes in here.
  </div>
</body>

the CSS to use with this would be:
body {
  text-align: center; /*For older IE versions*/
}
div#bodyelement {
  text-align: left; /*Correction the text-alignment*/
  margin: 0 auto; /*Proper center-alignment of the content*/
}

Please do try and make suggestion based on the w3c guidelines, only breaking with them if you can't solve the issue within such confinements. Thank you,

 Martin
0
 
GoofyDawgCommented:
Shucks, forgot to add the /css after the main url. Sorry about that. Glish has the fluid solution, but also check out this solution at www.alistapart: http://www.alistapart.com/articles/negativemargins/. This article goes into great depth about creating a fluid solution.

GoofyDawg
0
 
COBOLdinosaurCommented:
Ianternet,

Martin asked me to look in on the question.  If you can give an update of what the still outstanding issues are I wil try to add whatever assistance I can.

Cd&
0
 
craigofcapetownCommented:
@mreuring

>Please do try and make suggestion based on the w3c guidelines, only breaking with them if you can't solve the issue within such confinements. Thank you,

Ianternet's question is titled : 'CSS-P and Footers'

The following code worked on the following browsers (with utter success) :

<html>

<body style="text-align: center; ">

blah

</body>

</html>

MyIE2 (compatible) browsers :

Internet Explorer 6.0.2...
Maxthon 1.2...
Avant Browser 10.0...

Gecko (compatible) browsers :

Netscape Navigator 7.2...
Mozilla 1.7.6...
Mozilla FireFox 1.0.2...

Other :

Opera 7.51...

The following code worked on the following browsers (with amazine success) :

<html>

<body>

<div style="position: absolute; bottom: 0px; height: 20px; background-color: #CCCCCC">

blah

</div>

</body>

</html>

MyIE2 (compatible) browsers :

Internet Explorer 6.0.2...
Maxthon 1.2...
Avant Browser 10.0...

Gecko (compatible) browsers :

Netscape Navigator 7.2...
Mozilla 1.7.6...
Mozilla FireFox 1.0.2...

Other :

Opera 7.51...

As this code worked flawlessly in all the browsers that I have at my disposal, I will continue to use CSS-P with the confidence that comes from seeing it work on everything. I, however, do not understand how you would like me to solve a question entitled 'CSS-P and Footers' without using CSS-P (CSS Positioning).

I also understand, and believe fully, that linked stylesheets are the best styling solution to any problem, as well as a useful way to validate CSS and hide markup. I did, however, use inline styling so as not to have to spend the whole day typing on a forum.

C
0
 
mreuringCommented:
Your first example illustrates perfectly how to center align the word 'blah'. How does that in any way illustrate how to answer "In order to have the site centred on the page, how would I do this?"
As for the second example, hopefully this slightly modified example of yours will illustrate my complaint with it:
<html>

<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div style="position: absolute; bottom: 0px; height: 20px; background-color: #CCCCCC">

blah

</div>

</body>

</html>

Notice that I tested this on a screenheight of 1024, so make sure your browser is smaller than that or you'll never notice what goes wrong, on all of the browsers you tested with.

And as towards not wanting to type all day, it only took me 5 minutes to include an example with normal rules instead of inline rules. As many who come here won't understand that difference unless you point it out they will cut and paste your inline example resulting in a practice quite on par with using table-layouts and that's ugly since, as I mentioned before, we're trying to create standards-compliant solutions in this TA. If you don't want to spend the time in doing so, please try and refrain from posting here.
0
 
IanternetAuthor Commented:
To answer COBOLdinosaur, I have been ill and so have been unable to spend any further time on it.  I am going to attempt the "fluid" solution as described above to see if that resolves my problem and will advise asap.

Ian
0
 
craigofcapetownCommented:
@mreuring

http://www.experts-exchange.com/help.jsp#hi102

I was under the assumption that, having a CSS-Positioned container element (in this case - div), the site designer would design the site in such a way that the rest of the page content is also contained in similar container elements (i.e all the page content is contained within div elements). If this were the case, and the elements were set up in such a way as for the content not to overlap, unless specifically required to do so, then my solution to the problem would work flawlessly. Using inline elements along-side (or in this case, underneath) CSS-Positioned elements is a great way to cheat both systems of their various pros and cons. Chalk and cheese, as is frequently said by people you would find more credable than me. However, I do not come to expert-exchange to fight over exactly what the person asking the questions decides to impliment. My suggestion was merely that : a suggestion, and sould not be percieved as the 'be-all and end-all' of the solution base to this question. A great way to discourage someone from trying to share knowledge is to tell them :

> If you don't want to spend the time in doing so, please try and refrain from posting here.

as the method that I choose to answer questions by is completely up to me.

C
0
 
craigofcapetownCommented:
@Ianternet

You will find that you can impliment a footer using CSS-P (as stated before), and it will work well, if all your sites content is contained within container elements (i.e div, span, layer...), and adheres to CSS-P conventions.

C
0
 
IanternetAuthor Commented:
I don't seem to be getting anywhere.  I tried the solution from the "glish site", ie the 3 columns, holy grail solution, see http://www.glish.com/css/7.asp

The footer does not position correctly, please see http://www.egu.york.ac.uk/test.htm

Have I missed something basic out?

The test.css and the test.htm files are shown below:-

Test.css
/* CSS Document */
body      {
      font-family: Verdana;
      font-size: 10px;
      color: #333333;
      margin:10px 10px 0px 10px;
      padding:0px;
}
#HeaderBox      {
      height:75px
}
html>body #headerbox {
      height:75px
}
#LHBox {
      position:absolute;
      left:20px;
      top:120px;
      width:150px
}
#ContentBox {
      margin-left: 185px;
      margin-right: 185px;
}
html>body #contentbox {
      margin-left: 185px;
      margin-right: 185px;
}
      
#RHBox {
      position:absolute;
      right:20px;
      top:120px;
      width:150px
}
#HBYorkLogo      {position:absolute; left: 20}
#HBEGU      {position:absolute; left: 20; top: 35; font-size:11pt; font-weight:bold; color:#333399}
#NavBar {position:relative; height: 17; border-top:1px solid #8CACBB; border-bottom:1px solid #8CACBB;  background-color:#DEE7EC}
#NBHomeBox {position: absolute; left: 20; width: 80}
#NBPubsBox {position: absolute; left: 105; width: 80}
#NBContactsBox {
      position: absolute;
      right: 150px;
      width: 60px;
      font-size: 8pt;
      top: 2px;
}
#NBDirectionsBox {position: absolute; right: 85; width: 60; font-size: 8pt; top: 2}
#NBVacanciesBox {position: absolute; right: 20; width: 60; font-size: 8pt; top: 2}
#SiteLocBar{
      position:relative;
      border-bottom:1px solid #8CACBB;
      font-size: 10px;
      height: 15px;
}
#SiteLocText{position: absolute; left: 185}
#SiteLoc{position: absolute; left: 270px; width: 100%}
#SiteLocTextArrows {
      position: absolute;
      top: 1px;
}
.backgroundcol {background-color:#DEE7EC}
.borderformat {border-top: 1px solid #8CACBB; border-bottom: 1px solid #8CACBB}
#Spacer10      {position:relative;height:10}
#Spacer15      {position:relative; height:15}
#HomeBox{position: relative}
#PubsBox{position: relative}
#NewsBox{position: relative}
#LinksBox{position: relative}
#BorderBox {border:1px solid #8CACBB; position: relative}
#BoxTitle {border-left:1px solid #8CACBB; border-right:1px solid #8CACBB; border-top:1px solid #8CACBB; background-color:#DEE7EC}
#TitleText {
      left:10px;
      position: relative;
      width: 1%;
}
#NavItem {
      position:relative;
      left:10px;
      width: 130px;
}
#more {
      position:absolute;
      right: 10px;
}

#footerbox {
      height:33px;
      border-top:1px solid #8CACBB;
      border-bottom:1px solid #8CACBB;
      background-color:#DEE7EC
}
#footertable {
      position:absolute;
      left:20px;
      right:20px
}


test.htm
<html><!-- InstanceBegin template="/Templates/home.dwt" codeOutsideHTMLIsLocked="false" --><!-- DW6 -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Home Template</title>
<!-- InstanceEndEditable -->

<link rel="stylesheet" type="text/css" href="test.css">
<link href="content.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
a:link {
      text-decoration: none;
      color: #333333;
}
a:visited {
      text-decoration: none;
      color: #333333;
}
a:hover {
      text-decoration: none;
      color: #8cacbb;
}
a:active {
      text-decoration: none;
}
-->
</style>
<!-- InstanceBeginEditable name="javascript" --><!-- InstanceEndEditable -->
</head>

<body leftmargin="0" rightmargin="0">
<div id="HeaderBox">
      <div id="HBYorkLogo"><img border="0" src="images/YorkLogo.gif" width="398" height="49">
            <div id="HBEGU">Epidemiology & Genetics Unit</div>
      </div>
</div>
<div id="NavBar">
      <div id="NBHomeBox"><a href="index.htm"><div align="center">Home</div></a></div>
      <div id="NBPubsBox"><a href="publications.htm"><div align="center">Publications</div></a></div>
      <div id="NBContactsBox"><a href="contacts.htm"><div align="center">Contacts</div></a></div>
      <div id="NBDirectionsBox"><a href="directions.htm"><div align="center">Directions</div></a></div>
      <div id="NBVacanciesBox"><div align="center"><a href="vacancies.htm">Vacancies</a></div>
      </div>
</div>
<div id="SiteLocBar">
      <div id="SiteLocText">you are here
            <div id="SiteLocTextArrows"> &raquo; </div>
      </div>
            <div id="SiteLoc">
            <!-- InstanceBeginEditable name="siteloc" -->
            <!-- InstanceEndEditable -->
            </div>
</div>
<div id="Spacer15"></div>

 
<div id="LHBox">
      <div id="HomeBox">
            <div id="BoxTitle">
                  <div id="TitleText">Home</div>
            </div>
            <div id="BorderBox">
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="default.htm">About Us</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="home/epidemiology.htm">Epidemiology</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="home/genetics.htm">Genetics</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="home/research.htm">Research</a></div>
                  <div id="Spacer10"></div>
            </div>
      </div>
      <div id="Spacer15"></div>
      <div id="PubsBox">
            <div id="BoxTitle">
                  <div id="TitleText">Publications</div>
            </div>
            <div id="BorderBox">
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="publications.htm">Introduction</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="publications/2004.htm">2004</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="publications/2003.htm">2003</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="publications/2002.htm">2002</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="publications/2001.htm">2001</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="publications/2000.htm">2000</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="publications/1999.htm">1999</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="publications/1998.htm">1998</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.ncbi.nlm.nih.gov/entrez/query.fcgi">Pubmed</a></div>
                  <div id="Spacer10"></div>
            </div>
      </div>
</div>

<div id="ContentBox">
      <!-- InstanceBeginEditable name="contentbox" -->
      fsfds fdsf dsf dsf ds f dsfdsfdsf dsf dsf ds f dsf ds fds f ds fds f ds fds fds f
      <!-- InstanceEndEditable -->
</div>
<div id="RHBox">
  <div id="LinksBox">
            <div id="BoxTitle">
                  <div id="TitleText">Links</div>
            </div>
            <div id="BorderBox">
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.lrf.org.uk/" title="LRF" target="_blank"><img src="images/lrflogo2.gif" alt="LRF Link" width="130" height="34"></a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.york.ac.uk" target="_blank">University of York</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.york.ac.uk/healthsciences/welcome.htm" target="_blank">Health Sciences,<br>University of York</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.york.ac.uk/depts/biol/" target="_blank">Biology,<br> University of York</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.hyms.ac.uk" target="_blank" title="The Hull York Medical School">HYMS</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.hmds.org.uk" target="_blank" title="Haematological  Malignancy Diagnostic Service">HMDS</a></div>
                  <div id="Spacer10"></div>
                  <div id="NavItem"><a href="http://www.nycris.org.uk" target="_blank" title="Northern &amp; Yorkshire Cancer Registry &amp; Information Service">NYCRIS</a></div>
                  <div id="Spacer10"></div>
            </div>
  </div>
</div>

<!-- InstanceBeginEditable name="FooterBox" -->
<div id ="footerbox">FooterBox</div>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
0
 
COBOLdinosaurCommented:
Ianternet,

Whenever you use the position property for layout, you break the fabric of the canvas and the page will break under some conditions 100% of the time.  There is no method of layout that employs absolute positioning as its foundation for layout that will produce a page that is not defective; except for very simple pages, and page that are drawn like the paper layouts they try and mimic.

If you are going to use positioning, especially absolute position for layout control do not expect the page to work correctly for all; or even the majority of users.  If you want cross-browser, cross-resolution, accessible page, that are responsive to the user then you need to release control to the browser so it can optimize dispaly based on environment and user preferences.  That requires a fluid layout.  It is the way CSS is intended to be used.  It is the way we teach it on this site, and it is what has been successfully implemented by thousands of developers who have come to EE and adopted the methods that the top-experts in the CSS topic have spent a great deal of time perfecting and refining.

Cd&
 
0
 
IanternetAuthor Commented:
Hmmm, I'm even more confused now!  The suggestion by one of the experts was to use the "fluid" layout as shown at the glish website.  In that solution, they use the absolute positioning reference.

What should I do now?
0
 
COBOLdinosaurCommented:
You use floats and let the browser do it job which is to optimiz rendering.  The real problem you have that has not yet ben addressed is that you want a fix page in a fluid 4 dimensional  medium.  

Once you understand floats, it opens up total flexibility and you start to see that it is the user who should decide layout, not the page designer/developer.  

Look a couple of articles I've done.  They will be incorporated into the EE site once the next release of the user interface is complete.  The first is just for pure fun and demonstrates the use of just two properties float and width to create radical changes in layout using fluid principles:
http://cd-articles.fateback.com/glass-houses.html

The second is a more practical application of floats, and the use of absolute position for its intended use of layer managment:
http://cd-articles.fateback.com/Formsin4.html
On the second one make note of how little code it takes to manage and modify the examples.  A major reason for using CSS is the ease of maintenance, but to get that benefit, you need lean straight forward code.

Cd&
0
 
craigofcapetownCommented:
COBOLdinosaur, please point out to me how my solution was defective.
0
 
COBOLdinosaurCommented:
craigofcapetown,

I think Martin already did a pretty good job of demonstrating what happens to one dimensional solutions where a single element is isolated to demonstrate positioning.  Any single object can be placed on a page with positioning, but as most pages are not composed of a single object; solutions that do not account for other content; especially dynamic content are of little value.  Your solution places a layer at the bottom of the window and therefore only works if the the page content is less than the height of the viewport or canvas.  

You additional make the assertion that <body style="text-align: center; "> is the way to center content.  That is 100% incorrect. In standards compliant mode that will only center body text, not elements.  The correct method of centering content is to apply auto margins to the elements and text aligment to the text nodes.  

Non-standard approaches result in a higher incidence of cross-browser issues and higher maintenance costs.  Members coming to this topic, do so in the expectation that they will get solutions and standards based approaches that work today and tomorrow; not quick fixes or hacks like using text-align that rely on browser bugs or quirks mode to work.

If you are offended by having experienced experts critique the solutions you propose, then you need to become more familar with standards based approaches; so that you are able to collaborate on the kind of solutions that users of this topic have come to expect.

Cd&
0
 
craigofcapetownCommented:
Well, I prefer your response to Martin's. I apologize. These suggestions were based on my current CSS knowledge, and after thorough testing, as indicated, I assumed that these solutions did infact work cross-browser.

C
0
 
GoofyDawgCommented:
Here's a possible solution. It's fluid center with two side rails, and a working footer. First the CSS:

<style type="text/css">
      div {
            box-sizing: content-box;
            -moz-box-sizing: content-box;
      }
      #container {
            clear: both;
      }
      #leftRail {
            float: left;
            width: 120px;
            background-color: #EFEFEF;
            border-right: 1px dashed #666;
            margin-right:20px;
      }
      #rightRail {
            float:right;
            width: 120px;
            margin-left: 20px;
            background-color: #EFEFEF;
            border-left: 1px dashed #666;
      }
      #content {
            margin-left: 120px;
            text-align: left;
      }
      #ctrContent {
            margin-right: 140px;
            margin-left: 40px;
      }
      #header, #footer {
            clear: both;
            width: 100%;
            border: 1px dashed #666;
            font-size: 32px;
            font-weight: bold;
      }
</style>

Now, here's the HTML:

      <div id="header">This is a header</div>
      <div id="container">
            <div id="leftRail"><br><br><br><br><br><br><br><br><br><br><br><br></div>
            <div id="content">
                  <div id="rightRail"><br><br><br><br><br><br><br><br><br><br><br><br></div>
                  <div id="ctrContent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
            </div>
      </div>
      <div id="footer">This is a footer</div>

Pretty simple layout. Note that the right rail is actually contained in the "content" area, floating to the right. In order for this to work right, the right rail must be declared before the ctrContent area, so that the ctrContent area plays "follow the leader." To get around the box model compatibility problems, I redefined the div tag with the box-sizing and -moz-box-sizing properties (look this up on Google). I tested this in both Firefox, Opera and IE6, so I'm pretty sure it'll work in IE5 Mac, though I don't have a Mac, so I can't be 100% sure.

In any case, what I wanted to provide was a solution that did not use absolutely positioned divs, because they complete blow through the page's layout. Floats are definitely the way to go. The trick was coming up with the containership order. Once I had that figured out, everything fell nicely into place.

GoofyDawg
0
 
GoofyDawgCommented:
Probably don't need to say this but better safe than sorry... Copy the style block into the head section of a page, and put the divs in the body.

GoofyDawg
0
 
GoofyDawgCommented:
0
 
mreuringCommented:
This morning I finaly had some time to take a good look at things. And taking GoofyDawq's suggestion and link in mind would like to add a few suggestions on how to get your page to behave as a fluid layout.
For this to work you need to have the sidebars floating, looking at your source and css that goes with it that only takes a few minor adjustments.
First, in the template, move the right sidebar above the content block. When you've done so insert the following portions of css in place of the existing css for those snippets:
#LHBox {
      float: left;
      width:150px
}
#ContentBox {
      margin-left: 185px;
      margin-right: 185px;
}
#RHBox {
      float: right;
      width:150px
}

and for the footer:
#footerbox {
      height:33px;
      border-top:1px solid #8CACBB;
      border-bottom:1px solid #8CACBB;
      background-color:#DEE7EC;
      clear: both;
}
Remember, this is just a quick modification of your code based on GoofyDawq's suggestions on how to make a fluid layout akin to what you have. The majority of points if this gets you where you want to get should go to him.

Let us know how you're doing,

 Martin
0
 
IanternetAuthor Commented:
Many thanks for your additional suggestions Martin.  I started implementing GD's suggestions yesterday and this seems to work (although in design mode it looks awful).

Your solution above seems a lot simpler than GD's though.

This certainly seems to have opened a whole can of worms from my point of view.  I am no expert in this field as you can see, and although my need for skills in this area is limited to the odd times when I am called on to sort out our website, it is interesting to note all the "new" ideas and methods of doing things.  Is there a good book that would introduce me to this.

eg, before starting on this redesign of our site, I was aware of the benefits of using css-p, but I was still trying to using position etc.  The use of float etc I had not heard of.

Regards

Ian

PS What does the clear:both do at the bottom of the footer section?
0
 
IanternetAuthor Commented:
Also, should I include the:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

When I created a template, this was not added.  And when I then created pages from my templates, this was not inserted either.

Should I manually install the above to my templates?

Ian
0
 
mreuringCommented:
The only reason my solution may seem so much simpler is because I had rewritten your own code, GD's is the same in essence. I just applied his example to your design to help you out a little extra.
The clear:both on the footer will ensure that the footer will always drop below any floated elements (your left and rightpane in this case) nomatter how short the rest of the content is.
One of the nice things about floats is they function quite well in quirks mode, so that doctype is not of a huge importance. I would however add it, if only since the different browser behave more akin to eachother in standards-mode. For your information, that's the most important use for a doctype css-wise, it has a rather big impact on the way a page gets rendered. I personally would make sure the doctypes get into the templates one way or another.

Oh, and for books, I recommend Eric Meyer. I've just recently acquired his two books, 'Eric Meyer on CSS' and 'More Eric Meyer on CSS' just to have a look at what he's done in publishing. So far the books are an interresting read though much more usefull for someone like you, who hasn't already devoted his skills to CSS.

Martin.
0
 
mreuringCommented:
I just picked this up from another thread, it explains in detail why and how you should apply doctypes:
http://www.ericmeyeroncss.com/bonus/render-mode.html

Happy styling ;)

  Martin
0
 
IanternetAuthor Commented:
Erk!

I added the doctype and it completely "shagged" most of my layouts!

As you can see from previous code, I assume it is because of using the position tag (either absolute or relative).  However, in my naivety, I removed these references in my css file, and all I got was a slightly better design, but with nothing positioned.

As this site is now live because of the urgent need to get certain content available in preparation for a conference, can you provide me with a nuts and bolts outline as to how to position accurately various elements of the site.

Regards

Ian

PS Would it be better for me to open this a separate question now?
0
 
IanternetAuthor Commented:
re: the books.  I have been looking on Amazon and I noticed that the publish date for "Eric Meyer on CSS2 was July 2002....is this still relevant given the presumbly improvements to these methodologies, or has it perhaps been reprinted?

The "More Erric Meyer on CSS" was published in June of last year.

Ian
0
 
mreuringCommented:
CSS has not changed much since round about it's publish date, which was before 2000. The implementation has changed a lot, but has been quite inremarkable for the last few years. Now it's more in the hands of the developers to learn how to use the respective languages.
Eric Meyer is one of the first pioneers and has made quite a mark on the business, hence I recommended his books. I don't think all that many truly exciting things have happend the last 3 years. But, the first book is 'only' comprised of somewhat basic skills, you may want to skip ahead to the second title right away.
The most important thing to learn from these books is the way you think about styling through CSS and at the same time having some samples at hand to peek at if you're in a rut.
0
 
mreuringCommented:
I'm sorry, I overlooked your comment before the books one.
If you have resolved your footer issue to satisfaction you could accep some comments and open a new question to resolve some of the new issues. But, if you feel your current problems are a residual effect and belong to this thread keep going on this one, but post a link to the newer, not entirally positioned version. At least then, we can have a good look at it and hopefully point out the sore spots.
0
 
IanternetAuthor Commented:
I will order these books post haste.

However in the meantime I am still stuck with this problem after adding the doctype etc.

Eg, if you look above in the css files, you will see such things as HBYorkLogo, which was positioned absolutely within my HeaderBox, and eg the NavBar which was positioned relative under the HeaderBox....once I added the doctype the rendering of these all went to pot.

I removed the positioning elements and this made no difference....so I am left in a bit of a quandry at the moment in how to deal with these elements and all the similar ones.

I am tempted to remove the doctype reference to resolve my immediate problem, but in addition I am reluctant as I would like to try and make my website as standards compliant as possible.

Regards

Ian
0
 
IanternetAuthor Commented:
Sorry, slightly misleading, in that I cannot post a link as I have not actually published the site, as it looked so awful after the doctype insertion!

Ian
0
 
COBOLdinosaurCommented:
Ian, if you are up against a deadline,  publish it without the doctype, and then work on it with the doctype and re-publish.  If you you try and rush it, you might end up creating problems that will show up latter. With CSS it is always a good idea to give yourself some experiment time because you may run across something special as you play with it and without the experiment time you may miss some unique signature item that makes the site stand out.

I am pretty dogmatic about using standards; but when it comes to delivering product on time, my pragmatic side kicks in and I tend to do what has to be done to get to the party on time.

Cd&
0
 
mreuringCommented:
As to the problems you called upon you adding the doctype, they seemed more serious than they are. You have quite a few measurements without a unit-type. For instance:
#HBYorkLogo     {position:absolute; left: 20}
Should read:
#HBYorkLogo     {position:absolute; left: 20px}

Fix all the occurances of height, width, top and left, you'll soon see miracles happen ;)

FYI, In quirksmode the unit is implied as px when not supplied, standards-mode is not so forgiving.

For now, stick with Cd&'s plan :)
0
 
IanternetAuthor Commented:
Ok....just one more clarification before I start dishing the points out :-)

One of my queries above was my confusion with when to use the position reference...I thought from the references above, that this should not be used!  However, have I got things a little confused?  Is it a case that you should not use the position tag when placing containers, but should use it to position items within a container?

Ian
0
 
COBOLdinosaurCommented:
I prefer not to use position at all for layout.  You should be able to get things where you want them with padding, margin, text-align and float, somtimes with fine a adjustment using line-height or text-indent.

When I do use position it is almost always as as child of the body, and almost alway absolute. In that case the elemnts with the property applied are layers that I am doing show/hide effects or moving them around dynamically.  Inside a container about the only time I use position if for irregular offsets or to align content to background, and those will almost alway be with relative.  

Position would be of more value to me if fixed worked cross-browser of if there was a way to specify relative to an element other than the parent.

Cd&
0
 
mreuringCommented:
Hmmm, positioning using position: absolute is written in stone, more or less. This has a tendency to break down in unexpected situations. Doesn't meen it can never be used, but caution is required. Using position seems like the easy way out, but in the end has proven not to be so. Floats have their own quirks off course, but they tend to layout more forgiving, and with the web you need a little breathing room as you are never in control of the surounding parameters.
For instance, your header is a nice small scale example of positioning where you are relatively safe. Still I would have chosen differently, using less html and more css allowing for easier layout changes at the same time:

#HeaderBox{
background: url(images/YorkLogo.gif) no-repeat top left;
width: 400px;
height: 75px;
padding: 35px 0 0 20px; /*Instead of needing the absolute positioning. You could even prevent the text from writing through the left-side of the image-text.*/
font-size:11pt;
font-weight:bold;
color:#333399
}
#HBYorkLogo {/*No need for this element*/}
#HBEGU     {/*No need for this element*/}

<h1 id="HeaderBox">Epidemiology & Genetics Unit</h1>

It's all about getting used to the idea of toying with your layouts :)
0
 
IanternetAuthor Commented:
Hmmm, the addition of the doctype seems to have caused a problem with the solution suggested by GoofyDawg that I have accepted above.  The "container" now does not display below the headerbox.

However, I will work on this once I have a bit more info and have read the books.  In the meantime I have taken CD's advice and implemented without the doctype.  For your reference, you can see the site as is at http://www.egu.york.ac.uk

Can I take this opportunity to thank GoofyDawy, COBOLdinosaur and Martin (mreuring).  I really appreciate your inputs and patience in helping me to resolve this problem.  I have accepted GoofyDawg's answer as this was the particular one I have actually implemented, but I do recognise the help and time put in by CD and Martin as well.  I fully intended to split some points with you all or allocate some new, but when I came to accept the solution, I could not see how to do this!

Could a moderator help with this?

Once again, thanks to you all.

Cheers

Ian
0
 
GoofyDawgCommented:
Ian,

I'm using the doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

in that same page, and it operates just fine. Not sure why it's breaking.

Also, in response to Martin's simplification, I actually started out doing it this way, and ran into problems with vertical alignment at the top, which is why I encased content and rightrail in a container. However, what I didn't test was the order of the divs in the HTML. Turns out you have to declare the divs before the content area, and everything should work out fine.

GoofyDawg
0
 
IanternetAuthor Commented:
Thanks...I knew I had seen the split points somewhere :-)

I have accepted GD's main answer with 350 and allocated 75 almost arbitrarily to CD and Martin as I wish to acknowledge their help.

Regards

Ian

PS If you are interested in a particular topic, is there any way of being notified of new postings?
0
 
COBOLdinosaurCommented:
Long time expert ameba has a program available for free download that does that an a lot more:

http://www.angelfire.com/ma4/qpost/

Cd&
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 17
  • 13
  • 7
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now