Topic: 2 pixel gap above flash movie
Hello,
I have integrated PunBB with my website bij placing the html of the design into the main.tpl file ( header, footer )
All looks fine accept for the flash movie in the header.
In firefox there appears a 2 pixel gap above the movie in the header.
The other pages ( not integrated with PunBB ) look fine.
I think it has to do with the .css used by the forum, but can't figure it out whats doing it.
I'm using javascript for the flash elements.
Here is the code i used in the main.tpl file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<title></title>
<meta http-equiv="Content-Language" content="nl">
<script type="text/javascript" src="../nav/stmenu.js"></script>
<script type="text/javascript" src="../javascript/forum_header.js"></script>
<link href="../lytebox_forum.css" rel="stylesheet" media="screen" type="text/css">
<pun_head>
</head>
<body bgcolor="#f1efe2">
<table width="850" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../images/header_top.gif" width="850" height="74" border="0"></td>
</tr>
<tr>
<td><script type="text/javascript">removeIEdoubleclick("../flash/header.swf","850","85");</script></td>
</tr>
<tr>
<td height="45" background="../images/menu_bg.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="4" colspan="2"></td>
</tr>
<tr>
<td width="379" height="26"> </td>
<td width="470" height="26" background="../images/menu_dividers.gif"><script type="text/javascript" language="JavaScript1.2" src="../nav/forum_menu.js"></script></td>
</tr>
<tr>
<td height="1" colspan="2"><img src="../images/menu_line.gif" width="850" height="1" border="0"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="55" background="../images/koppen_bg.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td height="40" valign="bottom" class="style1">Forum</td>
<td> </td>
</tr>
<tr>
<td width="60"></td>
<td width="730"><hr noshade style="border: 1px dotted #999999" color="#999999" size="1"></td>
<td width="60"></td>
</tr>
</table></td>
</tr>
</table>
<table width="850" border="0" align="center" cellpadding="0" cellspacing="0" background="../images/main_bg.gif">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60"> </td>
<td width="730">
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
<div id="brdheader" class="block">
<div class="box">
<div id="brdtitle" class="inbox">
<pun_title>
<pun_desc>
</div>
<pun_navlinks>
<pun_status>
</div>
</div>
<pun_announcement>
<pun_main>
<pun_footer>
</div>
</div>
</td>
<td width="60"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr></table>
</td>
</tr>
</table>
<table width="850" height="49" border="0" align="center" cellpadding="0" cellspacing="0" background="../images/footer_bg.gif">
<tr>
<td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="style14"> </td>
</tr>
<tr>
<td height="7"></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>Here is the code from the javascript ( to display the flash movie )
function removeIEdoubleclick(sourceURL,width,height)
{
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width=' + width + ' height=' + height + ' id="deptsensors" align="middle">\n');
document.write('<param name="allowScriptAccess" value="sameDomain" />\n');
document.write('<param name="movie" value=' + sourceURL + ' />\n');
document.write('<param name="quality" value="high" />\n');
document.write('<param name="wmode" value="transparent" />\n');
document.write('<param name="bgcolor" value="#ffffff" />\n');
document.write('<embed src=' + sourceURL + ' quality="high" wmode="transparent" bgcolor="#ffffff" width=' + width + ' height=' + height + ' name="Texas Dream Designs" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />\n');
document.write('</object>\n');
}Here is the .css i have added
body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; }
body { background-image: url(images/top_bg.gif);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #f1efe2;
}
.style1 { font-size: 22px; color: #cc0000; font-weight: bold; }
.style2 { font-size: 16px; color: #008000; font-weight: bold; }
.style3 { color: #CC0000; font-weight: bold; }
.style4 { font-size: 11px; color: #FFFFFF; font-weight: bold; }
.style5 { font-size: 22px; color: #333333}
.style6 { font-size: 11px; color: #FFFFFF; font-weight: bold; }
.style7 { font-size: 12px; color: #cc0000; font-weight: bold; }
.style8 { font-size: 14px; color: #183A4D; font-weight: bold; }
.style9 { font-size: 11px; color: #cc0000; font-weight: normal; }
.style10 { font-size: 14px; color: #cc0000; font-weight: bold; }
.style11 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #333333; }
.style12 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #CC0000; }
.style13 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
.style14 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #CCCCCC; }
a:link { color: #CC0000; text-decoration: none; }
a:visited { text-decoration: none; color: #CC0000; }
a:hover { text-decoration: underline; color: #183A4D; }
a:active { text-decoration: none; color: #CC0000; }
a.1:link { color: #FFFFFF; text-decoration: none; }
a.1:visited { text-decoration: none; color: #FFFFFF; }
a.1:hover { text-decoration: underline; color: #FF9900; }
a.1:active { text-decoration: none; color: #FFFFFF; }
.texta {
font-size: 10px;
background-color: #CCCCCC;
border: 1px solid #666666;
}
A img{ border: none;}
form { margin:0px; }Any help would be great...
ps.
Sorry for my bad English