CSS Help Small Discrepancy in IE8 Compatibility Mode v's FF et al.

I hate IE!! I can't seem to figure this one out at all. If you look on https://www.limelites.co.uk at the categories menu on the left under "Womenswear by Size:" you'll see two columns from UK 6 through to UK 20.

These display perfectly in IE8, FF, Chrome, Safari and Opera... however in IE8 compatibility mode the line spacing is much smaller on the right column than the line spacing on the left column....

I've been messing with IE developer tool (F12) but for the life of me I cannot solve this!!

Can anyone please take a look and see if you can determine what's causing this weird line spacing?

Sorry, but I don't see any difference between IE8, and IE7 (compatibility mode).

IE8 et al:

IE7 (compatibility mode):

OK, you're talking about a very minor difference in display.

If you don't mind a personal opinion, no customer will:

1. View your site with more than one browser, other than you.

2. No one will care, if they do.

I would suggest you spend your time on more important things.

Just my $.02 worth.

I have to agree with stevesh on this one, only you (and couple of us around here) are ever going to look at the site in two browsers to compare. If you hadn't pointed it out I'm not sure I ever would have noticed.

I'm not talking about people viewing the site to 'compare', I'm talking about people viewing the site in IE7.

The point is, there's a line spacing issue that's noticeable in IE7 and I'm sure it'd be better if it were fixed rather than just left alone in the hope that no one notices..... right?

The only differences I can see using IE Web Developer is that you've specified a width for the left line items, but not for the right, and the header for that box, for some reason, extends beyond the left column in Compatibility Mode.

Thanks for looking again. I fixed the heading width, but both left and right stacks have a 70px; width specified.

Can you still not see the difference in the line spacing between the left UK 6 - UK 12 and the right UK 14 - UK 20 ?

No, I saw the difference as soon as you pointed it out. My point was that I didn't notice it beforehand.

If you use the IE Web Developer, it shows that catgroup26 (the right column) doesn't have a width declared, whereas catgroup29 (left column) is set to 70px. The right column list items extend beyond the column width, too. I have no idea if that's causing the problem, I'm just looking for differences.

Cat group 26 is the left and 29 is the right. They're both specified width of 70px. Group 26 is specified in stylesheet_categories_dressing.css and Group 29 is specified in ie_stylesheet.css

I'm usually not too bad with CSS and Firebug/IE Developer Tool... I can usually pinpoint what's causing these types of things.... However, this one is a mystery.

I appreciate that it's 'not that noticeable' but I'm one of these people who's eyes are drawn to things like that immediately. I find it quite annoying. Especially since I can't see what's causing it :-)

Eureka!!! You got me looking at this and it was indeed something to do with widths!

I had this:

#catGroup1_26 li {width: 70px;}

But when I changed it to this it worked:

#catGroup1_26 {width: 70px;}

Thanks!!

I suggested the #catGroup1_26 li { so that the "Womenswear by Size" heading would not be cramped by making the whole group narrow, but since you have that heading class specified as 150px wide, it takes its own width and the group can be 70px like 1_29.

I do notice in IE6 that it doesn't honor the height: 0; for 1_29, so that there is a 70px or so empty space where it would have been without the position: relative; .

gjh42:

I suggested the #catGroup1_26 li { so that the "Womenswear by Size" heading would not be cramped by making the whole group narrow, but since you have that heading class specified as 150px wide, it takes its own width and the group can be 70px like 1_29.

I do notice in IE6 that it doesn't honor the height: 0; for 1_29, so that there is a 70px or so empty space where it would have been without the position: relative; .

Hi Glen,

Would you be good enough to take another peek in IE6? I've ditched the position relative again and used the position absolute solution, which should hopefully get rid of the 70px; empty height space?

The gap is gone, but the right group is now about 20px lower than the left group (it overlaps the divider above Menswear).

Hi Glen,

I'd been working on it as you looked, not sure if it's still like that now?

Yep, still that way. The center of the red arrow for UK20 is about 2px above the divider.

Thanks for helping with IE6 Glen, I've never been able to view the site on that version, but I've dropped in an IE6 stylesheet and pushed group 1_29 up 20px;

I can't see, but is that better?

The groups line up fine now.
I do notice that the arrow for the "Womenswear by Size" heading is misaligned, sitting at the midheight of the area between category lists (maybe 10px above the text center). Not bad but noticeable if you have another browser to compare with.

Hi Glen,

I managed to get a look at my site in IE6 using one of the screenshot sites and I did see the arrow you're talking about. However, from what I seen on the screenshot, that was the least of my problems :-)

I see that the png transparency fix hasn't been applied. Tried to fix it a few times but couldn't get it working.

I see that the position:fixed items are not working either..

The screenshot only shows a small part of the screen, so I couldn't see most of the site. I'm guessing there must be many other problems in IE6 on my site, so I'm on the verge of ignoring that particular version in the hope that others will eventually do the same.