problems.
A bit back I decided it was time to leap into the all new sparkling html5 and css3. Think it was a move to a browser that can handle the new markup – from the old Mozilla based Flock to Firefox, which of course is still Mozilla based but was a few versions on from the base of Flock and then onto Chrome.
So which site to go with, after a few experiments for this place I decided that Rauhouse’s site could do with a bit of spit and polish, nothing drastic design wise and would be easier. The existing markup was pretty much valid xhtml 1.1 so it was easy to replace the old </p>
<div> with the various new elements – </p>
<header>
<footer>
<section>
<nav>
<article> etc. Does make things easier to read and know exactly where you are. Also of course means workarounds for IE, so the shiv is added.
Now one of the first problems I came across was also present in the previous version of the site so nothing to do with the new markup or style. It was the problem of using hash links in a page when there’s a static header at the top of a page.
So the style for the header includes position:fixed; and is about 80px heigh. So when the page contains internal hash links – <a href="#track-list">Track Listing</a> – and they are clicked the page scrolls down so the block the link corresponds to – </p>
<section id="track-list"> – is visible. Unfortunately the way it works is the page scrolls down until you can see the maximum amount of the section so basically until the top of the section is as far up the window as possible and so a number of times the top of the section is at the top of the window and thus underneath the header.
Not ideal as you can’t now see the first 80px of the section.
I racked my brain for a while previously when I came up with the design and again when redoing it how to get over this. First idea is to give the section a top padding of about 80px but that leaves a whacking big space on the page if you just scroll down manually. Second could I give the section the padding but only when the corresponding hash link is clicked, could work but still a bit of an ugly workaround. Third, move the id from the section to somewhere at least 80px higher on the page, very ugly.
And then when it was really bugging me what pops up but the perfect solution in my feed reader. A fancier clean html/css method to achieve the perfect results. Using :before for the sections in the css.
section:before {
display: block;
content: " ";
margin-top: -85px;
height: 85px;
visibility: hidden;
}
So thanks to Chris Coyier on css-tricks.com. At the bottom he points out there can be difficulties under certain circumstances which Nicolas Gallagher has addressed.
For my part the simple version above works for the main browsers for the site I’ve used it on – as you can see on any of the Solo Recording pages on Jon’s site – so perfect.