15 replies [Last post]
matthewmurray
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-10-13
Posts: 7
Points: 0

Hello

We're just about to launch a new website using XHTML / CSS. The design was tested in IE, Firefox & Opera with no major problems. Our content management system providers have taken our design and stylesheets and incorporated it into their system.

However... on some pages when you look at them, the footer doesn't appear at the bottom of the page, it appears in the middle of the page and cuts off the rest of the content. It only appears sometimes on some pages. Any ideas? Once it caches, it doesn't seem to happen again.

The address is http://194.202.218.49/

It seems to happen most on the category homepages, i.e. the list of categories down the left hand side.

Here is the structure for the pages and the CSS for one of the sections. (When they took our CSS they chopped it up - one stylesheet for each section)

Any help greatly appreciated!

<div id="page">
<!-- items in the header -->
<div id="topmenu"> </div>
<div id="topimage"> </div>

<div id="navigation">
<div id="navlinks"> </div>
<div id="navigationform"> </div>
</div>

<!--left hand side menu for main navigation -->
<div id="leftmenu">
<div id="mainsections"> </div>
<div id="address"> </div>
</div>

<!-- central content section -->
<div id="content">
<div id="breadcrumb"></div>
<div id="news"> </div>
</div>

<!-- right hand side menu -->
<div id="rightmenu">
<div id="rightfeatures"> </div>

</div>

<!-- footer container for copyright, disclaimer etc -->
<div id="footer"> </div>
</div>

BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: arial, sans-serif;
}

#page
{
width: 770px;
}

#footer {
CLEAR: both; FONT-SIZE: 70%; LINE-HEIGHT: 30px; HEIGHT: 30px; BACKGROUND: #EDBAA6; width: 770px; text-indent: 5px;
}

#content {
PADDING-RIGHT: 10px; PADDING-LEFT: 5px; FLOAT: left; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 0px; WIDTH: 426px; PADDING-TOP: 0px; voice-family: inherit
}

#leftmenu{
MARGIN: 5px 5px 10px 3px; FLOAT: left; WIDTH: 145px;
}

#rightmenu{
MARGIN: 5px 0px 0px 3px; FLOAT: right; WIDTH: 150px;
}

#sectionpages {
MARGIN-TOP: 5px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 10px; WIDTH: 150px; PADDING-TOP: 0px; voice-family: inherit; BORDER: #000 1px solid; margin-bottom: 10px;
}

#seealso, #rightfeatures {
MARGIN-TOP: 5px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 5px; WIDTH: 150px; PADDING-TOP: 0px; voice-family: inherit; BORDER: #000 1px solid; margin-bottom: 10px;
}

drhowarddrfine
Offline
Leader
Last seen: 11 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

footer behaving badly!

I don't see the problem on any of them.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

footer behaving badly!

I didn't see the problem either.

