CSS Floating footer problem

Having a couple of problems with a floating footer. The CSS involved is right on the edge of my understanding so help is appreciated.

Got two problems on this site I’m building, firstly, if I include the IE6 hack below, then the scroll bar vanishes so content below the footer is effectively hidden unless you resize the browser…

<!--[if lte IE 6]>
<style type="text/css">
body {height:100%; overflow-y:auto;}
html {overflow-x:auto; overflow-y:hidden;}
* html .footer {position:absolute;}
</style>
<![endif]-->

If I take out the hack it won’t work in IE6 but the scroll bar now appears but it doesn’t appear until the bottom of the browser window has moved well past the bottom of the main container which doesn’t look very good.

Any clues?

I wouldn’t bother to much about IE6 if I was you, see W3C stats http://www.w3counter.com/globalstats.php

Are they running behind a proxy? Or perhaps have the site cached? It looks ok (at least in IETester) on any pages I tried, and I don’t see anything which should cause that behavior (and I used to get that behavior all the time, so I was checking for my gotchas), but perhaps Paul will see something else which might cause the issue.

Another thought is to ensure they have flash installed if those are the pages causing the issue. If they don’t, that could potentially cause an issue.

Still can’t recreate it myself so no screenshot, just imagine the footer logos bar sitting half way up the page, apparantly that’s what they’re seeing.

The site is here, libya, libya123.

The page validates to HTML 4.01 Strict.

Removed the unecessary rules thanks.

See above and thanks for your help, this is proving fairly frustrating

Didn’t see that in his CSS or the markup…

Though yeah, fixed doesn’t work right cross browser and is in general too unpredictable to trust.

Ok, so he wants that bottom image fixed at the bottom - I’ll keep that in mind when I’m on my workstation later and belt out a demo.

I’m still trying to figure out what’s meant by the footer, since it seems to be statically positioned in every browser here…

Are you referring to a 100% min-height layout? If so I see nothing in the code to actually do that…

Ok, coming from you I know there probably isn’t another option worth exploring and that’s enough for me to agree and give IE6 a static footer. Great, one headache gone.

Gotcha, only I added it to the bottom links div for the same effect but without creating a big white space under my main content div.

Gone now. I never normally use conditional comments so I have to admit I didn’t even know where they’re supposed to go. My normal philosophy is to avoid hacks and that if I can’t find a way to do it that works for all browsers then give up and try something else. Client requirements and a very tight schedule dictated otherwise this time.

Thanks for your help.

If that’s the case then you should listen to deathshadow60, but like Paul O’B already mentioned

You can get it to work in IE6 but requires a lot of hacks and ultimately breaks somewhere along the line.

There is a lot in your CSS that need attention. In my opinion it’s not a good idea to leave your validation to the last point, if you check it regularly, you save yourself a lot of work at the end.

With all that said and coming back to the actual post, I have to agree with Paul again

With all the hacks that that entails I’d be inclined to just let Ie6 have a static footer following the content and then let all others get the fixed footer. Or instead use a sticky footer (see css faq) which is more reliable but does need to be a set height.

Thanks for all the replies guys, I should point out that I’m aware that the code contains validation errors etc but that’s usually the last thing I deal with or I end up doing it more than once.

See above

It’s not my code, I just cut and pasted it from somewhere because the client requested something I’ve never done but figured I’d be able to work out. I’m asking for help to work it out.

Thanks I’ll have a look at it.

That code is also borrowed because I don’t have the required CSS knowledge to build a dropdown menu from scratch that’s cross browser compatible because I normally stay clear of them, I don’t like them because I think theyr’e poor Usability. It has to work in IE6 though and I assumed that’s what all the conditional comments were doing, building a table just for IE6 because it doesn’t liike the positional rules. Ugly but necessary unless you know a better way?

How’s that?

