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.

As it should be, as appears in Firefox:
|       |
|       |
| Menu  |
|       |
|       |

As appears in IE:
|      |
|      |
| Menu |
|      |
|      |
<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;}

<div class="menu">
<div class="menu-items">Lorem Ipsum</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.