Hi, I've played around with loads of things to try to fix this but I'm really suck now. I have a list style that should display a little green arrow beside the items of the list, on the page in question there are many of these lists. As you can expect this works fine in FF but in IE7 it : - randomly shows up on some items - doesn't show at all on some items and - shows on hover on other items?! Here's the url: http://www.bingohideout.co.uk/bingo-sites-directory/ If anyone can help me out it would be great! Thanks, Tom.
I don't have my tools with me, but I noticed some things right away: You have a space before the doctype. That means IE7 and 6 are acting like their retarded predecessor IE5.x which couldn't hardly do anything right. Likely your page was coded to a broken IE so fixing this might look like it's worse in IE, but otherwise you are stuck in Quirks mode. Your list code is pretty bad. It's a list, so set it in one. <ul> <li><a href="#">blah</a></li> etc... </ul> Second thing, the general rule of thumb with IE and stuff acting random and appearing and disappearing is that it's usually a Haslayout issue. You might want to go to haslayout.net/haslayout or the santanez site that shows up first thing in google (I'm too lazy to search it now and I'm spelling it wrong, but it's a german URL). Are you using list-style-image for the arrow? I didn't want to crawl through several css sheets to find it (if I had my web developer toolbar with me I could force your site to give me all the CSS at once) but it's known to not work so well cross browser. Usually what we do is use a proper list, and we add left padding to the li element and a background image. You don't need a class on the li's unless one has a different image than the others. To have different images per whole list, use an id or a class on the ul element instead. #menu1 li { padding-left: enough to push the text out of the way of the image; background: url(arrow.gif) 0 50% no-repeat; etc; } #menu2 li { padding-left: whatever's needed if it must be different for a new image, otherwise don't mention it; background: url(footprint.gif) left center no-repeat; } blah blah that sort of thing. So, you actually have a little pile of work to do there.
WOW! Thank you very much, I've totally fixed the issue now! It was down the the haslayout thing, it took a bit of working out but I managed to add a property that gave layout without making any actual changes to the look in any browser! Thanks again, you've really helped me out. Tom.
Good to hear : ) remember that the trick with display: inline-block can be a lifesaver (you can set the thing to inline-block, then back to block or inline or whatever you want all the other browsers to do with it...) changing THAT display state back doesn't undo Haslayout being set in IE so it's a nice tool when there's nothing else you can get away with using.