Ok, that’s just the way I’ve done it for years, never thought to change it but will be doing it the way you’ve suggested from now on. Don’t really see what difference it makes though.

Yeah, I’ll sort out the margin doubling bug later on, to be honest I think you may be missing the point of this thread. I didn’t ask for a general critique and you’re coming in way before I usually tidy this sort of thing up, I asked specifically for help with the floating footer.

Like I said, never used one before but that’s what I understand them to be called. I’ve commented out the CSS that controls it so that I can get on with building content pages without it getting in the way, maybe you looked at it after I did that. I believe it’s called ‘floating’ not because it’s floated but because it stays at the bottom of the browser window no matter how you resize it and floats over the page content. My problem is that it’s doing exactly that but without a scroll bar appearing.

Ok. One of the problems with being self employed is that I don’t have peers to discuss this sort of thing with and tend to only encounter new developments when they directly affect me (yes I could spend a lot of time reading but there’s only so much time) so I’m happy for you to point out my errors, I’m learning something.

I have reasons for needing it to be IE6 compatible.

Hi,

Fixed footers are really only useful for small amounts of content. In your example when the window is closed smaller than the width of the layout then any part of the footer that sticks out of the side of the viewport is unobtainable because fixed elements do not scroll.

You can get it to work in IE6 but requires a lot of hacks and ultimately breaks somewhere along the line. You would need to wrap an extra wrapper around the page just for IE6 and set its width and height to 100% and overflow:auto to provide the scrollbars that you removed from html and body (or should have removed from html and body). Then you would need to remove the appearance styles from #footer and place them on an inner element to the footer that stays about 14px clear of the right edge otherwise it sits on top of the vertical scrollbar.

You could add a fixed footer for ie6 using expressions and not have to change the html at all but its’ still a little quirky and very ugly:

http://www.pmob.co.uk/search-this/fixed4.htm

With all the hacks that that entails I’d be inclined to just let Ie6 have a static footer following the content and then let all others get the fixed footer. Or instead use a sticky footer (see css faq) which is more reliable but does need to be a set height.

Currently you do need to add some padding-bottom to your page wrapper to equal the height of the footer otherwise you won’t be able to scroll the content clear and it will be hidden under the footer on short pages.


#mainWrapper {
    padding-bottom:110px
}

I also note that you have included the conditional comments inside the css file which is invalid. Conditional comments are html and must go in the head of the html page.

Understand what you say. :slight_smile: I saw the markup as well and obviously there are a lot of repairs involved and then maybe it’s better to leave the hacks for what it is. About those 300 million people! Am I wrong or is this a site for UK located businesses who want to do business in Vietnam? I know quite a lot of business people in the UK and believe me none of them is running 98 or ME

I assumed that we were talking about the code that was commented out Jason.


.footer {
    [B]    position: fixed;[/B]
        bottom: 0; 
        left: 0;
        z-index: 9999;
        background: #fff;
        width: 100&#37;;
        margin: 0;
        padding: 5px;
        text-align:center;
        height:72px
    }

  1. Clean up your validation errors. Some of it is silly stuff like the xmlns attribute on a non-XML doctype (doh), but the use of deprecated elements and XML standalones could be causing issues…

  2. I have a rule, if you have to resort to bloating out the markup with IE conditional comments, you screwed up someplace.

  3. As to screwing up, it’s quite evident with all the conditional comment nonsense in the menu. Do yourself a favor, forget that technique even exists since that was created as a proof that it could be done, NOT as a deployable method – and grab yourself something like peterned’s whatever:hover

  1. if you are using classes like “largerGreyText” you’ve missed the point of using CSS in the first place – you might as well go back to using HTML 3.2

  2. using the style tag to @import your sheet is not only sloppy, there’s no reason to do that now that we could give a flying fig about Netscape 4. The element you want is called “LINK” and you might want to look at it’s “MEDIA” attribute.

  3. No resent in your stylesheet is probably causing headaches, lack of condensed properties makes the CSS bigger than need be, but more importantly floats with margins without display:inline (double margin fix), faulty menu code, clearing div’s, invalid code in the CSS, MARKUP in the CSS… It’s not surprising you’re having issues.

