Layout glitch help

Problem:

Alternatively, view screenshot here:

The 1px red border is applied to html… As you can see, at some point html/body becomes smaller than my container div inside, causing things to mess up

I didn’t think that was possible?

Apologies if the code is a bit messy at the time you view it, I’ve been hacking things around in frustration. Have been trying to combine sticky footer / 100% high / faux columns and such, and didn’t have a clue what I was doing half the time :lol:

Open to criticism, tips or suggestions on better ways

If you set the background-attachment on html to fixed rather than scroll, it will remain in the same position as the page moves over the top of it - that will solve the problem of the white gap at the bottom of the page.

The 1px red border is applied to html… As you can see, at some point html/body becomes smaller than my container div inside, causing things to mess up

I didn’t think that was possible?

As a rule of thumb you should not apply any rules to the html element apart from removing margin and padding. When you apply a background image to the body it gets propagated to the html element anyway. The problem in your case is that you have set the html element to 100% for your sticky footer which means that the image will only stretch as far as the initial viewport. It will not continue when content scrolls because the html element is only 100% high and no bigger.

This doesn’t happen when you apply the image to the body element and use height:100% though which is why I say avoid using html for images. Of course that means you have to nest other elements for your 100% high images and that is a problem because effectively you can only ever have two 100% high images. One on the body and then one n ethe first element in the page which is set to min-weight100% which allows it to grow.

However, Stevie’s suggestion of using a fixed background-attachment property for the html element should hold the image in place and do what you want as far as I can tell.

You do have issues with the sticky footer technique you are using which won’t work properly in ie6, is broken in Ie7 and is broken in opera. See the CSS faq which contains the only fully working sticky footer for all browsers.

As a rule of thumb I avoid setting anything on HTML in the first place – it’s too inconsistent in behavior cross browser… I’d get rid of that first. It’s not worth the extra code or headaches which is why you do NOT see a lot of websites bothering to do that, and the ones that do usually end up with broken layouts for somebody!

Second, fixed footers generally are more of a headache than they’re worth – and as Paul noted the technique you are using doesn’t work anyplace but FF and Chrome (here it doesn’t even work in Safari!)

Now, I’ve never heard of Silverstripe, but researching it and the code from it’s site and examples, they are saddling you with a bunch of idiocy that just extends the problem I have with so many off the shelf CMS – it’s like the people who write these softwares aren’t qualified to write HTML or CSS.

Case in point, the resulting site of yours – HTML5 doctype so kiss off having a USEFUL validator (since HTML5 is still in draft it should NOT be used on production pages), IE conditional nonsense, tags like ‘base’ that shouldn’t ever be neccessary or used on a modern websites, Conditional BEFORE the primary CSS forcing the use of inheritance overrides and !important in the IE specific sheet, Three separate stylesheets for no good reason other than using twice as much CSS as necessary, inclusion of jquery for Christ only knows what… and that’s BEFORE we even talk about the contents of the body tag with it’s endless pointless nested DIV, improper heading orders, and presentational use of classes.

There’s a saying of mine – CSS is only as good as the markup it’s applied to – and this markup is problematic at best, overthought at worst.

None of that is likely your fault – every one of that CMS’ example pages appear to be similarly badly thought out…

Like the two div and img tag doing H1’s job, the lack of images off graceful degradation (which would add a SMALL tag, some text and a span), the triple DIV around the UL for nothing, the double div around the content area for nothing, the pointless LINK class on every A inside the menu (if they all get the same class, they don’t need a class) etc, etc…

IF I was writing that same layout, the first step would be rewriting the markup thus:


<!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
	rel="shortcut icon"
	href="/favicon.ico"
/>

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

<title>
	Testimonials - A Capellago
</title>


</head><body>

