HTML5 Creating the Header and Testing

This post is following on from a previous post on Creating the footer.

Creating the header was a lot simpler than I thought it would be. The original header in the Roots template is pretty sparse and I want to end up with this:
(I'm still unsure about the tag line but it's not something I will worry about for the moment.)

As with the footer, I want a full page width bar behind the header. I previously removed the Blueprint .container div that wrapped the whole page to allow this and this caused all elements to shift towards the left hand edge of the page. Wrapping the header element in it's own .container div brings it back to the centre and allows me to include a div above it that can extend to the page edges.

The header bar is styled to be full width, 10 pixels high, and to have a shadow:

The rest of the header content is contained in 2 divs; one for the logo and the other for the navigation and the tagline.

The logo is positioned with padding and sits below  a div with a top margin of -10px for the green flash.

The navigation bar has rounded lower corners and sits between 2 canvas elements with the concave curves drawn on them with javascript. The js/scripts.js will override the scripts.js file in the parent theme and run the document.ready function after the document finishes

Using rounded corners, shadows, and canvas elements means the site will not look the same in older browsers. I used Adobe BrowserLab to test this after uploading the site to a temporary WordPress install (in the process I learned that the template name in child_theme/style.css needs to be lower case otherwise WordPress thinks that the child theme is broken.)

Chrome 9 and 10 for Windows were both fine as was Firefox 3.6 and 4 on Mac and Windows. Safari 5 was good, Safari 4 lost the drop shadows but rendered everything else ok. Internet Explorer 7 and 8 didn’t render the shadows, rounded corners, or canvases and, strangely IE 8 lost the footer bar, I checked IE 8 manually in a VM and the bar was there so presumably this is some BrowserLabs oddity. IE 9 was fine. I'm not concerned with Firefox 3.5 or IE 6.

The site is usable in IE 7 and 8 but doesn't have curves, canvases, or shadows. I may try and address those issues later using modernizer, images and fixing the navigation font size for IE 7 and 8 but it is certainly not a priority at the moment.

Checking on an iphone reveals another problem; the divs for the header and the footer are supposed to have be 100% of the page width but they are only covering the left third of the screen (this happens on the ipad also). After trying various things it turns out that it is due to the viewport meta tag:

When this tag is removed and Safari is allowed to render the page as with it's default settings, the footer and header extend to full width. In a more responsive layout that adapted itself to mobile screens the viewport tag is useful, but as this site is 960px wide and the default iphone viewport is 980px there is no reason to have the tag.