Menu not working correctly in Internet Explorer

10 Posts

jkresge Reply #1, 16 years, 11 months ago

Hello,

My menu works in Firefox and other browsers but does not work correctly in IE. I have several other sites that all work correctly but this one won’t. Maybe it needs a fresh pair of eyes to look at it.

I am using this code:

[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]]

here is the css, its in the menuPan div

/* CSS Document */
body{margin:0 auto; padding:0px; background:url(images/main-bg.gif) 0 0 repeat-x #F2F0DC; color:#5D5B46; font:14px/18px Georgia, "Times New Roman", Times, serif; text-align:center;} 
div, p, ul, h2, img{margin:0px; padding:0px;}
ul{list-style-type:none;}

/*----TOP PANEL----*/
#topPan{width:778px; height:141px; position:relative; margin:0 auto; font:14px/18px Arial, Helvetica, sans-serif;}
#topPan ul{width:125px; height:22px; position:absolute; top:0px; right:130px;}
#topPan ul li{float:left; width:45px; height:22px;}
#topPan ul li a{width:45px; height:16px; display:block; background:url(images/arrow1.gif) 40px 6px no-repeat #CC0000; color:#fff; font:13px/16px Arial, Helvetica, sans-serif; text-decoration:none;}
#topPan ul li a:hover{background:url(images/arrow1-hover.gif) 40px 6px no-repeat #CC0000; color:#FEF0B7; text-decoration:none;}

#topPan ul li.register{float:left; width:200px; height:22px; color:#FFFFFF; font-size:10px;}
#topPan ul li.register a{width:200px; height:16px; display:block; background:url(images/arrow1.gif) 65px 6px no-repeat #CC0000; color:#fff; font:10px/16px Arial, Helvetica, sans-serif; text-decoration:none; padding:0 0 0 10px;}
#topPan ul li.register a:hover{background:url(images/arrow1-hover.gif) 65px 6px no-repeat #CC0000; color:#FEF0B7; text-decoration:none;}

#topPan img.logo{width:255px; height:142px; position:absolute; top:0px; left:29px;}

#topPan p.callus{width:150px; height:25px; background:url(images/callus-bg.gif) 0 0 no-repeat #212121; color:#fff; position:absolute; top:53px; right:115px; line-height:24px; text-align:center;}
#topPan p.phone{width:150px; height:25px; background:#212121; color:#EAE8CD; position:absolute; top:85px; right:109px; font-size:20px; line-height:25px; text-align:center;}
#topPan p.address{width:150px; height:25px; background:#212121; color:#EAE8CD; position:absolute; top:43px; right:109px; font-size:16px; line-height:25px; text-align:center;}
#topPan p.address2{width:150px; height:15px; background:#212121; color:#EAE8CD; position:absolute; top:63px; right:109px; font-size:16px; line-height:25px; text-align:center;}

/*----/TOP PANEL----*/

/*----HEADER- PANEL----*/
#headerPan{width:778px; height:228px; position:relative; margin:0 auto;}
#headerleftPan{width:46px; height:228px; float:left; background:url(images/leftfolder.gif) 0 0 no-repeat;}
/*----Header Middle Panel----*/
#headermiddlePan{width:686px; height:228px; float:left;}
/*-----Header Pan for Page---*/
#headerPanpage{width:778px; height:50px; position:relative; margin:0 auto;}
#headerPanpage2{width:778px; height:30px; position:relative; margin:0 auto;}


/*----Menu Panel----*/
#menuPan{width:686px; height:193px; background:url(images/menu-bg.gif) 0 0 repeat-x; position:relative; margin:0 auto;}

#menuPan ul li{width:107px; height:28px; float:left; border-right:1px dashed #969260;}
#menuPan ul li a{width:107px; height:28px; display:block; background-color:#fff; color:#2F2A28; border-right:1px dashed #969260; font:13px/28px Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}
#menuPan ul li a:hover{width:110px; height:27px; background:#2F2A28; color:#fff; border:none; text-decoration:none;}
	
#menuPan ul li.home{width:110px; height:28px; background:#2F2A28; color:#fff; font:13px/28px Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; border:none; text-decoration:none;}

#menuPan ul li.contact a{width:110px; height:28px; display:block; background:#fff; color:#2F2A28; border:none; font:13px/28px Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}
#menuPan ul li.contact a:hover{width:110px; height:28px; background:#2F2A28; color:#fff; border:none; text-decoration:none;}

/*----/Menu Panel----*/
#headerbodyPan{width:686px; height:184px; position:absolute; top:42px; left:46px; background:#FEFDF1; color:#fff; border-bottom:1px solid #CDCAA3; border-top:1px solid #CDCAA3; text-align:left;}
/*---- Header Red Panel----*/
#headerleftredPan{width:478px; height:123px; background:url(images/redpan-bg.jpg) 0 0 repeat-x #FEFDF1; color:#fff; position:absolute; top:32px; left:0px;}
#headerleftredPan h2{width:160px; height:69px; font:24px/24px "Trebuchet MS", Arial, Helvetica, sans-serif; position:absolute; top:29px; left:36px; text-transform:uppercase;}
#headerleftredPan h2 span{font-size:39px; line-height:30px;}

#headerleftredPan p{width:462px; height:74px; display:block; position:absolute; top:24px; left:45px; font-size:14px; line-height:17px;} 
#headerleftredPan p span.largetext{font-size:18px; line-height:18px;} 
#headerleftredPan p1{width:382px; height:74px; display:block; position:absolute; top:46px; left:47px; font-size:12px; line-height:17px;} 
#headerleftredPan p2{width:382px; height:74px; display:block; position:absolute; top:76px; left:57px; font-size:14px; line-height:17px; font-family:Georgia, "Times New Roman", Times, serif; color:#666666} 
#headerleftredPan p.img{width:382px; height:42px; display:block; position:absolute; top:66px; left:47px;} 

#headermiddleredPan{width:161px; height:142px; background:url(images/red-image.jpg) 0 0 no-repeat; position:absolute; top:13px; left:478px;}
/*----Header MORE Panel----*/
#headermorePan{width:47px; height:123px; position:absolute; top:32px; right:2px; font:10px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold;}
#headermorePan a{width:39px; height:38px; display:block; background:url(images/headermore-normal.gif) 0 0 no-repeat #FEFDF1; color:#FDFCEC; text-decoration:none; padding:85px 0 0 8px;}
#headermorePan a:hover{background:url(images/headermore-hover.gif) 0 0 no-repeat; text-decoration:none;}

/*----/Header MORE Panel----*/
/*----Header Middle Panel----*/
#headerrightPan{width:46px; height:228px; float:left; background:url(images/rightfolder.gif) 0 0 no-repeat;}
/*----HEADER- PANEL----*/

/*----BODY PANEL----*/
#bodyPan{width:686px; position:relative; margin:0 auto; text-align:left;}
#bodyPan h2{width:700px; height:54px; background:#F2F0DC; color:#D80000; font:26px/54px "Trebuchet MS",Arial, Helvetica, sans-serif;}

#bodyPan p{padding:10px 0 0;}
#bodyPan p span{font-weight:bold;}
#bodyPan p.date{width:174px; height:22px; background:#FEFEF6; color:#000; font-size:18px; line-height:22px; padding:0px;}
#bodyPan p.more{width:102px; height:16px; margin:0 0 0 582px; padding:0 0 14px 0;}
#bodyPan p.more a{width:102px; height:16px; display:block; background:#F2F0DC; color:#D80000; font:13px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none;}
#bodyPan p.more a:hover{background:#F2F0DC; color:#7E0202; text-decoration:none;}
#bodyPan p.border{background:url(images/dot-line.gif) 0 0 repeat-x; height:1px; padding:0 0 14px 0;}

/*----Body Bottom Panel----*/
#bodybottomPan{width:778px; position:relative; margin:0 auto; padding:30px 0 0 8px;}
/*----Bottom Left Panel----*/
#bottomleftPan{width:375px; float:left; background:url(images/bodybottombg.gif) 0 0 no-repeat #FEFDF0; color:#D80000; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3; margin:0px;}
#bottomleftPan h2{width:250px; height:58px; background:url(images/icon1.jpg) 0 0 no-repeat; font:26px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 65px; margin:22px 0 0 41px;}
#bottomleftPan h2 span{font-size:20px; background:#FCFBED; color:#5D5B46;}

#bottomleftPan ul{width:290px; margin:15px 0 0 70px; font:Georgia, "Times New Roman", Times, serif; color:#333333}
#bottomleftPan ul li{width:290px; height:30px;} 
#bottomleftPan ul li a{width:210px; height:30px; display:block; color:#2F2A28; font-size:14px; line-height:30px; text-decoration:none; padding:0 0 0 80px;}
#bottomleftPan ul li a:hover{display:block;background:url(images/bullet1.gif) 0 10px no-repeat #FEFDF1; color:#2F2A28; line-height:30px;} 
 
#bottomleftPan p.more{width:270px; height:21px; padding:0px; margin:10px 0 25px 50px;} 
#bottomleftPan p.more a{width:270px; height:21px; display:block; background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; color:#fff; font:13px/20px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;} 
#bottomleftPan p.more a:hover{background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; color:#FDF6B6; text-decoration:none;} 
/*----/Bottom Left Panel----*/

/*----Bottom Right Panel----*/
#bottomrightPan{width:375px; float:left; background:url(images/bodybottombg.gif) 0 0 no-repeat #FEFDF0; color:#D80000; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3; margin:0 0 0 8px;}
#bottomrightPan h2{width:250px; height:58px; background:url(images/icon2.jpg) 0 0 no-repeat; font:26px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 65px; margin:22px 0 0 41px;}
#bottomrightPan h2 span{font-size:20px; background:#FCFBED; color:#5D5B46;}

#bottomrightPan ul{width:290px; margin:15px 0 0 70px; font:Georgia, "Times New Roman", Times, serif; color:#333333}
#bottomrightPan ul li{width:290px; height:30px;} 
#bottomrightPan ul li a{width:210px; height:30px; display:block; color:#2F2A28; font-size:14px; line-height:30px; text-decoration:none; padding:0 0 0 80px;}
#bottomrightPan ul li a:hover{display:block; color:#2F2A28; line-height:30px;} 
 
#bottomrightPan p.more{width:270px; height:21px; padding:0px; margin:10px 0 25px 50px;} 
#bottomrightPan p.more a{width:270px; height:21px; display:block; background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; color:#fff; font:13px/20px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;} 
#bottomrightPan p.more a:hover{background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; color:#FDF6B6; text-decoration:none;} 
/*----/Bottom Left Panel----*/

/*----FOOTER PANEL----*/
#footermainPan{height:135px; background:url(images/footerbg.gif) 0 0 repeat-x #3B3B3B; color:#fff; font:13px/20px "Trebuchet MS",Arial, Helvetica, sans-serif; position:relative; margin:0 auto; clear:both; padding:75px 0 0;}

#footerPan{width:686px; position:relative; margin:0 auto;}

#footerPan ul{width:686px; height:20px; position:relative; margin:0 auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#fff; background:#3B3B3B; text-decoration:none; font-size:12px;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:420px; position:relative; margin:0 auto; background:#3B3B3B; color:#fff;  font-size:11px;}

#footerPan ul.josh{width:480px; height:20px; position:relative; margin:0 auto; text-align:center;}
#footerPan ul.josh li{height:20px;}
#footerPan ul.josh li a{background:#3B3B3B; display:block; color:#fff; text-decoration:none; padding:0px;}
#footerPan ul.josh li a:hover{text-decoration:underline;}

#footerPanhtml{width:70px; height:24px; display:block; position:absolute; top:45px; left:265px;}
#footerPanhtml a{width:66px; height:24px; display:block; background:url(images/html-bg-normal.gif) 0 0 no-repeat #3B3B3B; color:#fff; font-size:14px; line-height:24px; font-weight:bold; text-decoration:none;text-transform:uppercase; padding:0 0 0 4px;}
#footerPanhtml a:hover{background:url(images/html-bg-hover.gif) 0 0 no-repeat #3B3B3B; color:#fff;}
#footerPancss{width:58px; height:24px; display:block; position:absolute; top:45px; left:340px;}
#footerPancss a{width:58px; height:24px; display:block; background:url(images/css-bg-normal.gif) 0 0 no-repeat #3B3B3B; color:#fff; font-size:14px; line-height:24px; font-weight:bold; text-decoration:none; text-transform:uppercase; padding:0 0 0 8px;}
#footerPancss a:hover{background:url(images/css-bg-hover.gif) 0 0 no-repeat #3B3B3B; color:#fff; text-decoration:none;}
/*----/FOOTER PANEL----*/

/*--------jquery adds------*/
bodyjquery{
	font-family:arial;
	text-align:left;
}

.clear {
	clear:both
}

#gallery {
	position:relative;
	height:360px
}
	#gallery a {
		float:left;
		position:absolute;
	}
	
	#gallery a img {
		border:none;
	}
	
	#gallery a.show {
		z-index:500
	}

	#gallery .caption {
		z-index:600; 
		background-color:#000; 
		color:#ffffff; 
		height:100px; 
		width:100%; 
		position:absolute;
		bottom:0;
	}

	#gallery .caption .content {
		margin:5px
	}
	
	#gallery .caption .content h3 {
		margin:0;
		padding:0;
		color:#1DCCEF;
	}

