Inconsistent sub-menu background widths

OK, I have an issue with sub-menu background widths that are not consistent across browsers.

I set up a slimmed-down file to better illustrate the problem:

menutest.php

-----------------------------------------------

Issue #1:

For some reason, in Internet Explorer 7, the sub-menu background widths stop at the end of each text link. This is, of course, not the way it should appear.

However, in Firefox 3, the widths are all the same for each item in a particular sub-menu list, all based on the length of the text in the longest text link.

(It's even stranger in Firefox 2 for the Mac - some items appear correctly: about, news, music, & store) while others have the problem I describe here for IE (media & connect) But, that's another story!)

-----------------------------------------------

Issue #2:

Now, while the widths function correctly in Firefox, there also seems to be another issue that keeps things from being consistent.

Notice that I've had to put a 10px pad on the right side so that the CSS Menu Writer display, as well as Internet Explorer, will give a little room to the right of the text link. No such padding is necessary for the left side. It seems to do that correctly by default. (I'm not sure if it has anything to do with the inside/outside bullet specification or not.)

Anyway, the menu would look perfect in Firefox if it was not for the extra 10px pad I had to add. Because of it, I end up with twice the amount of padding I actually want in Firefox, even though it produces the pad I'd like to see for Internet Explorer.

-----------------------------------------------


Of the two issues, though, I really want to fix the background width of the sub-menus (issue #1). If the padding issue (#2) can't be resolved, I could live with that. But, maybe someone knows a way to fix both.


Thanks so much, in advance, for the help.

Jeremy