Though I can’t see any issues with a ‘floating footer’ since the footer isn’t floated… or positioned… Not sure what you even mean by that.

As I say a good deal, pitch it and start over.

First order of business would be fixing your markup… Which there is little reason for it to be more than:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	International Market Advisor
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		<small>Doing Business In</small>
		Vietnam
		<span></span>
	</h1>
	
	<ul id="mainMenu">
		<li>
			<a href="index.html">Home</a>
		</li><li>
			<a href="welcome.html">welcome</a>
			<ul>					
				<li><a href="foreword.html" >Ambassadors Foreword</a></li>
				<li><a href="director.html" >Director of Trade & Investment Introduction</a></li>
			</ul>
		</li><li>
			<a href="guide.html">Guide</a>
			<ul>
				<li><a href="intro.html">Introduction</a></li>
				<li><a href="preparing-to-export-to-vietnam.html" >Preparing to export to Vietnam</a></li>					
				<li><a href="how-to-do-business-in-vietnam.html" >How to do business in Vietnam</a></li>
				<li><a href="business-etiquette-languages-culture.html" >Business etiquette, languages & culture</a></li>
				<li><a href="what-are-the-challenges.html" >What are the challenges</a></li>
				<li><a href="contacts.html">Contacts</a></li>
				<li><a href="resources.html" >Resources / Useful links</a></li>
			</ul>
		</li><li>
			<a href="support.html">Support</a>
			<ul>
				<li><a href="uk-trade-and-investment.html" >UK Trade & Investment Profile</a></li>
				<li><a href="british-embassy-in-vietnam.html" >British Embassy in Vietnam Profile</a></li>
				<li><a href="british-business-group-vietnam.html" >British Business Group Vietnam Profile</a></li>
			</ul>
		</li><li>
			<a href="sponsor-profiles.html">Sponsor profiles</a>
			<ul>
				<li><a href="acb-profile.html">A.C.B Profile</a></li>
				<li><a href="bp-profile.html">B.P Profile</a></li>
				<li><a href="diageo-profile.html">Diageo Profile</a></li>
				<li><a href="grant-thornton-profile.html">Grant Thornton Profile</a></li>
				<li><a href="h2b-profile.html">H2B Profile</a></li>
				<li><a href="hk-profie.html">H.K Profile</a></li>
				<li><a href="international-power-profile.html">International Power Profile</a></li>
				<li><a href="standard-chartered.html">Standard Chartered Bank Profile</a></li>
			</ul>
		</li><li>
			<a href="ima-contact.html">IMA / Contact</a>
			<ul>
				<li><a href="about-ima.html" >About IMA</a></li>
				<li><a href="acknowledgements.html" >Acknowledgements</a></li>
			</ul>
		</li>
	</ul>
	
	<div class="fauxColumns">
	
		<div class="narrowColumn">
			<h2><span class="welcome">Welcome</span> title here</h2>
			<p class="standOut">
				Are you a member of a UK company wishing to export overseas?
			</p><p>
				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
			</p><p>
				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 
			</p>
		<!-- .narrowColumn --></div>
		
		<div class="narrowColumn">
			<h2><span class="ambassador">Ambassador's</span>Foreword</h2>
			<img
				src="assets/ambassador.jpg"
				class="leadingPlate"
				alt="Uk Ambassador"
			/>
			<p>
				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 
			</p>
			<h3>Subsection title or header here</h3>
			<p>
				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 
			</p>
		<!-- .narrowColumn --></div>
		
		<div class="wideColumn">
			<h2>Spotlight on Ho Chi Minh City</h2>
			<object
				type="application/x-shockwave-flash"
				data="http://www.youtube.com/v/0LM_fzU1Vgo&amp;hl=en_GB&amp;fs=1"
				width="345"
				height="208"
			>
				<param name="movie" value="http://www.youtube.com/v/0LM_fzU1Vgo&amp;hl=en_GB&amp;fs=1" />
				<param name="allowFullScreen" value="true" />
				<param name="allowscriptaccess" value="always" />
				<!-- alternative content should go here -->
			</object>
		<!-- .wideColumn --></div>
		
	<!-- .fauxColumns --></div>
	
	<div id="footer">
		<ul>
			<li><a href="#">Terms & Conditions</a> |</li>
			<li><a href="#">Site map</a> |</li>
			<li><a href="#">Privacy</a></li>
		</ul>
		<img src="assets/footer-logos.jpg" alt="Sponsor logos" />
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div> 

