IE6 CSS Bug - ULs & LIs- can anyone help?

Question

Hi

I have a CSS issue which occurs in IE6 only. I'm completely stumped and am hoping someone else might be able to help.

In IE6, if you navigate to www.moneysupermarket.com/loans and search for a loan of £5000 over 5 years, Homeowner - Mortgaged, you will get the Loans results page.

Scroll to the bottom of the page and you will see the Personal Pricing results table.

How it should and is appearing: http://i27.tinypic.com/2z542t1.gif

If it looks right when the page loads, clicking onto one of the other tabs knocks it out.

Annoyingly the IE6 developer toolbar isn't much use. As soon as I change any of the styles on the UL or LI that make up the tabs, it looks fine. If I make the same change in the CSS file and refresh, it doesn't seem to work.

I'm aware of the hasLayout issue, but setting display:inline-block, or height:1% to elements doesn't seem to be doing anything.

Any suggestions or assistance would be appreciated!

Thanks

Answer 1

Looks like a margin/padding issue. Try explicitly setting margin:0 on the list and table below.

Answer 2

Hello,

I am trying to look at the issue but when I click on the 'fair profile' or 'poor profile' tabs I get the error 'object reference not set to an instance of an object.

I have seen similar problems before though, try putting a bottom border on the containing list or the parent div with the id ucSearchResults_tbLoansResults. This may help you diagnose the issue, it might even fix it.

Without being able to replicate it, it is very dificult for me to investigate. have you tried setting hasLayout on the links, the lists and up? normally i try setting zoom:1 or similar on the inner most elements and then out to test if this works.

Otherwise try creating a minimal test case, cutting down the problem to its smallest constituent parts and then fixing that.

If you can either fix the JS error or provide a minimal test case I can investigate further for you.

Kind regards, Natalie

Answer 3

I'm looking at the results page you specified on the site, but I'm not finding a list in the markup there. It looks to be just a table cell. It does look like a CSS reset is being applied, which would have been my first suggestion. My advice is to start with the reset stylesheet on and your other stylesheets disabled to determine if the problem persists. I would diagnose the issue with Firebug in Firefox.

Answer 4

One problem is that you have an empty div and IE6 will reserve space for text. You can set line-height and font-size to zero to fix that. Of course if that div does have text in some cases, that won't work.

.msfg-money-loans-searchresultspersonal .msfg-repeater
{
    border: 1px solid #1A2F9B;
    width:800px;
    line-height:0;
    font-size:0;
}

You should validate your code. You have divs in spans which can cause problems. Span is an inline element that cannot contain block-level elements and each browser will render that differently.

Answer 5

I think I've solved it myself.

I set the tabs to position:static and fixed the margin errors which then followed.

Thanks all