IE7 Layout issue

Hi there,

I’m generally a PHP developer, and some of the IE7 CSS hacks and tricks are a bit lost on me…

Happily my site looks fine in IE8, 9 and the more compliant browsers (Safari, FF, Chrome), and even in IE7 it’s looking pretty good, except when I add a product to the basket. The layout of the basket is off in IE7. It’s not a major issue, but the client is in the public sector, so IE7 needs to be taken into account.

Does anyone have any ideas how to bring it back into line?

The site is here:

Here’s the page that features the basket:

Here’s a screenshot:

Hopefully you can see that the margin of the basket on the right hand side is too big, and is pushing everything out. I think its got something to do with the form which seems to be too wide. Have no idea why. Adding the css rule width:auto; does nothing.

Thanks in advance for your help.

Mike

Hi,

Remove the float:left from the element.

e.g.


div#basket .not_enough {
    clear: both;
   [B]/* float: left; remove */[/B]
    text-align: center;
    width: 230px;
}

Only float elements that need to be floated as older IE can get confused when everything is floated.

Hey Paul,

Thanks for your help. It’s looking a lot better. There’s still an issue with the width of the basket. It’s too wide. There seems to be an extra 10px margin on the right of the table, but according to the developer tools on IE7 there’s nothing added.

I’m at a loss.

Thanks again,
Mike

Try giving a width to #basket of 250px and wrapping the inputs in spans to avoid this bug.

Nice.

Thank you!

Mike