footerstickalt with graphic layout (absolute-positioned divs)

[waterox]

I will freely admit I dont really know CSS.

Please have a look at this page I am working on. There are a number of issues I have been unable to resolve on my own.

http://www.yanwhite.com/staging/medi...es_footer.html

The main problem here is that I cannot get the footer to stick to the bottom of the page. I am using footerstickalt, but must be missing something fundamental, because as soon as I add my absolute-div content/layout, it doesnt work. I have included the CSS in the html page.

Also, in IE7 the last line of left menu text has a larger gap.
The bullet point text in IE is positioned differently, although I am using an absolute positioned div to contain it.
Do lists and paragraphs have different spacing in firefox and IE? In which case how should designers make sure that everything will look the same cross-browser?

My main gripe about CSS so far is the lack of practical guides on how to implement it for designers.
At least with tables we had a GUI that worked with Dreamweaver!

For fluid text layouts that are not graphic based there are tons of examples.
But for graphic-based layouts its proving a nightmare. All of the resources I google seem to explain text-based layouts very well, columns, floats etc etc.
But anything I output from Imageready needs serious hacking.

Should I just go back to tables for this type of layout? Or is there a simple set of rules for creating these kind of pages with css and workable footers?

[ukgeoff]

You could try adding 'clear: both' to your footer styling but the real problem is your whole approach to using css.

You have far more 'divs' than you need and all those absolute positioned elements is going to cause you problems.

Look at using less divs as structural elements and use float, margin and padding to position things where you want them.

Even if you feel the need to use graphics, this is still the way to go.

[Lchad]

I just put that code into my dreamweaver and adding clear: both to the footer isn't going to work.
Quite frankly after playing with the code for about 10 minutes, I couldn't get the footer to go anywhere.

You are trying to set your site up using the div's almost as cells.
I would start from scratch on this. You unfortunately have too many divs, position:relative is not necessary on most of the div.
Since you mentioned dreamweaver, take a look at this tutorial. http://www.adobe.com/devnet/dreamwea..._concepts.html

It's a great tutorial that you can do from start to finish that really breaks down how to use the div's properly. Then it helps you put in all the basic elements as well. Navigation, content area, and footer.

I think once you do this tutorial you will have a better understand how things work in css. Don't get discouraged, you aren't far off.

[Ryan Fait]

That reminds me. I was working on a more robust sticky footer a few months ago. Was much less hassle than most out there. Hm, I should start working on that again.

[Lchad]

Yes Ryan, add that to your "list of things to do"!
A more robust version would be great!

[Ryan Fait]

Well, it had one problem that I gave up on at the time. I don't know if there is an easy solution, but I'll post it up in the CSS forum if I can't think of a one this time around. Maybe Karinne can help; she is definitely able enough

[Ryan Fait]

I fixed the problem all by my lonesome!

http://ryanfait.com/sticky-footer/

[waterox]

I have pretty much solved these issues now I think!

Check www.yanwhite.com/staging/mediatypes and www.yanwhite.com/staging/mediatypes/styles.css

However, in ie6 the layout is broken!
Any ideas what is causing this?

[Gwayn]

Originally Posted by Ryan Fait

I fixed the problem all by my lonesome!

http://ryanfait.com/sticky-footer/

Ryan your solution is really nice.
Can i add an article on your Sticky Footer on my (just started) blog?

[Ryan Fait]

Of course!

[Gwayn]

Done ^_^
I'll try to update the blog frequently according with my free time... and also i'll have to setup a version in my mother language (italian).