Good afternoon,

Just hoping that one of you beautiful persons can help...
I'm building a web page using HTML and CSS and all is going great in IE7, Firefox on the other hand...

I'm getting a space of about 3px under a flash navigator as you may see in the attached file, you can also find the image here: Bloody Firefox!!

The top white area is the margin around the main table. The next part down is the banner for their logo. The red and silver triangles are buttons in the navigation systems (flash).
It's the part below the flash navigator that is the problem - there's about 3 or 4 px of white space which I don't want. After this there is an image.

My html for this section is as follows:

<body>
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3"><img src="images/temp/banner.gif"/></td>
  </tr>
  <tr>
    <td colspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="605" height="31" title="Flashpoint Fire Service">
      <param name="movie" value="images/nav.swf" />
      <param name="quality" value="high" />
      <embed src="images/nav.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="605" height="31"></embed>
    </object></td>
  </tr>
  <tr>
    <td><span class="pic"><img src="images/temp/left-banner-big-flames-and-firefighters-thumb47456.jpg" width="172" height="124" /></span></td>
    <td>&nbsp;</td>
    <td><span class="pic2"><img src="images/temp/main-banner.jpg" width="822" height="124"  /></span></td>
  </tr>
</table>

I tried not using CSS to see if there was a conflict but the problem is still there. Things look fine in Dreamweaver (though I know this isn't always good to judge by), it's just Firefox that is having an issue.

Any assistance would be greatly appreciated,
Thankyou for reading.

Scrawn Dog

Try adding CSS like this to wherever the rest of your styles are defined:

object,embed
{
margin:0;
padding:0;
}

That's the only thing I can think of off the top of my head... Also.. check to see if the space is INSIDE the object/swf instance itself, or if it's in the page; that is.. check to see if the movie itself is exactly 31px high, and whether changing the height specified in the object tag and embed tag changes the white space atall...

Cheers mate, but no luck unfortunately.
I just installed Opera to quench my curiosity and the site looks fine.

I've never had this happen before, it's got me completely stumped!

I used to swear by Firefox, I hope that doesn't change...

Hm.. the only other thing I can suggest is putting a background color on the movie that fits in better with the other colors on your page. That's not really a fix though, by any means. You could also try giving the section(s) underneath position:relative; and top:-3px; via CSS, and then only serve that rule to FF.. but that's even messier and a little complicated to say the least..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.