menu bar not working in Chrome or IE or Safari

[mlegg]

My drop down menu bar works correctly in Firefox and not in IE or Chrome.
The temp page is at http://tinyurl.com/3fszvkc

What did I do wrong?? I am using Win 7

CSS code:

html, body {
padding : 0;
margin : 0;
height : 100%;
background-color : #000000;
background-position : center top;
}
#banner {
height : 150px;
width : 960px;
margin : auto;
background-image : url(images/logo2.jpg);
background-repeat:no-repeat;
}
#container {
position : relative;
width : 960px;
padding : 0;
min-height : 100%;
margin : auto;
font-family : sans-serif;
color : #FFFFFF;
background-color : #000000;
}
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 1px 1px 0px;
background-color:#F87217;
background-repeat:repeat;
border-color:#F87217;
border-width:0px;
border-style:solid;
}
ul.pureCssMenu {
width:729px;
padding-left:230px;
}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:210px;
}
ul.pureCssMenu li{
display:block;
margin:1px 0px 0px 1px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#F87217;
border-width:0px;
border-color:#FCEEB0;
border-style:solid;
text-align:left;
text-decoration:none;
padding:5px;
_padding-left:0;
font:16px Arial;
color: #000000;
text-decoration:none;
cursor:pointer;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3;
height:100%;
display:inline-block;
background-color:#FF6600; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFFF00;
border-color:#FFFF00;
border-style:solid;
font:16px Arial;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFFF00;
border-color:#FFFF00;
border-style:solid;
font:16px Arial;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_blue_2.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:8px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white_2.gif)}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}
div.one {
padding : 15px;
min-height : 100%;
}
div.one a:link {
color : #00008b;
text-decoration : underline;
}
div.one a:visited {
color : #ff0000;
text-decoration : underline;
}
div.one a:hover {
color : #ffffff;
background-color : #8b0000;
text-decoration : underline;
}
div.one a:active {
color : #ff0033;
background-color : #ffffff;
text-decoration : underline;
}
h1 {
padding : 15px;
text-align : center;
}
h3 {
padding : 5px;
}
.centered {
text-align : center;
}
#footer {
position : absolute;
width : 100%;
left : 0;
bottom : 0;
padding : 5px 0;
font-family : sans-serif;
font-size : 15px;
text-align : center;
background-color : #F87217;
color : #000000;
}
#footer a:link {
color : #000000;
text-decoration : underline;
}
#footer a:visited {
color : #000000;
text-decoration : underline;
}
#footer a:hover {
color : #000000;
background-color : #FFFF00;
text-decoration : underline;
}
#footer a:active {
color : #000000;
background-color : #FFFFFF;
text-decoration : underline;
}


Do you need the HTML?
thanks

Do you see the faveicon? http://pscompetitiveedge.com/images/favicon.ico

[jscheuer1]

Oh, it works in those browsers. It's just that the drop down is behind Media Player. Get rid of it, convert to Flash and give it wmode transparent or opaque.

By the way, I noticed that this testimonial (click for normal viewing):

4162

Has a typo. It should be:


'The Art Of Leadership'."

Not:


'The Art Of Leadership.'"

[mlegg]

the vid was originally in Flash. I converted it so that it was viewable in Apple products (ie: iPads).

So do you think Flash is best to use then? What about people viewing his site with an OS or browser or other device that can't view Flash files?

[jscheuer1]

iPad has no support for Media Player. You would need to serve them alternative content anyway.

A sobering thought on this is also that, when I went to view it in Chrome, I got a dialog saying Media Player was a restricted plugin - Allow once, or Allow always. My Chrome has only the default settings. You don't want something like that happening on your page. And many many more people have Flash installed than Media Player. Media Player is MS only. That leaves out newer Apple and pretty much all 'nix products. At least Mac and most 'nix computers support Flash.

There's another thread around here somewhere that shows how to do this by serving HTML 5 video to those that support it with a Flash fall back:

http://www.dynamicdrive.com/forums/showthread.php?p=263799#post263799

I'm not sure how good it is though.

And I'm not too sure that the menu will be able to drop over it in various browsers that do support HTML 5 video. So it might be best to simply move the video away from the menu. Or use Flash as the primary method and HTML 5 as the fall back.

Oh and, I think if you host it on YouTube, they serve a iPad/Phone friendly version to those devices.

[mlegg]

I think I will be getting his videos so I can host them to YouTube. I did that for my other buddie's business and the embed from there worked on everything that I tried his site on.

thanks

[jscheuer1]

I like that approach. However, from working on a similar situation for someone else, I can tell you that it's unlikely that will solve the original problem. Some browsers will likely still drop the menu behind the video.

So I would recommend hosting on YouTube, and moving the video away from the menu.