Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Flash Object not respecting div height in Gecko

5:13 pm on Feb 17, 2003 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2003
votes: 0

This is a crossover question, part CSS and part Flash.

By way of preamble. I am trying to develop highly liquid CSS based sites that use relative sizing of page elements (header, footer, nav and content) One of the problems I have come across is how to create a elastic banner that will actually resize when the user resizes the window. If you use a blocky font, it is amazing what you can do with a transparent monochrome gif and make it dimensioned in %ages rather than px. However, to get a truly resizable header, you need a vector object, the most common example being Flash. (Please - I don't want to discuss the merits of using Flash here - that's another thread ;))

My problem: I have a Flash header with a nominal size of about 80px x 800px. This header is in a CSS div with this CSS:

#masthead {
position : absolute; overflow: hidden;
top: 0;left: 23%;
height: 9%;
width: 73%;
text-align : center;
margin: 0;
border: 1px dotted yellow;
and this HTML
<div id="masthead">
<object type="application/x-shockwave-flash" data="header.swf" style="height:99%; width:99%;" />
<param name="movie" value="header.swf" />
<img src="tools.gif" width="99%" height="99%"
alt="" />

This works beautifully in IE5+ & 6, but fails in Gecko. Specifically, the Flash object fills 99% of the viewport height, not 99% of the div.

I'm not sure if this is a coding problem on my part :( or a Flash problem, or a Browser problem in Gecko?

Has anyone else tried this or had similar experience with relatively-sized Flash objects? I have posted this question on another Forum without luck. This seems to be the most knowledgeable group on the net so I am sure someone has an idea.



5:18 pm on Feb 17, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Dec 13, 2002
votes: 0

It was suggested very recently (I forget by who) that a height attribute ought to be applied to the body element, too. I'm not sure of its relevence entirely, having never looked into it, but it sounds as plausible as anything I can think of.

I'm sure someone'll solve it, through some cunning methodolgy unbeknownst to non-wizardy people.

Found the link, and it was SuzyUK who mentioned it here [webmasterworld.com]

6:29 pm on Feb 17, 2003 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2003
votes: 0

The body DOES have a height property:
html {
body {
margin: 0;
padding: 0;
background-color : #D6D3CE;
background-image : url(Watermark.gif);
background-repeat : no-repeat;
background-position : 50%;
background-attachment : fixed;
min-height: 300px;
min-width: 500;
overflow: hidden;
but you are right in making the point.




Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members