[RESOLVED] center flash in firefox nightmare

Hi guys,
What a friggin time i am having with this :help:

I have just discovered that the past few site i have built dont center properly in flash.

I thought that i had sorted this today using div with style sheet

Code:

---

<style type="text/css">
<!--
BODY {
        margin: 0px;
        padding: 0px;
        background-color: #000000;
}
#flashcontent {
position: absolute;
left: 50%;
top: 50%;
margin-top: -265px;  /*minus half the height of the movie, so if your movie was 600 pixels high this would be -300px etc... */
margin-left: -382px; /* minus half the width of the movie */
}
#TopLayer {
position: absolute;
left: 50%;
/*top: 30%;
margin-top: -265px;  minus half the height of the movie, so if your movie was 600 pixels high this would be -300px etc... */
margin-left: -382px; /* minus half the width of the movie */
background-image: url(barTop.jpg);
width: 765px;
height: 30%;
}
#BottomLayer {
position: absolute;
left: 50%; top: -65px;
margin-top: 500px; /* minus half the height of the movie, so if your movie was 600 pixels high this would be -300px etc... */
margin-left: -382px; /* minus half the width of the movie */
background-image: url(barBottom.jpg);
width: 765px;
height: 41%;
}
-->
</style>

---

I have discovered that if the user resizes the page then it all goes wonky :S
the top half of the movie dissappears :S

Example

Can some one please tell me how to fix this. html is not one of my strengths.

Thanks
Paul

Works fine in FF2. I don't have FF1 to test on.
I've found the best way to center something is with margins and a width.

#myCenteredDiv{
width:300px;
margin:0px auto;
}

Version 2 i have as well.
the problem is no longer with centering but with what happens when you resize the page. i lose have the swf into the top of the browser

Yeah I tried that too, resizes fine as well.
I noticed you have the tops and lefts set to a percentage, but the margins are exact values. That's bound to conflict.

Here's a page I just finished that does the same thing.
http://www.lightgroup.com/home.html

it resizes fine???
I have tested every browser size availble to me (800* upto 1440*) and ever one has the same undesirable effect. top of flash movie disapears into the browser and a chunk of the image on the bottom div disappears :S
Can you help me fix this?

it resizes fine???
I have tested every browser size availble to me (800* upto 1440*) and ever one has the same undesirable effect. top of flash movie disapears into the browser and a chunk of the image on the bottom div disappears :S
Can you help me fix this?

Hi,

Am I right in thinking you'd like the TopLayer and BottomLayer background images to form a column down the centre of the page that runs the complete height of the browser window with the movie vertically centred in the middle?

If so it should be possible to simplify the CSS a bit,

Code:

---

body {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  text-align: center; /* use text-align to make IE in quirks mode centre the divs */
  background: #000 url(lines.jpg);
}
/* setup the width, margins and padding for all the divs */
#TopLayer, #flashcontent, #BottomLayer {
  width: 766px; /* see note below about widths */
  margin: 0 auto; padding: 0; /* margin 0 auto centres the divs horizontally for FF, Opera, IE in standards mode etc... */
}
/* take up half the height of the page with the topBar background */
#TopLayer {
  height: 50%;
  background: url(barTop.jpg);
}
/* and fill the other half with the bottomBar background */
#BottomLayer {
  height: 50%;
  background: url(barBottom.jpg);
}
/* now position your movie absolutely so it appears right in the centre */
#flashcontent {
  position: absolute;
  left: 50%; top: 50%;
  margin-top: -265px;
  margin-left: -383px; /* again see note below */
}

---

The CSS uses the value 766px as the width of the content instead of the 765 which is the actual width of the movie. This is to get a width that is exactly divisible by 2, doing this prevents occasional alignment issues where the movie would sometimes (depending on screen width) appear 1 pixel out of alignment with the background.

Tested in IE6, Firefox 2 and Opera 9.

Hope this helps :)

Thank you very much catbert303
Will try now.

Sits perfect when the browser is maximized but It still send's the top half of the swf into the browser when the page is resized.

How small are you making the window? That only happens for me if you resize the window so that it is smaller than the movie itself. That is the calculation half the height of the browser window - half the height of the movie becomes negative. If this is a problem you might be able to workaround it with Javascript. Something like this might help:

Code:

---

<script type="text/javascript">
window.onresize = function() {
    var h = document.body.offsetHeight;
    var f = document.getElementById('flashcontent');
    if (h < 530) { // the movie is taller than the window - don't try to centre it vertically
        f.style.marginTop = '0px';
        f.style.top = '0%';
    } else {
        f.style.marginTop = '-265px';
        f.style.top = '50%';
    }
};
</script>

---

THanks catbert303 you have saved me a long stressfull week.