</body></html>

Which pitches about 1k of your markup in the trash as everything else belongs in the CSS. I have time later I’ll write up said CSS to show you what I mean.

Oh, and @donboe – there’s no reason to not support IE6 and if you know what you are doing there’s little to no extra effort involved… given there is no IE7/newer for the folks still running 98/ME (which is like 2/3rds my neighbors) and it’s still around 10-15% of the browsers on average - do you really want to tell 300 million people to go shtup themselves?

clean rules with no strange complications in the selectors: one reason ie conditional is not so nonsense.

i’m sure i can find others :slight_smile:

Can you put up a link to the site again and I’ll take a look in the morning?

If you can’t re-create the problem then it’s going to be hard to debug. It would be good if you could get a screenshot of when its broken which may give us a clue.

This problem has come back to haunt me, I can’t recreate it but I’m informed that the footer is still getting stuck half way up pages in IE6 despite the fact that I’ve told IE6 not to float the stupid footer anyway, it’s supposed to stay at the bottom.

Is something wrong with this code? All the pages have the IE6 specific conditional.

<!–[if IE 6]>
<link rel=“stylesheet” type=“text/css” href=“ie6.css” />
<![endif]–>

The IE6 style sheet only has the following in it:

.footer {
    width:100%;
    height:86px;
    background-color:#ffffff;
    text-align:center;
    border: 1px solid #cccccc;
    margin-top:-90px;
    clear:both;
    }

And the main style sheet has this:

 body{
  margin:0;
  padding:0 0 <length> 0;
 }
 div.footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:86px;
  background-color:#ffffff;
  text-align:center;
  border: 1px solid #CCCCCC;
 }

Why would the footer be moving from the bottom of the page? I know I’m doing something dumb, what is it?

PM’d you the password, forgot about that.

There’s a correction anyway, it doens’t seem to happening just on pages with Flash elements after all, I’m simply at a loss even for a direction to go in with this one.

Problem.

It turns out that the government departement that needs to sign off on my client’s site uses IE6 and although most of the time the footer stays fixed below the page content in IE6 (and floats nicely for all the other browsers) it’s sometime’s appearing halfway up the page for them and they’re not happy about that.

Is there not a simple cross browser compatible floating footer?? I’m at a point where I don’t care how it works, I’ll use JS or anything, I bludgeon it, conditional comment it, make it crude and ugly and hacked to death or whatever it takes but I just want it to sodding work.

Yes I think it’s best for now :slight_smile:

The problem is that the IE fixed footer technique you were using is not quite right and there are conflicts. You would need one of my old methods such as this. However removing the scrollbar form the html and body elements is a dangerous thing and when content stretches the page wide you lose the ability to use the vertical scrollbar unless you first horizontally scroll to find it.

EDIT: Just saw your post Paul. Funnily enough that’s what I’ve done, removed those styles and in the meantime I’ve set up the site to deliver a seperate style sheet to IE6 to make the footer static and below the main content Divs rather than faff about with the main style sheet. Not ideal but it works…

Thanks for your time, much appreciated.