You can see it here:
http://inspindesign.zidev.com/test/

It displays fine in FF, but in IE there are gaps on the right hand side [it also shows up in dreamweaver].

Here is the code for my stylesheet:

body {
font:11px Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-image:url(../Images/bg_square2.gif);
text-align:center;
margin:0;
}

.title {
font-size:14px;
font-weight:900;
}

#container {
text-align:left;
margin:0 auto;
width:720px;
background:#171717 url(../Images/banner.gif) no-repeat 50% 0%;
padding-top:120px;
border:solid #323232;
border-width:3px 4px 4px 3px;
}

div.nav {
width:720px;
}

#content {
width:720px;
margin:0;
padding:4px 5px;
}

#content_height {
height:300px;
}

#footer {
width:720px;
text-align:center;
font-weight:bolder;
font-stretch:extra-condensed;
background-color:#323232;
padding:2px 0 0 2px;
}

a {
color:#FFF;
}

a:hover {
color:#950C00;
}

div.news {
width:346px;
height:150px;
overflow:auto;
border:solid #171717;
border-width:1px 0px 0px 1px;
margin-left:0px;
display:block;
clear:left;
}

div.news_h, div.news_m {
width:308px;
background-color:#323232;
padding-left:15px;
border-bottom-color: #171717;
border-bottom-style: solid;
}

div.news_h {
font-weight:900;
font-size:12px;
height:20px;
background:url(../Images/deco_news.gif) 0 0 no-repeat;
background-color:#323232;
border-width:1px;
padding-top:12px;
}

div.news_m {
background-image:url(../Images/bg_square.gif);
border-width:2px;
padding-top:5px;
padding-bottom:4px;
}

.info, .intro {
width:346px;
border:2px solid #323232;
margin-bottom:4px;
margin-right:4px;
display:block;
}

.info .title {
background-color:#323232;
display:block;
margin-bottom:5px;
}

.intro {
background: url(../Images/logo.gif) no-repeat 100% 0;
padding-top:42px;
}

.info img {
margin-left:3px;
margin-bottom:3px;
}

.info  p, .intro p {
text-align:right;
padding:0;
margin:3px;
}

ul#nav {
margin-left:0px;
padding-left:0px;
list-style-type:none;
}

ul#nav li {
display:inline;
}

ul#nav a {
display:block;
text-decoration:none;
background-color:#323232;
width:100px;
padding:5px 4px;
border-bottom:1px solid #171717;
font-weight:900;
font-stretch:condensed;
text-align:right;
}

ul#nav a:hover {
color:#FFF;
}

Does anyone know what might be causing it?

Thanks.

Why are you using an image map for your navigation ? You could easily do that menu with an unordered list.

I don't see the gaps you're referring to. Aside from the menu being over to the right on IE vs the left side in FF, I don't see much difference.

Ah yea i managed to fix the gap problem [i seem to have to totally mess around with padding and margins to get the page to look more or less the same in both IE and FF!].

I decided to use an image map as it would save me from having to chop up the image and do CSS coding for it.

Thanks anyway.