any ideas?

1,161 Posts

Photowebmax Reply #2, 16 years, 11 months ago

I think you need to provide more details. What is wrong with it?

Do you have a link to the site?

10 Posts

jkresge Reply #3, 16 years, 11 months ago

The drop down aspect does not work in IE, for example if you hover over one of the tabs you should get the list of links under that parent link. It works in Firefox, if you check under services there is a drop down, however in IE it does not.

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 16 years, 11 months ago

That’s because IE 6 does not support the :hover pseudoclass for anything except <a> tags. Try adding this to your template’s head:

<!--[if lt IE 7]>
<style type="text/css">
  body {behavior:url("assets/js/csshover2.htc");}
</style>
<![endif]-->

It may be csshover3.htc; check your assets/js directory to see which one you have.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

10 Posts

jkresge Reply #5, 16 years, 10 months ago

Great! I think that was the case.Thank you!

Now how can I make is so that the expanded list tabs do not go behind other objects (like images), so that they are always brought to the front?

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 16 years, 10 months ago

Do they have a background color in your css? If they don’t their background will be whatever they are over. If they are literally behind something, try giving them a high z-index.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,161 Posts

Photowebmax Reply #7, 16 years, 10 months ago

Are you planning on adding a lot of menu items to the top navigation?

The reason I ask is that you are using an entire drop menu system just to add two extra links to the the Services tab. Right below the navigation you have that box with all those image links. One way or another your main drop nav items are going to float on the image links. To my eye this is a little awkward.

If you removed the About tab you could then position Conductivity and Design side by side in the main nav without needing the drop nav system. A link to the About page could go in a second tier nav system or the footer. You already have a big section for About content (with another link) on the home page.

One other nit if I may: if you view the site on a display with higher resolution the entire page jumps from side to side depending if the content is shorter or longer. The scroll bar on the side will appear and disappear as a result. I like to add the following to the top of my CSS which fixes that:

html {
min-height: 101%;}

I would also change the color of the a:link in the footer.

Other than that I think this is a fine looking industrial site...

10 Posts

jkresge Reply #8, 16 years, 10 months ago

Yes I am planning on adding a lot of menu items. Thank you for the scrolling fix, I have placed it in my css.

As far as the Z-index goes, b-e-a-utiful. I inserted the z-index and now it works. Thank you very much for the help!