The HAML code below is what I have:
%header
.grid
%a{:name => "top"}
.logo
%a{:href => root_path}
=image_tag("logo3.png")
.tagline
.clearfloat
%p Fast Facts About Your Website, Your Competitors And Best Practice
It compiles to the following HTML structure:
<header>
<div class='grid'>
<a name='top'>
<div class='logo'>
<a href='/'><img alt="Logo3" src="/assets/logo3-f98780b46c9b7f088007b22a6a6d3605.png" /></a>
</div>
</a>
<div class='tagline'>
<div class='clearfloat'></div>
<p>Fast Facts About Your Website, Your Competitors And Best Practice</p>
</div>
</div>
</header>
In addition to the HAML, there is also SASS code using Susy:
@import "compass/reset";
header {
clear: both;
padding: 1.25em;
@include content-box;
.grid {
padding-bottom: 0em;
padding-top: 0em;
.logo {
@include span-columns(3, 9);
padding-left: 3.75em;
margin: 0;
height: 3.25em;
}
.tagline {
@include span-columns(6 omega, 9);
height: 3.25em;
p {
position:absolute;
top: 3.25em;
text-align: right;
width: 50%;
}}}}
.grid {
@include container;
padding-top: 3.75em;
padding-bottom: 3.75em;
padding-left: 1.25em;
padding-right: 1.25em;
}
.clearfloat {clear: both;}
This results in the following CSS when compiled:
body {
margin: 0;
background-image: url(/assets/background-15f6db398b101b42f0b97400986e777a.png);
}
.container {
*zoom: 1;
max-width: 86.25em;
_width: 86.25em;
padding-left: 3.75em;
padding-right: 3.75em;
margin-left: auto;
margin-right: auto;
}
.container:after {
content: "";
display: table;
clear: both;
}
header {
clear: both;
padding: 1.25em;
background-image: url(/assets/subtle_dots3-4c8426c60999e17a694d2d04c7df3c1d.png);
-webkit-box-shadow: #191919 3px 3px 6px;
-moz-box-shadow: #191919 3px 3px 6px;
box-shadow: #191919 3px 3px 6px;
}
header .grid {
padding-bottom: 0em;
padding-top: 0em;
}
header .grid .logo {
width: 30.43478%;
float: left;
margin-right: 4.34783%;
display: inline;
padding-left: 3.75em;
margin: 0;
height: 3.25em;
}
header .grid .tagline {
width: 65.21739%;
float: right;
margin-right: 0;
#margin-left: -3.75em;
display: inline;
height: 3.25em;
}
header .grid .tagline p {
position: absolute;
top: 3.25em;
text-align: right;
width: 50%;
}
.grid {
*zoom: 1;
max-width: 86.25em;
_width: 86.25em;
padding-left: 3.75em;
padding-right: 3.75em;
margin-left: auto;
margin-right: auto;
padding-top: 3.75em;
padding-bottom: 3.75em;
padding-left: 1.25em;
padding-right: 1.25em;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.clearfloat { clear: both }
All modern browsers display the logo on the left side of the header correctly, like this:
However, Internet Explorer (including version 9) misplaces the logo behind the tagline as shown here: