Question

for this site:

http://yoursdproperty.com/

do you see how there some extra white space all the way at the top?

how would i expand that image to get rid of that space?

The weird thing is that the flash file that runs the header images has already been changed by me to be the width of the page. Something in the CSS though makes it the old size of 940 wide.

please note that im only interested in making adjustments to the css or html, not flash or javascript

Answer 1

The Question (is this correct?):

1. How do I make the Flash movie extend to the full width of the page (instead of 940px)?
2. How do I cause the Flash movie to reside at the top of its parent element – and thereby at the head of the page?

The above should be done without modifying Javascript or Flash.

---

The Answer:

Part 1:
It seems that you are using FlashObject in order to embed the flash.
FlashObject accepts several arguments, the 3rd and 4th of which represent the width and height attributes of the element.

As long as those attributes are set they will override ANY other CSS classes you apply.
To change the width to 100%, you must change that 940 to 1040, or possibly to ‘100%’.

 <script type="text/javascript">
    var fo = new FlashObject("/templates/pjo_joomlaforall/images/header.swf", "topheader", '100%', 250, 7);
    fo.addParam("wmode", "transparent");
    fo.write("flashcontent");
 </script>

While this may count as using Javascript, it is the only solution that could work.

Part 2:
The actual swf you are dealing with is 240px wide and 200px tall.
The part of the flash file which is ‘image’ is only 50px tall, and is in the vertical center of the swf.

There is no way to use CSS to enlarge that 50px center within the SWF.
What you can do is use CSS enlarge the swf so that the height of the center matches your needs, and then some more CSS to crop off the top and bottom whitespace.

Place the embed tag inside an element whose overflow is hidden, and apply a negative top margin (or negative position) to the embed equal to the whitespace you wish to crop.

<style type="text/css"> 
#at-flashheader{ 
    overflow:hidden
}
#flashcontent{
    margin-top:-40px;
}
</style>
<div id="at-flashheader"><div id="flashcontent"></div></div>

‘Course, this won’t really work if the width of the swf is a percentage, as the height of the whitespace wont be constant.
If you set the width to a constant such as 1040px, you can set the negative top margin accordingly.

---

As an aside:

You really should be doing this with Mootools or JQuery instead of Flash.
Case in point – I have Flashblock on my browser, and had to jump through hoops just to see what you were talking about. Had I been on my iPhone, jumping through hoops wouldn’t have helped.