Transparent dropdown menu in IE

[droy]

Hello,
Thanks you for this great menu generator! After spending a day trying to implement a dropdown menu I came upon your generator and had it up and running in about 15 minutes!

I am having just one problem with it and I know it's me but in IE the dropdown menu becomes transparent and some submenus refuse to appear. If you look at my website http://www.beachfrontjobs.com in firefox you will notice it functions normally and when looking at it with IE that's when it doesn't function well.

As I said, it's probably me. Any suggestions to fix my problem?

Thanking you in advance,
Droy

[Teefax]

Hello droy,

I don't see any difference regarding the menu of your web with Firefox and IE ...

My IE version is 7.0.5730.11.

Regards
Teefax

[droy]

Hi TeeFax,

My IE version is: 8.0.6001.18702 and running FF 3. All my sub menu tabs show up in FF but stops at Mexico in IE (http://beachfrontjobs.com). Also my blogs sub menus go transparent in IE and won't click. Maybe it's not compatible with IE 8. I personally use FF but some subscribers still use IE. Won't it be great when everyone uses FireFox?

Droy

[droy]

Hello again,
Maybe I'm not explaining it correctly. When viewing http://beachfrontjobs.com in IE 8, not all sub menus show up. Under "Vacation Ownership Industry Jobs" is stops at Mexico. Middle East and United States should also appear.
Can someone please help me with this since 50% of my readers use IE.

Thanking you in advance,
Droy

[V]

I suppose it comes from some wrong or complex code and probably proper z-index values are needed. I tested with IE6, IE7 and IE8 here. IE8 works fine. In IE7 the last 2 items are cut. I think it is because one background image (beach-holiday/images/header2.jpg) goes over the menu and hides the menu items below. Why IE7 does that is mystery but it should be fixable with z-indexes. In addition, in IE6 I did not any sub-menu working and even more messed, because google link-adds are on top, over the menu... As I love to say, IE is ... IE... I can try to see how this could be fixed here, but I will need some time to experiment, I hope I'll get some hour free later today. The best way for me for such fixes is if you can zip and send me the whole page, but as I see it is WP and I suppose it is not possible... Anyway, will try to see if I can help.

[V]

Ok, here we are:

(1) IE6 fails because csshover2 file isn't accessible. in your code, where the css for the menu is generated, put the csshover2.htc file with full path, not relative. Now it is: body{ behavior:url("csshover2.htc"); } try to make the path absolute: body{ behavior:url("http://www.beachfrontjobs.com/ csshover2.htc"); }, or try with this version: body{ behavior:url("/csshover2.htc"); } This will fix IE6 trouble

(2) As I expected, the content div goes on top of the menu. Try to adjust the z-index. I tested here with this and found it to work:
<div id="container" style="z-index:-9999991;">
so, when you fix the z-index values it should be ok

Hope that helps. Tell me when you make the changes and I will go to test again.

[droy]

Thank you so much V for your help. The css menu generator I am using is the one before 4.0. I have tried to use the 4.0 but can't seem to have it work. I would prefer to use the menu generator 4.0 because I could add sub sub menus to my navigation. Maybe I'm too new at this but I don't really know what the z-index is.
Can you tell what z-index is?

Again thank you for your time it's really appreciated.
Dan

[V]

Imagine the objects on the web page in 3-D space, x,y and z. "z-index" is the position in the "z-axis"... the "width" and "height" in css refers to "x" and "y", while the "z-index" parameter says to browser which object is above/below another objects...

Anyway, in your particular case, you must look for something like this in your css file(s):

#container {
... some css settings ...
}

So, inside the brackets, put the z-index value to something negative and it should help. For example:

z-index: -1;

Or, which will give you the same result, find the opening div tag the div named "container" and add the style settings inside. Look for something like that:

<div id="container" >

and replace with something like that:

<div id="container" style="z-index:-1;">

