Page 1 of 1

white space above flash header in IE not in FF [solved]

Posted: Mon Jul 02, 2007 7:47 am
by Gregor
Hello,

I have inserted a flash header on my site http://www.uisge-beatha.eu/
Viewing the site in FF, no problem (besides it is a little too narrow), however in IE I have some white space above the flash header.

To get the header running, I used a UDT:

Code: Select all

/* Java script om flash weer te geven in de template */
echo '<__script__ type="text/javascript">';
echo 'var so = new SWFObject ("uploads/Flash/flash banner/intro_header.swf", "mymovie", "960", "200", "0", "#61363c");';
echo 'so.write("header_banner");';
echo '</__script>';
In the template I placed:

Code: Select all

{literal}
<__script__ type="text/javascript" src="swfobject.js">
</__script> 

<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
...........
Further down the template, I placed:

Code: Select all

           <!-- flash header inserted -->
           <div id="header_banner"> 
               {flash_header}
           </div>    

   </div>
   <!-- End Header -->

In the stylesheet:

Code: Select all

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
center image

div#header {
   background: url(/uploads/images/Logo_Hanse.gif) #61363c no-repeat center center; 
   height: 120px;
}
*/


div#header h1 a {
/* you can set your own image here left image

   background: url(/uploads/images/logo_links1.gif) no-repeat 0 0px;
*/
   display: block;
   height: 0px;             /* was 120 adjust according your image size */
   /* width: 198px;       eruit gehaald, zie cms-forum */
   text-indent: -999em;   /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}


/* position for the search box */
div#search {
   float: right;
   width: 23em;    /* enough width for the search input box */
   text-align: right;
   padding: 0.1em 0 0.2em 0;
   margin: 0 1em;
}

Anyone a suggestion how the remove the white space above the header?

Thanks in advance,
Gregor

Re: white space above flash header

Posted: Mon Jul 02, 2007 9:44 am
by Gregor
It works for IE, but not for FF

I thought I found the solution for IE. I'd to place
margin-top -18px;
in the css for the flash-header to move the header a little up. However, in FF it is 18px too high :(

Re: white space above flash header in IE not in FF

Posted: Mon Jul 02, 2007 10:59 pm
by Nullig
Try adding this to your stylesheet:

* html body div#header_banner {
margin-top: -18px;
}

Nullig

Re: white space above flash header in IE not in FF

Posted: Tue Jul 03, 2007 4:59 am
by Gregor
Thanks Nullig for your reply. That solved the problem. First it did work, untill I saw that a ':' was missing after 'margin-top'.

Thanks for your fast reply,
Gregor