The following example is a very simplified version of my top navigation.
If you look in most browsers, you should see two green list items next to eachother, with a blue box or ‘badge’ sitting on top, bridging the gap between the two. In IE7 however, the blue box always falls below the second li. I’ve tried all manner of fixes to this. Setting a higher z-index to the parent ul didn’t change anything, and if I use position: relative; on the ‘badge’, it loses its width and height.
Is there an obvious fix to this that I am missing?
You’ll probably struggle with your badge in with the LI, take it out of the list and you should be ok, with a bit of messing with position:
http://jsfiddle.net/AEqxT/2/
If you absolutely have to have it in with the LI, then you’ll probably have to have some JS to make this work