ZoomCities IT Community Webmaster Forum

I have a consistent issue where when i embed a .swf file, it always has a small border/padding/margin on the bottom that creates blank space between itself and the next block element below it. this anomaly only shows in FF, not IE6.

here is my example. you can see the shader image below the banner sits flush against the banner in IE but has like a 5px white space between it in FF: http://www.buildmyweb.zoomcities.com/wg/

any idea how to address this?

HTML:

Code:

<?xml version="1.0"?>

<!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">

<head>

    <link rel=stylesheet type="text/css" href="wg.css">

</head>

<body>

<div id="wrapper">

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800px" height="90px">

                <param name="movie" value="flash/wg.swf">

                <param name="quality" value="high">

                <param name="wmode" value="transparent">

                <param name="loop"    value="false"

            <embed src="flash/wg.swf" width="800px" height="90px" loop="false" wmode="transparent" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" >

            </embed></object>

    <div id="bannershader">

    </div>

    <div id="leftpanel">

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

    </div>

    <div id="leftpanel2">

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

        placeholder links <br />

    </div>

    <div id="leftpanel3">

    </div>

</div> <!-- close wrapper -->

</body>

</html>

css:

Code:

body { background-color: #ffffff; font:normal 10pt Arial; color:#000000; text-decoration:none; text-align: center; margin:0; padding:0; line-height: 1.0;}

/* translucent layer that simply centers the whole page */

#wrapper { position:relative; top:0px; width:800px; margin:0 auto; padding:0; text-align:left; z-index:1; }

#bannershader { float:left; background: url('pics/bannershader.jpg'); width:800px; height:15px; z-index:5; background-repeat:repeat-x; }

#leftpanel { float:left; background-color:#E0DFC1; border-top:1px solid #EBEAD4; border-bottom:1px solid #9A9984; width:150px; z-index:10; }

#leftpanel2 { clear:both; background-color:#E0DFC1; border-top:1px solid #EBEAD4; border-bottom:1px solid #9A9984; width:150px;  z-index:10; }

#leftpanel3 { clear:both; background: url('pics/bannershader.jpg'); width:150px; height:10px; z-index:5; background-repeat:repeat-x; }

Don't know if this solves your problem but you forgot a > (greater-than sign)

Code:

        <param name="loop"    value="false"

- Rik©

It automatically fixes it, but that should be added just for valid sake. The problem is the line height though. Setting line-height:0; in the body should work. Then you should make a container for the rest of the page so that you can just go #main-container { line-height:1; } and that should be good.

this is not the first time your help was effective. thanks dark!

Dave to the rescue...yet again.

ramsonne

Rik©

darkfate

ramsonne

mackdunnie