6 replies [Last post]
Ursinus
Ursinus's picture
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-4
Joined: 2013-03-28
Posts: 4
Points: 5

Hello all, thanks for the help. I implemented a pure css dropdown menu across three matching web properties for a photographer (her personals site, Photoshelter-driven gallery site, and WP standalone blog). It functions properly on all three sites in all browsers except for IE10 on the Photoshelter site. THere the dropdowns don't appear.

Just to clarify.

1. The malfunction is only IE v. 10,
2. It's only on the Photoshelter site

Keep an eye on the url as you browse the site and you'll see how you're moving between the three different sites. The look and feel is the same. Overall you should see the dropdowns working across all sites, in all browsers.

Example where they are not working (again, IE10 only) - http://giphotography.photoshelter.com/gallery-collection/Events/P00004.UKnt6FpCU

I'd greatly appreciate any troubleshooting. Source is all there to be looked at so I won't paste any of it here unless it would be helpful.

Thanks!

Ursinus
Ursinus's picture
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-4
Joined: 2013-03-28
Posts: 4
Points: 5

Code

For what it's worth here's the css and menu structure, though there could be other contributing factors in the equation. First the CSS

.mainmenu{
        text-align:center;
        background-color: #000000;
	width: 960px;
	padding: 0;
        margin-bottom:12px;
}
.mainmenu ul {
	float: left;
	width: 100%;
	list-style: none;
	line-height: 1;
	color:#FFFFFF;
	background: #000;
	padding: 0;
	border: solid #000000;
	border-width: 1px 0;
	margin: 0 0 2em 0;
}
 
.mainmenu a, .mainmenu a:visited {
	display: block;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:500;
	font-style:normal;
	text-decoration:none;
	color: #FFFFFF;
	text-decoration: none;
	padding-top: .8em;
	padding-right: 29px;
	padding-bottom: .8em;
	padding-left: 29px;
}
 
.mainmenu ul ul a{
	width:100%;
	height:100%;
}
 
.mainmenu ul a{
	width:1%;
}
 
.mainmenu li  {
	float: left;
	margin:0;
	padding:0;
}
 
.mainmenu ul li {
	float:left;
	position:relative;
	border: 1px solid #323232;
	z-index: 999;
	background-color:#666;
        top:7px;
}
 
.mainmenu ul li a {
        white-space:nowrap;
}
 
.mainmenu li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width:195px;	
	background: #000;
	font-weight: normal;
	border-width: 1px;
	margin: 0;
}
 
.mainmenu li li {
	width:210px ;
	text-align:left;
}
 
.mainmenu li li a{
	width:190px;
}
 
 
.mainmenu li ul  {
	margin: 0;
}
 
.mainmenu li ul ul {
	margin: -2.8em 0 0 13.5em;
}
 
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
	left: auto;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
	left: auto;
}
.mainmenu li:hover>ul.ul_ch   
{
	left: auto;
}
 
.mainmenu li:hover{
	background: #3b665c;
}
 
.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
	color:#FFFFFF;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
	color:#FFFFFF;
}
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{
	background: #3b665c;
	z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
	color: #FFFFFF; 
}
 
.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
	color: #FFFFFF;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
	color: #FFFFFF;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
	color: #FFFFFF;
}

The menu

<div class="mainmenu">
 
<ul>
      <li class="li_nc"><a href="http://greatislandphotography.com/About.html" target="_self" >About</a></li>
      <li class="li_hc"><a href="#" target="_self" >Featured Galleries</a><ul class="ul_ch">
         <li class="li_nc"><a href="http://greatislandphotography.com/FG-Architecture.html" target="_self" >Architectural</a></li>
         <li class="li_nc"><a href="http://greatislandphotography.com/FG-Events.html" target="_self" >Events</a></li>
         <li class="li_nc"><a href="http://greatislandphotography.com/FG-Landscape.html" target="_self" >Landscape</a></li>
         <li class="li_nc"><a href="http://greatislandphotography.com/FG-Portrait.html"  >Portrait</a></li>
         <li class="li_nc"><a href="http://greatislandphotography.com/FG-Weddings.html"  >Weddings</a></li>
      </ul></li>
      <li class="li_nc"><a href="http://greatislandphotography.com/Video.html">Video</a></li>
      <li class="li_hc"><a href="#" target="_self" >Image Archive</a><ul class="ul_ch">
         <li class="li_nc"><a href="http://giphotography.photoshelter.com/gallery-collection/Events/P00004.UKnt6FpCU" target="_self" >Events</a></li>
         <li class="li_nc"><a href="http://giphotography.photoshelter.com/gallery-collection/Landscape-Travel/P0000903b5ayOFzE" target="_self" >Travel & Landscape</a></li>
         <li class="li_nc"><a href="http://giphotography.photoshelter.com/search-page" target="_self" >Search Archive</a></li>
         </ul></li>
         <li class="li_hc"><a href="#" target="_self" >Client Services</a><ul class="ul_ch">
            <li class="li_nc"><a href="https://giphotography.photoshelter.com/usr/usr-account">Client Login</a></li>
            <li class="li_nc"><a href="http://giphotography.photoshelter.com/cart/index">Cart</a></li>
            <li class="li_nc"><a href="http://giphotography.photoshelter.com/lbx/lbx-list">Lightbox</a></li>
         </ul></li>
      <li class="li_nc"><a href="http://greatislandphotography.com/blog/">Blog</a></li>
      <li class="li_nc"><a href="http://greatislandphotography.com/Contact.php">Contact</a></li>
</ul>
 
 
</div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 23 hours 33 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Ursinus, You are using a

Hi Ursinus,
You are using a transitional doctype, so IE 10 will be in quirks mode, acting like IE7.
Which means it won't support hover on anything but links.

Change your doctype and validate

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 13 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Wow!

Tony wrote:

so IE 10 will be in quirks mode, acting like IE7

I did not know that.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ursinus
Ursinus's picture
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-4
Joined: 2013-03-28
Posts: 4
Points: 5

Thanks guys.Tony. what should

Thanks guys.Tony. what should I change the doctype to? Her personal site has transitional as well, and they dropdown menus work there.

Personal site (working)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Photoshelter site {not working)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Thanks again

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 23 hours 33 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Ursinus, Those two

Hi Ursinus,
Those two doctypes are very different, there's plenty of info on this site about doctypes check the How To section for more.
It's a combination of the doctype and validation errors.
I would use <!DOCTYPE HTML> That's the HTML5 doctype which is supported as valid by all browsers.

Gary, that's a guessificaton Smile no data to back it up but sounds logical.

Ursinus
Ursinus's picture
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-4
Joined: 2013-03-28
Posts: 4
Points: 5

Hmmm...

Support at Photoshelter tells me:

"It's definitely possible to make CSS hovers work in IE10 with our doctype. One tip that might help is to make sure you're using <A> tags in your HTML to accomplish the CSS hover effect. That is the only HTML element that supports CSS :hover in quirksmode."

Any thoughts?