CSS, wrapping and disappearing borders

[tigger_o_1]

I am not a CSS expert and this one is really annoying me.

A have a simple menu defined using unordered list tags in html.
This is "dressed up" by some css to produce a horizontal menu with a white box infront of each item.

I wanted to ensure each item did not split, but that the menu could wrap onto more than one line if need be.

#mainmenu a {
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 4px 0px 4px;
border-left: 1em solid #FFFFFF;
white-space: nowrap;
}

Great... But now, sometimes, in IE, when I wrap there are widths where my left box disappears.

See the attached image.
image 1 (top): full width, all is fine.
image 2 : how I would like, allow more than one line, don't split the list item, white box infront of item.
image 3: missing white box infront of item 6! (resized browser slightly).
image 4: same as 3, but shows a border round the link tag - see the border round item 6 - too high, and missing the left!!!

*sigh* hope someone can help! I have searched the web in vain!


Thanks in advance...