Float and clear / Image issue on IE

[tekram]

First Q:

The first question is related with float and clear. I am trying to have three divs be side by side but i can not seem to get it to work properly on firefox. it looks fine on on ie. the website is ghazalis.com. the layers i am referring to are on the way bottom that contain the links "Home | Featured Products | All Products | Book Request | Contact Us | About Us" and the copyright message below which should be on the left and the layer containing "Shipping & Return Policy, Newsletter Unsubscribe, Privacy " on the right. the picture below shows the way i would like it to look and the red indicates what happens on firefox.

there are basically two layers on the left and on on the right.
here are the css for the layers (the first two are the ones for the left and the last for the right:

#copyright{
margin: 0em;
background-color: #ffffff;
padding: 0em;
padding-bottom:0.4em;
padding-left:200px;
font-weight: bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #93937B;
width: 597px;
float:left;
clear:left;
text-align:left;
}

#navSuppWrapper {
margin: 0em;
margin-top:3px;
background-color: #D7D7B5;
padding: 0em;
padding-bottom:0.4em;
font-weight: bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
width: 597px;
float:left;
clear:left;

}

#infolinks{
width:150px;
margin: 0em;
margin-top:3px;
background-color: #D7D7B5;
float:right;
clear:right;
text-align:left;

}

Second Q

I am using an image as the menu header at the top. In ie, there is this border around the image that i can not get rid of. the second picture shows where the border is obvious (when compare to what is below but the border goes all the way around). on firefox the menu is flush up against the layer below it.

Thanks!