and do not forget to replace behavior:url("csshover2.htc"); with behavior:url("/csshover2.htc");

Both fixes can be done on the html file itself, but right in this case I don't know where the file is located (I don't remember where WP saves its templates), but it is the main file for the template so you should know it (the place where you initially added the menu code)

[droy]

Hi V,

I have been working on it but don't really know if it's right. So here is the code from header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
   <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
   <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
   <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
   <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
   <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
   <?php wp_get_archives('type=yearly&format=link'); ?>
   <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
   <?php if(is_singular()){ wp_enqueue_script('comment-reply');}?>
   <?php wp_head(); ?>
<meta name="verify-v1" content="OmoEenNGQmUsDV9hzPxYrRCBeAx3T1RqJNtUCRlkhyQ=" >
<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #43C8F5;background: #11456D;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01  a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #43C8F5;
background-color: #11456D;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.pd_menu_01 ul li a {color: #43C8F5;background: #11456D;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #43C8F5;background: #11456D; width:1px}
.pd_menu_01 ul li:hover a {background-color:#9D080D; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#11456D;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#9D080D; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#11456D;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#11456D;  color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>
</head>
<body>
<div id="bg_bottom">
   <div id="base"><div id="base2">
      <div id="header">
<div class="pd_menu_01 ">
<ul><li><a href="http://beachfrontjobs.com">Home</a>
</li></ul>

<ul><li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/">Vacation Ownership Industry Jobs</a>
<ul>
<li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/africa"  >Africa</a></li>
<li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/asia/"  >Asia</a></li>
<li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/australia/"  >Australia</a></li>
<li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/canada/"  >Canada</a></li>
<li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/caribbean/"  >Caribbean Islands</a></li>
<li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/europe/"  >Europe</a></li>
<li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/mexico/"  >Mexico</a></li>
<li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/middle-east/"  >Middle East</a></li>
<li><a href="http://beachfrontjobs.com/vacation-ownership-industry-jobs/usa"  >United States</a></li>
</ul>
</li></ul>

<ul><li><a href="http://beachfrontjobs.com/ski-resort-jobs/">Ski Resort Jobs</a>
<ul>
<li><a href="http://www.beachfrontjobs.com/ski-resort-jobs/canada/"  >Canada</a></li>
<li><a href="http://www.beachfrontjobs.com/ski-resort-jobs/ski-resort-jobs-europe/"  >Europe</a></li>
<li><a href="http://www.beachfrontjobs.com/ski-resort-jobs/ski-jobs-usa/"  >USA</a></li>
</ul>
</li></ul>

<ul><li><a href="http://www.beachfrontjobs.com/ski-resort-jobs/golf-resort-jobs/">Golf Resort Jobs</a>
</li></ul>

<ul><li><a href="http://www.beachfrontjobs.com/cruise-ship-jobs/">Cruise Ship Jobs</a>
</li></ul>

<ul><li><a href="http://www.beachfrontjobs.com/blog/">Blogs</a>
<ul>
<li><a href="http://beachfrontjobs.com/blog/203/vacation-home-vs-vacation-ownership/"  >Vacation Home vs Vacation Ownership</a></li>
<li><a href="http://beachfrontjobs.com/blog/157/income-tax-free-job/"  >Income Tax Free Job</a></li>
<li><a href="http://beachfrontjobs.com/blog/135/opc-what-is-it/"  >OPC What Is It?</a></li>
<li><a href="http://beachfrontjobs.com/blog/131/timeshare-career/"  >Timeshare Career</a></li>
</ul>
</li></ul>

<ul><li><a href="http://www.beachfrontjobs.com/ad-placement/">Post Job Ads</a>
</li></ul>

<ul><li><a href="http://www.beachfrontjobs.com/about/">About</a>
</li></ul>

<ul><li><a href="http://www.beachfrontjobs.com/contact/">Contact</a>

</div>
<span name=KonaFilter>
         <div id="blogtitle"><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name');?></a></div>
         <div id="subtitle"><?php bloginfo('description');?></div>   
</span>         
<div class="searchbox">
      

</div>
         </div>
         
      </div>
      <div id="container">
            <a href="<?php bloginfo('rss2_url'); ?>" title="RSS Feed"><img src="<?php bloginfo('template_directory'); ?>/images/spacer.gif" alt="Subscribe RSS" class="rss"/></a>

I replaced (<div id="menu"><ul><?php 
               $options = get_option('widget_pages');
               $exclude = empty($options['exclude'] ) ? '' : $options['exclude'];
               echo menu_separator(wp_list_pages('echo=0&sort_column=menu_order&depth=1&title_li=&exclude='.$exclude));
            ?></ul>
         </div>) with <div class="pd_menu_01 ">.....

Also since I installed my css menu it seems that Google is only indexing 15 of my pages when I have over 70 pages. Could the navigation have something to do with that?

Again thanks for your much appreciated help.

Droy   

[V]

On the menu fixes: it works in most of the browsers, but still some troubles with IE6 and 7. To fix this, in the header php file, try this:

(1) change this

body{ behavior:url("csshover2.htc"); }

to this:

body{ behavior:url("/csshover2.htc"); }

this should make the menu working in sub-folder pages (like contact/, about/ etc.)


(2) Try to set z-index values to negative for the top divs, this will give us an idea if we could fix it this way. There is a css file with layout settings here:

http://www.beachfrontjobs.com/wp-content/themes/beach-holiday/style.css

it contains these selectors:

#container{
   position:relative;
   overflow:hidden;
   width:960px;
   background: url('images/header2.jpg') no-repeat center top;
   border:0px blue solid;

}
#sidebar{
   float:left;
   overflow:hidden;
   display:inline;
   width:200px;
   margin:270px 0 0 0px;
}
#content{
   float:right;
   display:inline;
   width:674px;
   padding:0px 4px 0 0;
   margin:15px 27px 0 0;
   width:708px;
}