What browser(Drunk?
Which pages?

And if its intermittent, under what circumstances can you get the problem to appear?

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 46 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

footer behaving badly!

:? I checked all pages also. I didn't see any issues...which pages specifically are you having problems with?

- r

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

footer behaving badly!

Hi

The problem occurs from time to time. The footer isn't always clearing the columns. Well, ichy fingers I guess:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Title Here</title>
<style type="text/css" media="screen">
/*** The contents of this file were (ostensibly) written by Owen Briggs
@ www.thenoodleincident.com, and any Copyright rests with him. No
credit for the work that has gone into researching the use of font
sizes and styles rests with ClevaTreva Designs. 100% Kudos to Owen.
This is an EDITED version of the original! You will want to play with
these settings to make your own style for fonts and color other
bits. ***/

body {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:76%; /*** Don't change this setting. Make all other
font-sizes in ems ***/
	color:#000000;
	}
a {
	text-decoration: none;
	font-weight: bold;
	outline: none;
	}
a:visited {
	}
a:active {
	}
a:hover {
	text-decoration: underline;
	}
strong, b {
	font-weight: bold;
	}
hr {
	margin: 0px; /* fixes xhtml N6 bug where the hr sits to the left*/
	color: #ccc; /* for ie */
	background-color: #ccc; /* for everyone else */
	height: 1px;
	}
p {
	font-size: 1.3em;
	line-height: 1.1em;
	margin-top: 1.5em;
	margin-bottom: 1.5em; 
	}
li {
	font-size: 1.3em;
	line-height: 1.1em;
	margin-top: 0.3em;
	margin-bottom: 0.2em; 
	}
ul {
	margin-top: 1.0em;
	margin-bottom: 1.0em; 
	}
td {
	font-size: 1.3em;
	}
hr {
	margin-top: 2.0em;
	margin-bottom: 2.0em;
	}
img {
	border: 0;
	}
/*** the following styles and notes are (c) Copyright
Big John @ www.positioniseverything.net ***/
div,p{margin:0}

.italics-test, .italics-test-side {
font-style: italic; 
text-align: justify; 
}

/***
The following fixes prevent justified italic text
from destroying the layout in IE/win. The problem
is that those properties together make IE force the
container wider, which in this type of floated layout
causes a float drop.
Pre-IE6 gets "width: 100%" and "overflow: hidden",
while IE6 gets "width: auto" and "overflow: visible,
which is the default, but explicitly stating it seems
to keep IE6 happy. IE6 also needs to see the
"height: 1%" to give it some kind of box dimension.
Browser coddling we call it. Finally, Bruno Fassino
found that "word-wrap: break-word;" disarranged the
justified text in IE5.5 and 6, so it is defaulted to
"normal" for this text.
If you don't need justified and italicized text then
forget all these fixes.
Although, ClevaTreva adds, I have seen some odd
behavior with normal justified text in IE, so
this may be worth remembering.
***/

/* \*/
* html .italics-test, * html .italics-test-side {
overflow: hidden;
width: 100%;
o\verflow: visible;
w\idth: auto;
he\ight: 1px;
word-wrap: normal;
}
/* */
</style>
<style type="text/css" media="screen">
html,body{margin:0;padding:0;border:0}
#fullheightcontainer{position:relative}
#wrapper{min-height:100%;overflow:auto}
#outer{z-index:1;position:relative;overflow:auto}
*html #wrapper,* html #outer{overflow:visible}
#float-wrap{margin-right:-1px;float:left;overflow:visible}
#left{float:left;position:relative}
#right{float:left;margin-left:-1px;position:relative}
/* \*/
html,body,#fullheightcontainer,#wrapper,* html #wrapper,#outer{height:100%}
* html #right{margin-left:0px;margin-right:-500px}
* html #left{margin-right:-3px}
#center{margin-left:-1px}
/* */
#center{float:right}
#footer{z-index:1;clear: both;text-align:center;position:absolute;overflow:hidden}
#header{z-index:1;position:absolute;top:0px;overflow:hidden}
#subheader1,#subheader2,#subheader3,#subheader4,#subheader5,#subfooter1,#subfooter2,#subfooter3,#subfooter4{text-align:center}
#clearheadercenter,#clearheaderleft,#clearheaderright,#clearfootercenter,#clearfooterleft,#clearfooterright,.bottomtopmargin,.subrow{overflow:hidden}
</style>
<style type="text/css">
body {
		min-width: 770px;
}
#fullheightcontainer {
		text-align: left;
		width: 770px;
}
#wrapp\65	r{height:auto;}
#outer{margin-left:160px;width:455px;background:#FFFFFF;}
#float-wrap{width:455px;}
#left{width:161px;margin-left:-160px;}
*>html #left{width:160px;}
#container-left{width:160px;}
#right{width:157px;margin-right:-155px;}
/* \*/
* html #right{width:156px;mar\gin-right:-156px;}
/* Above style hidden from Mac IE */
#container-right{
/* \*/
width:155px;
/* Above hidden from IE-Mac */
margin-left:2px;}
/* \*/
* html #container-right{fl\oat:right;margin-left:1px;mar\gin-left:0px;}
/* Above style hidden from Mac IE */
#center{width:455px;}
#clearheadercenter{height:125px}
#clearheaderleft{height:125px}
#clearheaderright{height:125px}
#clearfootercenter{height:30px}
#clearfooterleft{height:30px}
#clearfooterright{height:30px}
#footer{z-index:1;position:absolute;clear: both;width:770px;height:30px;overflow:hidden;margin-top:-30px;}
#subfooter1{background:#EEBAA6;text-align:center;height:30px;}
#header{width:770px;height:125px;}
#subheader1{background:#E24F95;text-align:center;height:66px;}
#subheader2{background:#FFFFFF;text-align:center;height:4px;}
#subheader3{background:#F3C9DA;text-align:center;height:55px;}
</style>
<!--[if IE]>
<style type="text/css">#outer{word-wrap:break-word;}</style>
<![endif]-->
</head>
<body>
<div id="fullheightcontainer">
<div id="wrapper">
<div id="outer">
<div id="float-wrap">
<div id="center">
<div id="clearheadercenter"></div>
<p>This is the<br />Center<br /></p>
<div id="clearfootercenter"></div>
</div>
<div id="left">
<div id="clearheaderleft"></div>
<div id="container-left"><p>This is the Left Sidebar<br /></p></div>
<div id="clearfooterleft"></div>
</div>
</div>
<div id="right">
<div id="clearheaderright"></div>
<div id="container-right"><p>This is the Right Sidebar<br /></p></div>
<div id="clearfooterright"></div>
</div>
</div>
</div>
<div id="header">
<div id="subheader1" class="subrow"><p>This is Sub-Header #1 (with Fixed Height)</p></div>
<div id="subheader2" class="subrow"><p>&nbsp;</p></div>
<div id="subheader3" class="subrow"><p>This is Sub-Header #3 (with Fixed Height)</p></div>
</div>
<div id="footer">
<div id="subfooter1" class="subrow"><p>This is Sub-Footer #1 (with Fixed Height)</p></div>
</div>
</div>
</body>
</html>

It's full of comments (preceded by /***) That you can remove. Those starting with /* are part of the hacks.

