I've been handing out lots of tips and useful info over the last year so I thought it was about time to see what you've all learned .

I was asked to fix this problem the other day and it took me about half an hour to work out how to do it. So lets see how bright you lot are and who can give me the solution first.

Look at this link in firefox/ mozilla :


You will see that it works perfectly in firefox etc

Now look at it in IE6 - it doesn't work at all

Your mission (should you accept) is to make it work in ie6 as it now does in firefox.

The Problem:
In good browsers you can set bottom:0 and top:180px and keep your element at the bottom of the page and always 180px from the top. This allows the bottom element to reduce as the window is made smaller in height but preserves the top part of the page.

However IE6 won't let you set dimensions of an element by using the positioning properties alone.

No frames or iframes
No javascript or scripting of any kind
No expressions or conditional comments
Use Valid CSS
Use Valid xhtml
Use as many hacks as you like (you will need them) but they must still validate at the w3c validator
Must still work in Firefox
Must work in IE6 exactly the same as my example above

My solution involved changing nothing in the body of the html.
Use * html to offer css code to IE6 if necessary.
Use html>body to offer css code to firefox/mozilla.
I changed/added about 11 lines of css and one other thing outside the css to make this work.

The winner will be the first one to post a correct solution in this thread. Your method doesn't have to be the same as mine but must work the same. The prize will be your own satisfaction in being the first with the best solution.

Have fun


PS If no-one can work it out (or can't be bothered) then I will post a solution in a couple of days (Also the person I originally did this for is barred from the competition.)