# Flash and CSS problem for Mac/IE



## highdudgeon (Feb 26, 2005)

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 (Feb 27, 2005)

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

Safari:  http://test.designs4efx.com/highdudgeon/Picture 1.pdf
IEMac:  http://test.designs4efx.com/highdudgeon/Picture 2.pdf


----------



## highdudgeon (Feb 27, 2005)

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 (Feb 27, 2005)

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 (Feb 27, 2005)

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 (Feb 27, 2005)

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 (Feb 27, 2005)

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 (Feb 27, 2005)

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


----------



## highdudgeon (Feb 27, 2005)

Just for giggles, though, I tried it with a much, much smaller swf -- 200px.  Again, we lose the transparency bg for mac/ie.

Your code is terrific, though -- the more I look at it, the more elegant it is.  Simple and clean!


----------



## mdnky (Feb 27, 2005)

I had my brother do a screen-cap for me, so here's IE 6.  Broken, but it's fixable with a few tricks.  http://test.designs4efx.com/highdudgeon/IE6-XPHome.jpg

You're better off building the site with a compliant browser (Safari or Firefox) first, then when you have it ready to go; go back and fix small issues and stuff in the non-complaint/other browsers.

I don't have access to a Win box right now as I blew VPC off my Mac and loaned my Win test-box out to a family member.  Tomorrow I'll play with it and get Win-IE working right.  Shouldn't take too long at all.

As far as IE-Mac...well, it's an annoying browser sometimes.  Part of it could be the PNG itself.  One solution is to use a separate background image for it that's not transparent.  With it's low use, it might be a solution.  Not every browser is going to display it as you'd like, at least it's possible to limit that to the browsers that are barely used.


----------



## mdnky (Feb 27, 2005)

IE5 Mac problem with the background image is fixed.  Remember to ALWAYS use an image that has at least one dimension greater than 64px if you want PNG transparency to work in IE-Mac.  That was the issue.

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


----------



## highdudgeon (Feb 27, 2005)

Gadzooks, this is strange -- after clearing my cache repeatedly, your solution now DOES work for Mac/IE.   Yippie!  Only, not on my local machine.  How strange is that?  I can see the effect correctly over the net, but, even correcting the code to make it local, it doesn't fly.  I hate IE!


----------

