View this page in both firefox and IE

http://www.keyclubbin.com/wht/home.keyclubbin

I want to create an effect where the slogon on the bottom right would streatch to the very bottom right. It works fine in IE but not in firefox. What I'm doing is dividing the right cell into top and bottom. The top in a set height and the bottom at 100%

I don't think height is an acceptable property for the <td> tag according to W3C standards.

You could try making that image a background, and align it to bottom right using CSS. Try something like this:


/*** css ***/
body {
background-image: url(http://www.keyclubbin.com/images/banner2.jpg);
background-position: bottom right;
background-repeat: no-repeat;
background-color: #xxxxxx /* whatever that brownish color is */
}

There's just one problem with that - the blue table cell would overlap the background

Thanks for the suggestion though

Why's that? Little margin on the element holding the background image would stop it from overlapping...

Top layer : Table-cell
Bottom layer: background

cell with blue color is ontop of background

Apply margin to cell on top of background. Problem solved :)

Or stop using tables alltogether. But that's another issue for another day.

Apply margin to cell on top of background. Problem solved

wanna show me how? =P

I'd love to show you how Andrew, but to be honest, I can't make heads or tails of your markup. I'm having trouble figuring out what the heck is going on in there! Perhaps you could turn on table borders and put a little text into some of the areas so I can see what'd supposed to be happening on the page? That would help tremendously.

My immediate reaction to seeing what's there is that you chould achieve the same effect using about two lines of code - completely toss out all of that markup. But if you could give a little more perspective by filling it in a little, I can give you better direction. It might actually take four lines of code instead of just two :stickout: