Extra space below the flash photogallery in HTML

Hi

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”>
<head>
<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” />
</head>
<body>
<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>
</object>
</div>
</div>
<div id=“footerPan”>@2008 Kuul13</div>
</body>
</html>

Style.css
/* 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;}
ul{list-style-type:none;}
/
----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!!!