I am getting very close to finishing a US map with css popup images. http://cypress.intownwebdesign.com/map.html My last issue is with the <UL> list in IE6. You will see the list of links on the right hand side. Displays fine in IE7, FF, Safari, and Opera. IE6 appears to be adding extra spacing below each one of the <li> elements. The list also moves up and down slightly when you mouse over the different items. It makes it look like the list is shaking. Any suggestions on how to correctly space the list in IE6? Thanks! I can provide screen shots if needed.
Okay. I think I found the issue. It is an "IE6 Whitespace List bug" One of the divs my list was nested in had display: block in the css. I removed that value and the list now has the correct spacing. The only issue now is the list moves up and down about one pixel when you mouse over the links. Which causes the list to shake in IE6. Any suggestions? Thanks!
They could stay blocks if you needed, and the whitespace bug doesn't appear if they're floated. If you floated them, they become blocks again, and maybe try setting a set height and width on them (in the normal a state) which should stay the same upon hover. You could (for testing) also give the a's a background colour to see if they are increasing in height or adding padding when hovered over.
thanks for the suggestions! I have added several background colors to the list to see what is going on. http://cypress.intownwebdesign.com/map.html It appears that the when you hover the link a top margin is being applied to the link. Any ideas! Could this be related to the Holly Hack? Thanks!
From looking at the background it appears that IE7 and FF add 1 pixel of margin to the <a> elements. When you hover the link the space has already been added. In IE6 the 1 pixel of margin has not been added. When you mouse over it the margin is then added and the whole list shifts down. Causing the links to appear to shake. The background colors are active now so you can see for yourself Does this make sense? Any suggestions on how to fix this? Thanks so much!
I missed the colours but that's okay as I know what you mean. You have more than one CSS sheet... and I see that on one you've got margins and paddings zeroed on the body element. However, what removes all default paddings etc is a "universal reset" at the very top of the CSS sheet: * { margin: 0; padding: 0; } I don't know if you'd want to add this as then you need to manually set all your paddings and margins on everything that needs them but it at least gets you started at 0 for everything. All that said, I don't think it's that but something IE6-specific. But before guessing on them, we could try zeroing the margins and padding... I'd stick it on the CSS on the HTML page, that's an "internal stylesheet" and will override the external one you've got. If it screws with your page, fine, it'll just be for testing. Or you could just zero it for lists. ul, li { list-style: none; margin: 0; padding: 0; } And then when you change you margins and paddings on the <a> we can see if there's a difference. But I would also try floating them too (if you didn't). Floats are treated differently as far as margins etc go and I'm wondering if that would cure this. I don't see any Holly hacks... did you mean, use it to give IE6 an extra 1px top margin? I'm sure you could, but that hack should really be used when it's IE6's truly faulty rendering... if you can achieve the same effect without the hack that's even better.
See IE white space bug. The key is to set hasLayout. This has been covered in this thread, but the article goes into some reasons and alternate methods. All too often, alternatives are needed, as no one method will work under all circumstances. cheers, gary
Yeah, it took me a few months to figure out why deathshadow always floated his a's instead of his li's. I ended up never running into the problem myself because unless there was a drop-down menu, my a's were either floated or they had background images so they always got a height and line-height set on them. So Eskwire can do a few things, either first set the a's to display: inline-block and then in another declaration set it back to :block, or float them, or give them at least 1px height (maybe only in a Holly hack, and maybe 1% is fine too)... This map is so cool.