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

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

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

Post 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
Last edited by Gregor on Tue Jul 03, 2007 5:03 am, edited 1 time in total.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

Re: white space above flash header

Post 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 :(
Last edited by Gregor on Mon Jul 02, 2007 3:27 pm, edited 1 time in total.
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm

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

Post by Nullig »

Try adding this to your stylesheet:

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

Nullig
Last edited by Nullig on Tue Jul 03, 2007 5:21 pm, edited 1 time in total.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

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

Post 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
Last edited by Gregor on Tue Jul 03, 2007 5:03 am, edited 1 time in total.
Post Reply

Return to “Layout and Design (CSS & HTML)”