The sr.css file is as follows :* {
margin: 0;
padding: 0;
}
body {
background-color: #273038;
background-image: url(images/grad_back.jpg);
background-repeat: repeat-x;
color: #EEEEEE;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
p {
padding: 10px 0;
}
#outerwrap {
margin: 4% 8% 0;
background-color: #273038;
background-image: url(images/grad_back.jpg);
background-repeat: repeat-x;
padding: 12px 12px 0;
}
#innerwrap {
background-color: #181E23;
border-left: 2px solid #181E23;
border-right: 2px solid #181E23;
}
#navbar {
display: block;
height: 65px;
background-image: url(images/menu_back.jpg);
background-repeat: repeat-x;
}
#navbar li {
list-style: none;
float: right;
}
#navbar a {
display: block;
width: 120px;
height: 65px;
text-decoration: none;
text-align: center;
line-height: 65px;
color: #C8D2DA;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-image: url(images/menu_back.jpg);
background-repeat: repeat-x;
}
#navbar a:hover {
color: #333333;
background-image: url(images/menu_over.jpg);
}
h1 {
display: block;
height: 56px;
font-size: 1px;
text-indent: -1000px;
background-image: url(images/logo_back.jpg);
background-position: right top;
}
#content {
min-height: 400px;
background-image: url(images/cont_back.jpg);
background-repeat: repeat-x;
padding: 0 15px;
}
* html #content {
height: 400px;
}
At the start of the css, I have zeroed the browser default element margins and padding for cross-browser uniformity - a default padding is subsequenty applied to p paragraph tags. The body styling has the base text font and size as well as the repeated gradient background.
The #outerwrap div defines the size of the site using percentage margins only, allowing the site to adapt to different screen resolutions - even 800x600. The same gradient background as the body is used, and the positioning provides visual separation. The #innerwrap div sits inside the #outerwrap spaced by #outerwrap's padding (12px top and sides) which gives the impression of gradient borders.
The navigation <a> links are styled as block elements and given an appropriate size. They are also given a repeated 1 pixel wide background. The line-height specification centres the text in the links vertically. The navigation <li>s are then floated right, which stacks the link blocks to the right side. The list-style:none removes the standard list bullets. The navigation <ul> is then displayed as a block, given a height (as it collapses due to the floats), and given the same background as the buttons to complete the bar full site width. I also did a rollover graphic which is implemented with the a:hover css.
Following this, the <h1> header is styled as a 56px high block and given the logo background, positioned right to allow for resizing. The <h1> text itself is reduced to 1 pixel height and indented off the left of the page so it cannot be seen (visually - screen readers can still read it).
All this is followed by the content div, with again a 1 pixel wide gradient repeated background. This is set to at least 400px high via the min-height setting, but as IE6 doesn't understand this, the * html #content css feeds it the fixed 400px height (IE will incorrectly expend this with content).
And there it is - simpler, quicker loading, more accessible and no javascript.
Cheers
Graeme