Flash and CSS problem for Mac/IE

H

highdudgeon

Registered
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?!
 
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.
 
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.
 
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/ -
 
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).
 
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.
 
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!
 
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.
 
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!
 
You must log in or register to reply here.
Back
Top