NOTE: NO clear div's. WOW! How'd he do that? With all those floats!

Trevor

PS: Can anybody copy this and try it in Safari to see if re-sizing the window the footer beahves properly?

matthewmurray
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-10-13
Posts: 7
Points: 0

footer behaving badly!

I presume the last post was a fix for my dilemna, but it looks like we would have to make substantial changes to the structure of the site. Sad Is there a fix I could make to my existing stylesheet?

The problem was occurring in IE6 on the category home pages. I've attached a screen shot of the problem on the business home page. I've cleared my cache both at home and work and I must admit it doesn't seem to be happening since I've added items into the rightfeatures area (right hand column).

Other pages it was doing it on included the Community and living home page and the Social care and health page. The transport and streets home page still has no rightfeatures content but it doesn't seem to be doing it.

If you right click on the banner image and click properties it replicates the problem! Weird huh?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

footer behaving badly!

Hi

It still does it for me from time to time, even if I clear the cache.

Yes, the code did need a re-think.

It took me a few minutes to knock that up from one I did before.

You would only need to cut and paste your content.

Trevor

matthewmurray
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-10-13
Posts: 7
Points: 0

footer behaving badly!

what pages is it still doing it on? it won't do it for me anymore at all.... i've just tried a friend's machine at work and it's okay. which is a good thing and a bad thing really...

matthewmurray
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-10-13
Posts: 7
Points: 0

footer behaving badly!

i've just checked on 2 different machines here at work, one was fine, on the other it only happened on the policing and public safety homepage, it did it for a second on another page but then the footer dropped down into it's rightful place...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

footer behaving badly!

IE seems to have trouble determining the height of the left hand menu - at least intermitently. On several pages the footer appeared initially over the top of the left menu (actually at the level of the bottom of the right menu) and after a moment jumped down to the bottom of the page revealing all of the left menu.

Only on one page did it stick in the wrong position - Transport & Streets. Even then after a couple of refreshes it got the hang of that page and stopped doing it.

Trying on another PC, IE again had problems until it "learned" the page. I suspect you can make the problem happen by visiting one of the problem pages with an IE that doesn't have that page cached.

IE is wierd with its element height calculations, my guess is its not calculating the height of #page correctly. The problem should* go away if you move the footer inside #page or you clear the final <p>&nbsp;</p> element after the closing of #rightmenu and immediately prior to the closing of #page.

*It went away for me in a quick experiment with a snapshot of one of your pages.

matthewmurray
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-10-13
Posts: 7
Points: 0

footer behaving badly!

Hi Chris

Thanks for your reply.

Yes, sometimes when it happens it's only for a split second, other times it's stationary.

I wondered what you were talking about when you mentioned the
<p>&nbsp;</p> - that shouldn't be there, it wasn't in my original code. It's been put in when they put my code into the content management templates. This problem never happened to me before this. Do you think if I get that rogue <p>&nbsp;</p> deleted it will solve the problem?

Cheers

Matt

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

footer behaving badly!

matthewmurray wrote:
Do you think if I get that rogue <p>&nbsp;</p> deleted it will solve the problem?

No, but its easy enough to try - take a snapshot of a problem page with view source, drop it on a server with that line removed and see what happens.

Then put it back as

<p style="clear:both">&nbsp;</p>

and try again. Wink

matthewmurray
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-10-13
Posts: 7
Points: 0

footer behaving badly!

I copied the code for the Transport and streets and the Community and living homepages and made 3 versions of each, pointing towards 194.202.218.49 to pick up the stylesheets.

- one as is

http://dev.walsall.gov.uk/ts.htm
http://dev.walsall.gov.uk/cl.htm

- one with the code <p style="clear:both">&nbsp;</p>

http://dev.walsall.gov.uk/ts2.htm
http://dev.walsall.gov.uk/cl2.htm

- one with the paragraph taken out all together

http://dev.walsall.gov.uk/ts3.htm
http://dev.walsall.gov.uk/cl3.htm

I refreshed each page 50 times and here's what happened.

- first version of the page, for both T&S and C&L the footer appeared in the wrong place (just under the right menu end) twice during the first 10 refreshes
- no problems during 50 refreshes
- no problems during 50 refreshes

I'm going to request the the rogue <p>&nbsp;</p> gets taken out!

Thanks for your help Chris. Hopefully this will fix the problem. Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

footer behaving badly!

If it works it works.

However, before you commit you may want to try these two links

#1 - with & cleared
#2 - without

On IE6/W2K, #1 never causes a problem. #2 always causes a problem. On the same machine, none of your 6 pages caused it a problem.

On IE6/XPsp2, I can't get the problem to occur any more on any page.

(I only changed the internal links to pick up the CSS, not any of the images).

matthewmurray
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-10-13
Posts: 7
Points: 0

footer behaving badly!

Hmm that's interesting!!! I can't believe that second page.....

Will suggest your method instead just to be sure!!

Thanks for all your help Chris! Laughing out loud

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

footer behaving badly!

There is an alternative. Shift the footer into #page and remove that extra <p> tag. The footer is already being cleared via its style rule.