Inside those, try to add z-index value, something like this:

#container{
   position:relative;
   overflow:hidden;
   width:960px;
   background: url('images/header2.jpg') no-repeat center top;
   border:0px blue solid;
   z-index:-1;
}
#sidebar{
   float:left;
   overflow:hidden;
   display:inline;
   width:200px;
   margin:270px 0 0 0px;
}
#content{
   float:right;
   display:inline;
   width:674px;
   padding:0px 4px 0 0;
   margin:15px 27px 0 0;
   width:708px;
   z-index:-1;
}

(if that doesn't work for the right-side of the menu, you can try adding such indexing for the #sidebar div, but it shouldn't be needed in my opinion...)

Then, if you don't have IE6/7 to test, tell me and I will go to see if it works now...

Sorry to be unable to lead you directly what to do, I know I am giving only ideas here and cannot test on the real code, but in order to be able to find the right fix I will need to install WP, set your template and check with the life installation...

On the google question: No, it is not related in any way. Google crawls the whole pages of your site, not only the navigation. Yes, it will usually index the most referred pages first, so the pages in the navigation are the first ones to be indexed. The other place is if you have repeated links in the footer. These are the most important pages, and because G finds these in all pages of your site, it will scan them first. But no, the menu doesn't prevent in any way search engines to crawl your other pages. A good idea is to put sitemap, if you don't have yet, and set the sitemap in google webmaster tools. This will give you good idea what is indexed and what is not.

UPDATE: I just checked your site in google and it says it have indexed about 336 pages. Try this search: site:beachfrontjobs.com

[droy]

Hello V,
Thank you for your quick response. I have done all the changes you indicated except for one. In the #container{  I had to remove (z-index:-1;) and leave it in the #content{. Otherwise my page doesn't work in IE 8.
Again thank you for all the support!

Regards,

Droy