annoying styling issue with ie7 & 6

Question

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?

What do you mean by overflow? I looked at it in IE7 and it seems to be displaying the same as IE8, Chrome and Firefox. — anothershrubery, Mar 10 '11 at 16:42
I see no problem in IE7. Can you attach a screenshot of the problem? — Richard Marskell - Drackir, Mar 10 '11 at 16:42

score 1 · Accepted Answer · edited May 23 '17 at 09:58

1

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.

edited May 23 '17 at 09:58

Community

1
1

answered Mar 10 '11 at 16:49

thirtydot

224,678
48
389
349

well i never! It worked! Never heard of that one before but I'll certainly have to remember it! Thanks – geoffs3310 Mar 10 '11 at 17:00

score 0 · Answer 2 · answered Mar 10 '11 at 16:47

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.

annoying styling issue with ie7 & 6

2 Answers2