Flash and CSS problem for Mac/IE

[highdudgeon]

It's the eternal thing, isn't it?

Anyway, here's the deal: I'm working on a design that uses low-alpha PNGs for Safari, Mac/IE, and, well, pretty much everyone else, and the CSS opacity filter for Win/IE. Nevermind the goofy Flash movie, it's a placeholder:

http://www.highdudgeon.net/sites/test/eegallery8.html

Notice that the Flash movie is in a totally different DIV than the rest of the content -- that's the only way this layout will work. And here's the problem: it actually works well for all browsers EXCEPT Mac/IE, which now ceases to display the PNG. Something about having a Flash movie in another DIV kills that function. THis is pretty urgent -- ideas?!

[mdnky]

Didn't see any flash movie, and looks basically the same in both browsers on my computer.

Safari: http://test.designs4efx.com/highdudgeon/Picture%201.pdf
IEMac: http://test.designs4efx.com/highdudgeon/Picture%202.pdf

[highdudgeon]

Nope, you experienceed the problem, too! The photo gallery IS a Flash movie (SWF). In your Safari version, you'll notice a translucent effect over the menu items; in the IE version, this effect is deactivated, and only becomes deactivated when Flash is present.

[highdudgeon]

Allow me to clarify -- if you look at the code, you'll see that the layout and menu items (to the left and right) are defined in CSS. The Flash movie floats over the DIV that contains them.

[mdnky]

My bad. I wasn't paying attention last night.

Try to break the habbit of using negative margins and 50% positioning for horizontal centering. It's not the best way to go about it. Use the auto value on the left and right margins for this instead.

Also, there's no real need for absolute positioning everything. Float it instead and it'll work nicely...even in IE.

It seems there's something haywire with the flash movie. On load, it'll display fine (nice and centered as I assume you intended) but on a mouse over of the thumbs the image jumps to the left. There's also a lot of unneeded space in general. Get rid of that space in the flash file and use CSS to control the margins around the object.


Here's a rewrite of the page. Some things are slightly different, I wasn't worrying too much about 'exact' exactness...just trying to provide an example using floats and more accessible HTML. The CSS is in HTML. Works in Safari, IE-Mac. I can't test in Win browsers right now, so I didn't. It's a bit weird in Firefox (1.0 Mac), I'm betting on the movie being the cause there. Try making it as described above, with a width of 460px.

- http://test.designs4efx.com/highdudgeon/ -

[highdudgeon]

Thanks. Yeah, that was a lot of code, but it was there for a reason -- to get this thing compliant with Win/IE (the biggest offender, by far). In fact, without the absolute positioning, it just doesn't fly there.

I go back and worth on negative margins/"auto auto." What I don't like about auto margins is that the design inevitibly does favor the left margin. With the negative margin, it simply works and is fully centered (ie, when you expand or collapse the window, the layout remains dead center).

The movie is funky because it's a work in progress -- I just increased the size (from the original 400) to what the actual size will need to be; I realigned original places, but didn't altar the MCs -- that's why they flick to the left like that. Right now, I'm just looking to get this working. (And, it really DOES have to be much wider, because thumbnails need to run all the way across the bottom of the design).

[highdudgeon]

FYI, your re-write is no different -- the opacity effect is lost on Mac/IE; it does not work in Mac/Ie. Look carefully at both browser displays -- you'll notice that the opacity overlay is lost in Mac/ie. Same problem I've been having.

Anyway, it's not a Flash issue -- it's a Mac/Ie-CSS bug.

[highdudgeon]

Nice code, though; very nice. I'll try it out on a PC as soon as I can.