Flash "Satay" Gap Issues (or: a whole slew of CSS bugs)

[trigxine]

I took up doing some code for the XHTML 1.1 version of Elefuns (see the review thread), just to show it could be done (for free, too; call me crazy) and it went pretty well up to the point where I got stuck because of what I think is an IE quirk. Here's some background:

The site uses two pieces of Flash, one for the big header, the other for a submenu. I wanted to redo the submenu with a nice list and some images, but there's a weird "registered user functions" thing that shows up initially, and I don't want to change anything design-wise. Knowing that Macromedia's code doesn't validate, I turned to A List Apart and their Flash Satay article to get validating Flash. Well, the good news is that it validates, and displays the movies. The bad news is that in the bane of every XHTML-coder's existence, IE, there are some strange padding issues.

Here's the page I've started working on, and its associated CSS file. Note that the CSS file has a complete copy of the original Elefuns site, to preserve fonts when I get down to that. My code is at the bottom, commented.

The problem is that IE ignores the 2px gap that's supposed to be between the big Flash header and the div underneath it, and then adds a bunch of padding to the left of the second Flash video (the horizontal menu under the big Flash movie)...

O XHTML gods greater than I, any ideas?


[edit] -- I've decided to just make this the one big CSS error thread for that site. In IE6, at least, the list/link format for the menus blinks when you mouseover it. But only in IE. Not in Mozilla, or Opera, or Konqueror, or Safari. Any solutions?

[edit2] -- The former issue still stands, but I worked around it by using some absolute positioning, even though I'd rather not. However, for the time being, it's solved. The second question still stands, though.