design in css

[jrthor2]

I have a project where the design looks like the attached image and I want to code this using CSS and XHTML Strict. Does anyone have any pointers on how to get this design to work with this? The footer with the grass would need to be fluid so that if the page is long, the grass would still be shown at the bottom.

Thanks for and advice!!

[Siddan]

Hi

It is a bit tricky but not impossible for sure.
There are quite a few solutions to work this around.

The most complex I see are those two overlapping images. With transparent png you could more easily place them anywhere. But older browsers will not display the transparent pngs correctly. But there is a fix for IE6 at least.

The rest should be no problem.


Search for css fotter bottom and you will find alot of help and guides how to achieve this.

Do a brainstorming and make some html markups of the obvious and then we can guide you more after

[jrthor2]

Ok, I have just started, and I'm applying my background image, but in IE, there is a color clash where my background stops and the color starts. How can I fix this? In FireFox and Safari, it appears to look ok.

http://www.vickiesangelwalk.org/new_site.php

Thanks.

[jrthor2]

Also, why are my header image and button/links not inside my header div? They are outside of it. How can I fix that?

Thanks!

I got this issue fixed.

[jrthor2]

also, why do my links at the top right in IE not have my padding applied? In FireFox, they look fine.

thanks

[jrthor2]

Ok, I have it working for the most part in FireFox, but in IE, the z-index is not being recognized and the footer is off to the right. Any idea how to get this to look right in IE now?

thanks

[jrthor2]

Can anyone help me with this?? It will be greatly appreciated!!!

Thanks!

[jrthor2]

Ok, getting closer. I got it to work in IE7 and firefox, but in IE6, the logo and the content background are not lining up 100%. The content background is showing 2px lower than what it should be, so it's not lined up with the logo image. How can I fix that and the fact that the links at the top right are not padded in IE?

Thanks

[Siddan]

Hey, looks like you have come a long way!

Unfortunately I do not have IE6 so I cannot help you there.
But the background image in IE7 seems somewhat darker than in FF. That is why you see an obvious crossing to the background color.

I sure have no idea why the image is darker in IE.. but till you figure it out you can always use a conditional comment to IE only to have the background color the same as the image.

For me in FF I see that the footer is further below.
To fix this, you can set a negativ top margin equal as the height.
And then place a new div last inside your wrapper and make this the same height as the footer