<div id="pageWrapper">

	<h1>
		A CAPELLAGO
		<small>Songs of Passion and Hope from Around the World</small>
		<span></span>
	</h1>
	
	<div id="topBanner"></div>
	
	<div id="sideBar">
		<ul id="mainMenu">
  		<li><a href="/silverstripe/">Home</a></li>
  		<li><a href="/silverstripe/upcominggigs/">Upcoming Gigs</a></li>
  		<li><a href="/silverstripe/contact-us/">Contact Us</a></li>
  		<li><a href="/silverstripe/testimonials/">Testimonials</a></li>
	 </ul>
	<!-- #sideBar --></div>
	
	<div id="content">
	
		<h2>Testimonials</h2>
		<p>
			If you have a comment about an A Capellago event, we'd love to hear from you.
		</p>
		
		<h3>Medicine Music</h3>
		<p>
			Dear Nikki and A Capellago,<br />Medicine Music was the most beautiful gesture, thankyou so very much.* It will remain with me as a perfect image of redemption - you all singing like angels in that broken building.* Somehow that speaks in the most touchingly eloquent way of human grace and resilience.* You reminded me of the miracle we are in the middle of - the amazing flowering of Christchurch at this time.* Spring welling up irrepressibly from the very same Earth that has groaned and torn under us.<br />
			Thankyou, and bless you<br />
			Your are one of Christchurch's real treasures<br />
			With love<br />
			Jane Catherine Severn
		</p><p>
			Many thanks to the choir and other supporters for the wonderful concert on saturday afternoon. It was truly magical and I felt I could let go of the grief*I have been feeling since sept 4. Thank you again, yours truly, L. S.
		</p><p>
			Hi Marissa<br />
			I was at the performance of A Capellago World Music Choir in the Cathedral a week or so ago and I wanted to tell you what a mesmerising and touching performance it was.<br />I was completely absorbed, the music was fabulous, the singing stunning, thenarrations in between just perfect.<br />
			And I absolutely loved your poem.<br />
			Well done to you all. I hope to see you all perform again.<br />
			2 questions for you:<br />
			1. How do we find out about your performances, and<br />
			2. Is your poem published, I'd love to revisit it<br />
			<br />
			Thank you so much for the inspiring afternoon<br />
			<br />
			Regards<br />
			J .T.
		</p>
		
	<!-- #content --></div>
	
<!-- #pageWrapper --></div>	
	
<div id="footer">
	A Capellago Music Choir - Christchurch, New Zealand - phone 348 1219 - email info@acapellago.co.nz
</div>

</body></html>

Which despite using the larger doctype and closing element comments still throws about a quarter of the markup in the trash. If I have time later I’ll toss together the CSS I’d use with that… though that bottom right image may end up requiring one extra DIV.

Though that’s not EXACTLY how I’d write it since you’re using breaks and double breaks on multiple paragraphs, and those testimonials should be in blockquote tags… though I suspect that’s probably the fault of the CMS not having a decent editor on the back end.

A bit of that is my fault. Haven’t done html/css for a long time so am a bit behind

Do you mind explaining your <h1> graceful degradation bit? (or a link if you have any)

Thanks everyone, will read through comments and try improve when I get home. Lot’s of good knowledge here!

*edit…

So this is the doctype to use these days?

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

Something went wrong with my edit, I was meant to add:

I remember a few years back there was some big rant about not using xhtml because it was bad for some reason? Just checked a few other sites and they are using xhtml too so I guess that cleared up

This works great, but then the watermark no longer works. Can’t get it to line up with the gradient

Spent a few hours on it tonight and which ever way I try it everything works except one thing

I seem to have to choose to not have one of the following:
sticky footer
watermark
blue gradient
orange gradient

Always 3/4 :mad:

Said “it’s not really XHTML” nonsense usually comes from people who don’t bother understanding the POINT of XHTML 1.0 – which is to bridge the gap between XML and HTML not to bring full XML functionality to HTML – that’s XHTML 1.1 and 2.0’s job. You’ll hear all this complete and utter nonsense about how IE doesn’t treat it as real XML… that’s NOT the reason to use the 1.0 doctype!

XHTML 1.0 just brings a consistent formatting structure to HTML so that a XML parser CAN handle it, while still being able to be handled by HTML parsers. The only real reason to use it is the ability for most XML parsers to handle it for things like data scraping – and the stricter formatting rules that can make formatting the code for ease of reading easier, preventing you from making many common mistakes in the first place.

As to the HTML5 doctype, you lose most of the progress STRICT gave us on not using certain elements, and there’s no legitimate reason to be using it yet. (though IMHO there is no legitimate reason to be wasting time on HTML 5 EVER – but I say the same thing about jquery and similar toolkits)

Have a look at one of my sites:

www.deathshadow.com

The span is used as the image holder to place the image over the text. This means “CSS on Images off” the end user gets the text. it means CSS off the user gets the text… Putting the H1 there is also structurally sound for your h2 – one h1 per page and all other headings should be subsections of it.

Started playing with your layout to make CSS for it – you’ve got a lot of visual elements that I generally consider ‘not viable’ for practical web design – the bottom aligned gradients on both columns for example. I’d swing a giant axe at that not even TRYING to do it – just like the fixed position footer I wouldn’t even waste my time trying for that. MAYBE the gradients could be swapped for taller images aligned top instead of bottom – but really I would throw that entire graphics idea away as non-viable/impractical.