Safari and IE

[mark.ninnim]

1) Script Title: Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

3) Describe problem:

Please look at this url in both safari and IE

http://www.ckis.co.uk/systematic/home_2_4.html

On my mac it is perfect and on the windows IE it stops short. I would be very grateful of any advice how i could resolve this.

I am using iWeb and adding a HTML snippet to do so.

Many thanks in advance,

Mark

[jscheuer1]

What version of Windows and what version of IE?

[mark.ninnim]

Hi John

Thanks for the reply

IE 8 Windows
Safari 5.0.3

Since this morning I have redone this menu to a better effect, seen here

http://www.ckis.co.uk/systematic/home3.html

I've not done anything with the css yet in case its all for nothing... However, it is virtually identical on IE and Safari with one exception.

On Windows the movie plays above the drop downs on the menu?

Any ideas?

[mark.ninnim]

Well,

I have now managed to manipulate the CSS into something I like both colour and size wize.

I am a little concerned about the load time but I can live with it.

However, I cant live with the strange reaction it is having with the movie... On Safari I sometimes get a white block the size of the HTML snippet box and on Windows IE it simply scrolls behind the movie.

I guess I could redesign to avoid the clash but this seems like an easy way out.

Other than that, this is a great piece of code and resource, thank you.

Mark

[jscheuer1]

I may be misinformed but it's my understanding that there is some kind of a (so far one sided) multimedia war going on between Apple and the rest of the world such that they are curtailing their support of Flash and not making available a workable API for their (what is now becoming) proprietary QuickTime (tm) plugin.

Safari/Win still supports Flash as far as I know, but some Apple devices do not, though the App Store may now have something for that - though I wouldn't be too thrilled to have my page depend upon the user buying a plugin. The best I can figure is to browser sniff and give Safari and anything Apple the QuickTime version. All others, make up a Flash version. In other browsers you may use the wmode attribute/param set to either 'transparent' or 'opaque' (just not 'window', the default) to allow DHTML elements to appear over the Flash feature.

If I'm wrong about Apple's support of Flash and it's as universal there as it once was and still is for all other OS and browser combos, convert to Flash - the industry standard. Your files will load more quickly, stream more efficiently, and be of a smaller byte size with little or no loss in quality. And the API is well documented for cross browser use.

[mark.ninnim]

Hi John

Thanks again.

I understand where you are coming from. The movie in this page is Quicktime for the reasons you mention.

I can't believe that I cant get this menu to work...

Do you know anything about the z-index command? I've read that will tackle the layer issue?

[jscheuer1]

I know a ton about z-index. It's basically a type of positioning coordinate. When an item is position relative, absolute, or fixed, it can be given left, top, and/or z-index coordinates. The left and top are self explanatory, really the x-index and y-index. The z-index is the how elements stack on a page - like depth. Higher z-indexes stack on top of lower ones. But it cannot help you unless both elements that you are stacking are one of either position relative, absolute, or fixed. You can mix and match, but each must be one of those. And here's the killer - the elements involved must be ones that the browser recognizes as ones that can be stacked. The object tag used by QuickTime isn't one of these as far as I know, except in some Apple products. With Flash, there is wmode as I explained. This doesn't work with any other object or embed tag as far as I know, only with Flash.

[mark.ninnim]

Thanks again.

I am making progress and have now started to look at the code surrounding the movie itself.

I now have both browsers working but I have lost the loop functionality... Any ideas on how I can get the Quicktime movie to loop?

I have hosted it on a server and imported this also with a HTML snippet opposed to embedding it onto a page. I appreciate that I am using iWeb which isn't really designed for this, but I like it.

http://www.ckis.co.uk/systematic/Blank.html

[jscheuer1]

If it were just a matter of z-index, adding this to the beginning of your jqueryslidemenu.css stylesheet should fix it:

.jqueryslidemenu, .jqueryslidemenu * {
	position: relative;
	z-index: 10!important;
}

But as I say, I don't believe a QuickTime object can be stacked in most browsers. In most browsers it's 'always on top'.

You can go ahead and try that though, it might work.

[jscheuer1]

I didn't have QuickTime. I just installed it and your demo works fine cross browser, including looping. Pause/resume (one click to pause, two clicks to resume is a little unintuitive). I have Windows 7 and QT 7.6.9 is what I just installed.