it Hi, so I have a flash header on my site – nothing crazy, just a short clip. It works in safari and opera on the mac and all IE versions on PC. It will not work properly on firefox on either PC or Mac. Firefox seems to be putting a gap of 10-20px under the flash, and it looks stupid 🙁
I have looked up many fixes for this as it seems to be a known problem. I have seen people say it’s because the “object” element it treated like letters in FF, so it allows room for the “tails” on a G and Y etc (not sure if I explained that well enough, hopefully you get the idea). I have tried margin:0; padding:0; line-height:0; font-size:0; float:left; vertical-align:middle; and clear;both; – not at the same time, I have tried many combinations and got most of these ideas from other threads/articles where people had found a solution. I have tried this CSS on an id attached to the object, on the element object and on the parent div – I just can’t seem to fix it!
Also, as a side note – I’ve noticed the flash looks good in IE6, IE7 but IE8 makes it looks awful – can anyone explain why or confirm that is what they see? Im a mac user so borrow a laptop to test, it would be good to hear if anyone else see’s this problem.
Thanks for any help you can provide, i’d like to sort real soon, I have been looking for an answer for hours now. I have also tried the swfobject thing which was recommended to me – works better in other ways but doesn’t help this problem.
change the margin bottom on #nav to padding bottom. You might then need to tweak your styling a bit