image is about 5 px higher in firefox than IE

Ok I am stump. I am adding a image at the end of the document. Were you see it is about were I want it. I was either going to use <br> to make my text go around the image exactly the way I wanted it or I was going to try to find out how to use CSS and wrap text.

My problem is my image in firefox is about 5px higher than it is in IE and again I would like the image to look like it does in IE. I know it is something basic but cant find it.

I have validated my code both css and html that did not help.

link www.designedmemories.com/AboutUs1
here is my css code
/* CSS Document
Below is the code for the page layout */
body
{
background-image:url(../Images/1st_backdrop.jpeg); /*Black Background */
background-repeat:no-repeat;
background-position:top center;
background-size: 100%;
/*font-size:100%;
line-height:18px;*/
}
#container
{
position: relative;
margin:auto;
Width:100%;
visibility: visible;
}
#header /* the gray background */
{
background-image: url(../Images/2nd_backround.PNG);
background-repeat:no-repeat;
position:absolute;
width:765px;
height:1170px;
left: 455px;
margin-top:0;
z-index:1;
border: 1px none #000000;
visibility: visible;
}
#topswag
{
background-image: url(../Images/top%20swag3.PNG);
background-repeat:no-repeat;
position:absolute;
width:1600px;
height:180px;
left: -8px;
top: -11px;
margin-top: 0;
z-index:2;
border: 1px none #000000;
visibility: visible;
}
#logo
{
background-image: url(../Images/Logo/Final_Logo.png);
background-repeat:no-repeat;
position:relative;
width:400px;
height:151px;
left: 310px;
top: 6px;
z-index:3;
border: 1px none #000000;
visibility: visible;
}
#welcome /*welcome banner */
{
background-image: url(../Images/header3.png);
background-repeat:no-repeat;
position:relative;
width:763px;
height:95px;
left:1px;
top: 190px;
z-index:4;
border: 1px none #000000;
visibility: visible;
}
#redline
{
background-image: url(../Images/line.png);
background-repeat:no-repeat;
position:absolute;
width:90px;
height:1032px;
left: 347px;
top:170px;
z-index:4;
border: 1px none #000000;
visibility: visible;
}
/* main content below this point */
#flower1
{
background-image: url(../Images/Flower_alone1.png);
background-repeat: no-repeat;
position:absolute;
width:100px;
height:63px;
left: 156px;
top: 295px;
z-index:4;
border: 1px none #000000;
visibility: visible;
}
#maintext /* Homepage */
{
position:absolute;
width:424px;
height:253px;
left:1px;
top:380px;
margin-top: 0;
z-index:7;
visibility: visible;
}
.italic
{
font-style:italic;
}
.indent /*Aboutus */
{
text-indent:85px;
}
#maintext2 /* Aboutus */
{
position:absolute;
width:763px;
height:253px;
left:1px;
top:325px;
margin-top: 0;
z-index:5;
visibility: visible;
}
.maintext /*homepage*/
{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0;
color: white;
font-size: 20px;
}
.maintext2 /*AboutUs page*/
{
text-align: Left;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0;
margin-left: 20px;
margin-right: 20px;
color: white;
font-size: 20px;
}
/* this loads the special font for the word "ART" */
@font-face {
font-family: Jellyka;
src: url(../Fonts/JellykaWesternPrincess.eot) /* EOT file for IE */
}
@font-face {
font-family: Jellyka;
src: local("Jellyka Western Princess.ttf"), url(../Fonts/JellykaWesternPrincess.ttf) format("truetype"); /* TTF file for CSS3 browsers */
}

#mainart
{
/* font-family:Lucida Sans; */
font-family: Jellyka;
src: url(../Fonts/JellykaWesternPrincess.eot);
font-size:75px;
/*font-weight:400;*/
margin-top: 0;
color:white;
text-align:center;
}
#picsrtside
{
background-image: url(../Images/rightside_pic.png);
background-repeat:no-repeat;
position:absolute;
width:320px;
height:624px;
left:435px;
top: 292px;
z-index:4;
border: 1px none #000000;
visibility: visible;
}
#picsbtside
{
background-image: url(../Images/bottomside_pic.png);
background-repeat:no-repeat;
position:absolute;
width:745px;
height:195px;
left:10px;
top: 940px;
z-index:4;
border: 1px none #000000;
visibility: visible;
}
#flower2 /*aboutus top of the page*/
{
background-image: url(../Images/Flower_alone1.png);
background-repeat: no-repeat;
position:absolute;
width:100px;
height:63px;
left: 1px;
top: 287px;
margin-top:0;
z-index:4;
border: 1px none #000000;
visibility: visible;
}
#flower3 /*aboutus bottom of the page*/
{
background-image: url(../Images/three_flowers.png);
background-repeat: no-repeat;
position:absolute;
width:308px;
height:179px;
left:455px;
top: 923px;
margin:0;
z-index:4;
border: 1px none #000000;
visibility: visible;
}
H1 /* setting for the terms and condition page */
{
font-family:"Lucida Sans";
font-weight:bold;
font-size:16px;
color:black;
margin-left:10px;
margin-right:10px;
text-decoration:underline;
}

 

I'm not sure which image you are referring.
And the best practice for crossbrowser development is reset the HTML elements first using css.

Take a look at this.

 

are you referring to the flower2 div? Not sure why you are using position:absolute or a separate div for the image. Why not just put the image inside of your <p class="maintext2 indent"><img...> and align it left?

 

I think I tried that with the same result and so I thought ibwas doing something wrong. Thanks