1 reply [Last post]
Last seen: 12 years 30 weeks ago
Joined: 2008-03-11
Posts: 31
Points: 0

OK, sorry for bringing up the 100% height thing again but I can't figure this out! Strict doctype, valid HTML and CSS, and I had a full head of hair this morning, now I'm bald.

Basically I want a layout with a centered column for content, 100% height, which is easy enough. I also want a graded background on the left and right sides, so the edge of the page fades at each side no matter what screen resolution/width. Easy enough. And the background is a 1px high image with repeat-y.

In the CSS I gave the left gradient background to the html and the right gradient to the body, each with 100% min-height and conditional height for IE. However, I can't get the content column to fill the page when the content is less than that, or if I do manage then the right gradient in the body mysteriously stops expanding beyond 100% when the content runs over! So I need a left gradient, right gradient, and content background, all to be min-height 100% and expandable when the content requires it. All to move together. I think I've tried every possible combination. Here's my entire code, if anyone has a spare hour to sift through it. The HTML:

Volkspeed Engineering - 01372 277 888

Volkspeed Engineering

Index page

This is the index page.

H2 level heading

And a little paragraph of text here, maybe with a link.

H3 level heading here

And some more content... In fact, this paragraph has loads of content! This is so I can see what the text wrapping looks like. If I keep typing, this text will wrap over another line again, and should like a lovely printed paragraph with a wee indent at the top.

H4 level heading here

And some more content...

H5 level heading here

And some more content. No more graphics on the header, either.

H6 level heading here

And some more content...

And here's the CSS:

html {min-height: 100%; height: 100%; background: black url(../images/bgfade2.gif) top left repeat-y}

body {font-family: Verdana, sans-serif;
font-size: 16px;
color: #333;
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
background: transparent url(../images/bgfade1.gif) top right repeat-y}

* html body {height: 100%}

* html #mainwrapper {height: 100%}

div {margin: 0;
padding: 0}

img {border: 0;
margin: 0;
padding: 0}

a:link, a:visited {color: #007;
font-weight: bold}

a:hover {color: red}

h1,h2 {background: transparent url(../images/redbolt.gif) 2px 8px no-repeat;
padding: 5px 0 5px 30px;
margin: 0;
font-size: 26px;
line-height: 26px}

h3,h4 {background: transparent url(../images/redspanner.gif) 2px 4px no-repeat;
padding: 5px 0 5px 30px;
margin: 0;
font-size: 20px;
line-height: 20px}

h5,h6 {padding: 5px 0;
margin: 0;
font-size: 16px}

p {text-indent: 30px}

div#mainwrapper {width: 850px;
margin: auto;
border-left: 1px solid red;
border-right: 1px solid red;
background: white url(../images/chromebeetle.jpg) 0 160px no-repeat}

body.about div#mainwrapper
{background-image: url(../images/chromebeetle2.jpg)}

body.news div#mainwrapper
{background-image: url(../images/chromebeetle7.jpg)}

body.services div#mainwrapper
{background-image: url(../images/chromebeetle4.jpg)}

body.history div#mainwrapper
{background-image: url(../images/chromebeetle5.jpg)}

body.faqs div#mainwrapper
{background-image: url(../images/chromebeetle6.jpg)}

body.meetus div#mainwrapper
{background-image: url(../images/chromebeetle3.jpg)}

div#top-panel {border-bottom: 1px dashed red;
background: transparent url(../images/exhaust-spec.jpg) 440px 10px no-repeat}

div#top-panel:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden}

div#top-panel {display: inline-block;}

/* Hides from IE-mac \*/

* html div.top-panel {height: 1%;}

div#top-panel {display: block;}

/* End hide from IE-mac */

div#logo {width: 320px;
height: 130px;
padding: 10px;
display: block;
float: left}

div#nav {float: left;
text-align: right;
margin-top: 12px;
width: 100px}

ul#navlist {list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
font-weight: bold;
line-height: 17px}

#nav a,
#nav a:link,
#nav a:visited {background: transparent url(../images/redspanner-small.gif) 0 40px no-repeat;
padding-left: 20px;
overflow: hidden;
text-decoration: none;
color: black}

#nav a:hover {background-position: 0 4px;
color: red}

body.about a#about:visited,
body.news a#news:visited,
body.services a#services:visited,
body.history a#history:visited,
body.faqs a#faqs:visited,
body.meetus a#meetus:visited,
body.contact a#contact:visited
{background: transparent url(../images/redbolt-small.gif) 0 4px no-repeat;
padding-left: 20px;
overflow: hidden;
color: red}

div#content {width: 90%;
margin: auto;
padding: 10px 0}

p.date {color: #007;
font-size: 10px;
line-height: 10px}

div#login {display: block;
float: right;
bottom: 0;
border: 1px dashed red}

div#login a {font-size: 10px;
color: #aaa}

Last seen: 12 years 30 weeks ago
Joined: 2008-03-11
Posts: 31
Points: 0

on the back of this, I've

on the back of this, I've gone and uploaded a test version of the site here so you can see how it works:


News page won't work because it runs off a different database but apart from that I think it should all be as is. I'm getting the desired effect in IE6, but not in FF or Safari. Short pages like "Content" are the most obvious.

Cheers again!