IE Compatibility

[Pacman15]

Hello.

I have released the fifth version of my website, chocoboheaven.com and in this layout I tried to use more div boxes and ul and li tags... to control the layout more over css.

The thing is that is shown nicely in firefox but when i open it in Internet Explorer, the layout menus are all messed up. And that will drive traffic away from our site.

You can find the difference in the attached pictures.

Firefox -> Clipboard02
IE -> Clipboard01

And well,you get the point.... I would like you to help me fix those spaces.
here is the css style.

http://www.chocoboheaven.com/style.css

Thank You.

[Twey]

I believe that's to do with different default padding/margins. Set the padding and margins of everything to 0 first:
* {
padding: 0;
margin: 0;
}... then explicitly define the spacing values for each element.

[Pacman15]

* means every tag?... didn't know that... I'm going to try that... thanks.

Edit: Nop, it didn't worked...

Edit:

I'm pretty sure the Incompatibility is from the menu CSS...

#blockmenu ul {
margin:0px;
padding: 0px;
list-style-type:none;
}
#blockmenu li strong {
display: block;
padding:5px 10px 5px 10px;
background-color: #E2E8F0;
margin:0px;
color:#000000;
font-weight:bold;
border-bottom: 1px dotted #FFFFFF;
}
#blockmenu li a {
display: block;
margin-top:0px;
color:#444444;
padding:5px 10px 5px 10px;
text-decoration: none;
background-color: #E2E8F0;
border-bottom: 1px dotted #FFFFFF;
}

#blockmenu li a.sub {
display: block;
color:#444444;
padding:5px 10px 5px 10px;
margin:0px;
text-decoration: none;
background-color: #E2E8F0;
border-bottom: 1px dotted #FFFFFF;
border-left:#BCCAD7 solid 5px;
}

#blockmenu li a:hover {
background-color: #CFD6DD;
color:#000000;
}

#blockmenu div.menutitle {
background-image:url(images/gib/t_img.gif);
background-position:right;
background-repeat:no-repeat;
color:#000000;
font-weight:bold;
font-variant:small-caps;
margin-bottom:4px;
padding:5px;
background-color:#CFD6DD;
}

[Pacman15]

any idea?? please?