annoying styling issue with ie7 & 6

on the following page:

http://dreamdeals.rnmtest.co.uk/

the login box on the right displays fine in firefox, ie8, safari, chrome etc but in ie7 & 6 the contents overflow. I have tried everything such as setting a height for the inputs but cant get it right. Anyone got any ideas?

I know this idea seems to at first glance make about as much sense as chopping off your own arms, but:

• On #whyjoin input, instead of border: none, try using border: 0.

Here's a reference to the problem you're having:

• http://bitesizebugs.wordpress.com/2009/08/17/border-none-not-working-on-text-input-in-internet-explorer/

So, despite border: 0 being the same as border: none, it's better use 0 because it's shorter and to avoid this bug.

I should probably go post that here.

In my IE8 (7 compatibilty mode), it's work fine ; But try to modify your height like this:

#whyjoin {
    background-image: url(../images/whyjoinback.jpg);
    background-repeat: no-repeat;
    padding: 30px 5px 0 5px;
    height: 70px; /* BG Image (100px) = 70px + 30px (padding) */
    margin-top: -55px;
    position: relative;
}

I Suggest you to place the #cardclip in absolute to not poluate the #rightcol.