Member Avatar for juseasy

SWF Object Causing IE top margin problems
I have a flash mp3 player on my website that is causing the main wrapper of the page to shift down by about 3px. The pages display perfectly in Fire Fox but when I open them in Internet Explorer 8 there is appears to be a margin set (same colour as the background).

When I remove the SWF from the page it works fine in all browsers. I have tried changing the margin-top to -3px. That works for IE but when I open the page in Fire Fox the top couple of pixels of the wrapper is cut off.

I tried using a conditional stylesheet to change the top margin to -2px when IE is being used. That was able to get rid of the white space but there is still a background colour space between the main wrapper and the top. As though the wrapper shifted down a couple px.

Any suggestions would be greatly appreciated!

  • 3 Contributors
  • 3 Replies
  • 197 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by giobongio

Dani AI

Generated

A short, practical addendum addressing the thread: ’s description (works in Firefox, 3px gap in IE8, removed when the SWF is removed; negative top margin only partly helped) points to rendering/layout differences for the embedded object rather than a global wrapper bug. ’s conditional-CSS approach can mask the symptom but often doesn’t find the root cause. Common, reliable checks and fixes follow.

Common quick fixes (try in a temporary test page first)

  • Make the Flash element a true block-level box and remove inline whitespace/line-height effects.
  • Ensure the page uses a standards DOCTYPE so IE isn’t in quirks mode.
  • Toggle the Flash wmode (test both with and without opaque/transparent) to see if plugin rendering changes layout.

Example CSS to test (apply to the flash placeholder or the object/embed directly):

/* apply to the flash wrapper and the object/embed */
#flashHolder, object, embed {
  display: block;
  vertical-align: top;
  margin: 0;
  padding: 0;
  line-height: 0;
}

If embedding via object/embed, test adding a wmode param (only for testing — wmode can affect z-order and performance):

<param name="wmode" value="opaque" />
<!-- embed ... wmode="opaque" ... -->

Troubleshooting workflow (fast and precise)

  • Use IE’s F12 developer tools to inspect computed offsetTop, margins and padding on the wrapper and the flash node.
  • Temporarily give the wrapper and flash holder contrasting outlines (e.g., outline: 1px solid red) to see which element is creating the gap.
  • Check that the flash container isn’t the page’s first child with a top margin that collapses into the parent (inspect the flash holder’s own CSS).
  • If the issue persists and affects right/bottom spacing as noted, confirm explicit width/height on the object and that no extra inline text nodes surround the embed.

Avoid negative margin hacks as a long-term fix; they hide the underlying rendering difference and can cause other cross-browser problems. The steps above identify the true element and property responsible so the layout can be fixed cleanly.

Recommended Answers

All 3 Replies

Member Avatar for maryparker

A conditional stylesheet should fix it. This goes under your stylesheet link in the head section:
Code:

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8fix.css" />
<![endif]-->

The new stylesheet (ie8fix.css) should only contain the negative margin fix.

Member Avatar for juseasy

thanks maryparker...but I've tried that already. Still having the same problem

Member Avatar for giobongio

Hi. I'm not sure if your problem is similar to mine. I'm embedding flash content with SWFobject and div tag. This displays correctly in Firefox and Chrome, but when I load it in IE, a big margin appear to bottom and right. Have you solved the problem? Thanks.

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.