I've designed a frame around a menu by floating four images around the menu text (example below). The idea is to have a frame around my menu without creating an image menu, and it's a theoretically simple task. It works well enough in Mozilla Firefox, but not in Microsoft Internet Explorer. IE adds a rather large margin to the right of the right frame, as in the second example. The code used is in the second code box (it's a little messy, but I'm just in the development stages anyway. Bleh). Does anyone have any idea how to fix this? I suspect it has to do with IE's faulty box model, but I don't know how to fix it.


Code:
As it should be, as appears in Firefox:
/-------\
|       |
|       |
| Menu  |
|       |
|       |
\-------/


As appears in IE:
/--------\
|      |
|      |
| Menu |
|      |
|      |
\--------/
Code:
<style type="text/css">
div.menu {width: 199px; clear: left;}
div.menu-items {float: left;}
img.mframe-top {float:left;}
img.mframe-left {float:left; clear:left;}
img.mframe-right {float:right;}
img.mframe-bottom {float:left;}
</style>

<div class="menu">
[img]mframe-top.jpg[/img]
[img]mframe-left.jpg[/img]
<div class="menu-items">Lorem Ipsum</div>
[img]mframe-right.jpg[/img]
[img]mframe-bottom.jpg[/img]
</div>
I'm unable to host the page at the moment, being away from home (and thus from any FTP programs). I'll host it when I return home, if I haven't solved it by then. Any ideas would be appreciated.