Extra space below the flash photogallery in HTML


I have an HTML file that uses photo gallery that i created using this site. And I have placed the flash object within a DIV tag. I don’t know why it is showing extra spaces below the flash object. I tried writting everything in one line and also tried changing the DIV properties in CSS file. as suggested in some sites… nothing worked…
HTML code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<title>Home Page</title>
<link href=“style.css” rel=“stylesheet” type=“text/css” />
<div id=“bodyPan”>
<div id=“bodyTravelogyFlashPan”>
<object width=“700” height=“300”>
<param name=“movie” value=“travelogy.swf”>
<embed src=“travelogy.swf” width=“700” height=“300”> </embed>
<div id=“footerPan”>@2008 Kuul13</div>

/* CSS Document /
body{padding:0px; margin:0px; background:#fff; color:#666; font:12px/18px Verdana, “Times New Roman”, Times, serif;}
div, p, ul, form, label, h2, h3, h4, img{padding:0px; margin:0px;}
----BODY PANEL----*/
#bodyPan{width:770px; clear:both; border:0px solid red;}

#bodyTravelogyFlashPan{width:700px; height:300px; margin:0px 0px 0px 0px; border:1px solid black;}

I added the border = 1px just to see the space… Appreciate if anyone can help me with this… i tried everything but nothing seems to work. Please see the attached screenshot with red arrow showing the space below the flash object. please help!!!