Div Positioning of Flashcontent 1

[ginger213]

Hi,

I've got a fairly simple page that uses 2 columns, one of which contains a 400px x 300px slideshow. The slideshow uses a div called "flashcontent".

For some reason, in IE6, it appears in the left column (as it should), but fills the entire cell and beyond, even though the width and height have been specified as 400px x 300px. It also covers a paragraph of text that's supposed to be right below the div that holds the slideshow.

In Firefox, the slideshow div seems to cover almost the entire page.

I'm really baffled and hope someone can take a look and offer some help. I'd be really, really grateful!

Here's the url:

http://www.forsale-stlouis.com/homes-for-sale-by-owner/index2.shtml

Thanks,
ginger

 

[traingamer]

Nice house. Somewhere off Conway Road?

Anyway, I hate mixing divs inside tables and maybe someone else will come up with an exact reason, but this seems to solve it for me in IE6.

I've enclosed your flashcontent div within another one and it seems to work ok for me:

<div id=wrapper2 style="width:450px; height: 300px; overflow: auto;  border: solid 1px red;">
      <DIV id=flashcontent>This SlideShowPro photo gallery requires the Flash 
      Player plugin and a web browser with JavaScript enabled.</DIV>
</div>

It has something to do with the browser assigning a lot more space than it needs. I'll look at it a little more closely over the weekend if I get a chance.


Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[Vragabond]

All the CSS you have applied to the flash object is messing up the display. Let's see:

<div id="wrapper2" style="[red][s]border: 1px solid red; overflow: auto; width: 450px; height: 300px;[/s][/red]">

I would get rid of all this. It is not necessary. You define the dimensions of your flash in the flash itself, border was probably there just for debugging and overflow: auto ... I guess you wouldn't want to have scrollbars on your flash content.

<object id="flashcontent" width="400" height="300" type="application/x-shockwave-flash" data="loader.swf" style="[red][s]visibility: visible; position: absolute; width: 100%; left: auto; margin-left: 0pt; height: 100%; top: auto; margin-top: 0pt;[/s][/red]">

Here's the core of your problems. Your flash object should be 100% high and 100% wide, but positioned absolutely. That means it is only positioned relatively to the first positioned parent (in your case, there is no such element so it reverts back to the viewport -- the browser window). Basically you're asking here for your flash to be 100% of your browser window. We must get rid of the absolute positioning (not needed at all), then of height and width (you have it defined in the html attributes, no need to override it here), top and left refer to absolute positioning, albeit they are useless and visibility and margins should not play a role. All gone.

#flashcontent {
  [red][s]visibility: hidden;
  height: 400px;
  vertical-align: top;
  width: 400px;[/s][/red]
}

Finally, you also define things about flash object in your CSS. Yup, everything goes here too. Visibility, height and width you override with the inline style anyway, although they're not needed here or there. You hide the element in the stylesheet and then show it inline. Lose both and you're happy. Your flash size, according to the flash parameters, is 400px by 300px. That's not 100% of the container (if the container is viewport or your wrapper, which is 450px by 300px) nor is that 400px by 400px as indicated by this CSS. So just remove all the CSS and let the parameters take over. Finally, since the flash is alone on its line, vertical-align plays no role.

If you remove all this CSS, your flash will display properly.

However, I still agree with traingamer that mixing tables and regular CSS layout is not a good idea. Ditch the tables.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ginger213]

It's fixed!

Thank you both for your help. I really appreciate your taking a look; and traingamer, you're close ... it's off of Mason Rd.

I'm working on transitioning to css based layouts (believe me I am), but since this is for a friend, I decided to code it the way I was taught 10 years ago. It's much quicker for me and less hair-pulling ... and it does validate.

Thanks again!
ginger

 

[ginger213]

Oh, and I'm not sure where you got the line of "visibility: hidden". I don't think I ever added that, although I did try to set the width and height in an attempt to constrain it vertically as well as horizontally in Firefox.

Like I said, it's working now though!

Thanks again!
ginger

 

[traingamer]

The 'wrapper2' was my fault and not in the original file when I looked at it.

Good explanation. I don't use Flash much and kind of sledgehammered an attempt before heading home on Friday.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard