I'm trying to get this to work in IE and can't figure out where I'm going wrong. FF delivers 90% of what I want and I can figure out the issues. However, IE displays submenus as transparent and I can't even 'grab' then to get the next menu item.
CSS Below for the menu:
CSS Also for rest of page
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/example_flyout.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
/* Make sure you change height in menu2 and .menu2 ul */
.menu2{
font-family: arial, sans-serif; width:195px; height:600px; position:relative; font-size:11px; /* margin:30px 0;*/margin:0px 0; z-index:100;
}
.menu2 ul {
padding:0; margin:0; list-style-type: none; /*background:#eee;*/ width:195px; height:600px;
background-image:url(images/design/navRepeat_mastersken.jpg);
background-repeat:repeat-y;
}
.menu2 ul li ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; /*left:85px; */left:195px;
}
.menu2 ul li {
float:left;
}
/*First level styling */
.menu2 ul li a, .menu2 ul li a:visited {
display:block; float:left; text-decoration:none; color:#fff; width:195px; height:30px; line-height:29px; font-size:11px; background:transparent; padding-left:10px;
}
/* IE Related changes -->*/
* html .menu2 ul li a, * html .menu2 ul li a:visited {width:195px; w\idth:185px;}
.menu2 table {
border-collapse:collapse; border:0; margin:0; padding:0; font-size:1em; position:absolute; left:0; top:0;
}
/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
.menu2 ul li:hover a,
.menu2 ul li a:hover{
background-color:#324664; color:#ffffff;
}
/*End of First level styling */
.menu2 ul li:hover {position:relative; z-index:90;}
* html .menu2 ul li a:hover {position:relative; z-index:100;}
/*Second level styling on first level hover */
.menu2 ul li:hover ul,
.menu2 ul li a:hover ul {
visibility:visible; position:absolute; height:auto; /*color:#324664; border:1px solid #324664; background:#ffffff; */overflow:visible; background-image:none;
}
.menu2 ul li:hover ul li a,
.menu2 ul li a:hover ul li a{
display:block; /*background:transparent;*/ color:#324664; line-height:15px; padding:5px 0 5px 10px; height:auto; text-decoration:none;border:1px #324664 solid; background-color:#FFFFFF;
}
/* End of second level hover on first level hover */
/* Second level hover */
.menu2 ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover {
background:#ffe119; color:#324664; border:1px #324664 solid;
}
/*
.menu2 ul li:hover ul li ul,
.menu2 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:85px;
}
.menu2 ul li:hover ul li:hover ul,
.menu2 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; height:auto; color:#000; padding:0; border:1px solid #069; list-style-type:none; background:#069;
}
.menu2 ul li:hover ul li:hover ul li a,
.menu2 ul li a:hover ul li a:hover ul li a {
display:block; background:transparent; color:#ff0;
}
.menu2 ul li:hover ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover ul li a:hover {
background:#eee; color:#000;
}
*/
/* CSS Document */
* {padding:0px; margin:0px; border:0; border:none;}
img {border:none; padding:0px; margin:0px; border:0;}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
letter-spacing:1px;
line-height:1.45;
font-size:12px;}
p {margin-bottom:15px;
}
h1 {font-size:13px;}
h2, h3, h4, h5, h6 {}
#wrapperMasterSken {
width:800px;
margin:auto;
background-image:url(images/design/wrapperRepeat_mastersken.jpg);
background-repeat:repeat-y;
padding-bottom:10px;
position:relative;
}
#headerMasterSken {
height:233px;
width:800px;
background-image:url(images/design/header_masterakwn.jpg);
background-repeat:no-repeat;
position:relative;
}
/* Positioning the SIMTA Login */
p#simtalogin {
position:absolute;
line-height:.9;
top:200px;
left:15px;
font-size:11px;
font-weight:bold;
color:#324664;}
p#simtalogin input {
border:1px #000000 solid;
font-size:10px;
padding-left:3px;}
p#simtalogin img {
position:relative;
top:3px;
}
#navigationMasterSken {
position:relative;
width:195px;
padding-top:15px;
float:left;
background-image:url(images/design/navTop_mastersken.jpg);
background-repeat:no-repeat;
padding-bottom:50px;
clear:left;
}
/*
#navigationMasterSken ul{
background-image:url(images/design/navRepeat_mastersken.jpg);
background-repeat:repeat-y;
padding:25px;
list-style:none;
width:140px;
}
/* Holds both content and right sidebar */
#contentMasterSken {
float:left;
width:605px;
display:block;
background-image:url(images/design/searchbox_mastersken.jpg);
background-repeat:no-repeat;
padding-top:50px;
position:relative;
}
#contentMasterSken a:link, #contentMasterSken a:visited, #contentMasterSken a:active {
color:#ff0000;
text-decoration:none;
font-weight:bold;
}
#contentMasterSken a:hover {
color:#3955AD;
text-decoration:underline;
}
/* Positioning the search form */
p#search {
text-align:center;
position:absolute;
line-height:.9;
top:10px;
left:250px;
font-size:13px;
font-weight:bold;
color:#ffffff;}
p#search input {
border:1px #000000 solid;
font-size:11px;
padding-left:15px;}
p#search img {
position:relative;
padding-left:3px;
top:5px;
}
#shopMasterSken {
border:2px solid #000000;
background-image:url(images/design/shopCartMasterSken.jpg);
background-repeat:no-repeat;
padding-top:30px;
}
#shopMasterSken h1 {
border:1px solid #000000;
}
#shopMasterSken img {
border:1px #000000 solid;
}
#navigationMasterSken ul li {
margin-left:-10px;
padding-bottom:5px;}
#contentmiddleMasterSken{
width:363px;
padding:10px 15px 20px 15px;
}
/* Rightsidebar Styling */
#rightsidebarMasterSken {
width:200px;
float:right;
}
#rightsidebarMasterSken h2 {
font-size:13px;
background-color:#ffe119;
font-weight:bold;
height:25px;
text-align:center;
}
#rightsidebarMasterSken p{
font-size:11px;
padding:5px;
font-weight:600;
border:#ffe119 solid 1px;
}
ul#rightsidebarMasterSken {
list-style:none;
}
/*Forms styling */
form#quote {width:630px;
}
form#quote legend {
color:#21347B;
}
form#quote fieldset
{border:1px solid #21347B;
padding:10px;
font-weight:bold;}
/* Footer styling for copyright */
#footerMasterSken {
width:800px;
padding-top:10px;
text-align:center;
font-size:10px;
color:#324664;
margin:auto;
}
#footerMasterSken a:link, #footerMasterSken a:visited, #footerMasterSken a:active {
color:#324664;
text-decoration:underline;
}
#footerMasterSken a:hover {
text-decoration:none;
}
/* Content related links within content itself */
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Master Sken</title>
<link href="mastersken.css" rel="stylesheet" type="text/css" />
<link href="pulloutAgain.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- This wraps entire document. Has a backgroundrepeating image -->
<div id="wrapperMasterSken">
<!-- This is the header portion -->
<div id="headerMasterSken">
<form id ="simta" action="home_mastersken.html" method="post">
<p id="simtalogin"><label>SIMTA Login:</label>
<input name="Username" type="text" value="Username" size="20" />
<input name="Password" type="text" value="Password" size="20" />
<img src="images/design/arrowBlueMasterSken.jpg" alt="Master Sken SIMTA Login Click here" /></p>
</form>
</div>
<!-- End of header -->
<!-- Beginning of navigation -->
<div id="navigationMasterSken">
<div class="menu2">
<ul>
<!-- #1 MENU ITEM -->
<li class="home"><a href="index.php">Home</a></li>
<!-- #2 MENU ITEM -->
<li class="products"><a href="aboutus.php">About Us<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- SECOND LEVEL OF MENU -->
<ul>
<li class="subprod1"><a href="#nogo">2nd Level</a></li>
<li class="subprod1"><a href="#nogo">2nd Level</a></li>
<li class="subprod3"><a href="#nogo">2nd Level<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- THIRD LEVEL OF MENU -->
<ul>
<li><a href="#nogo">3rd Level</a></li>
<li><a href="#nogo">3rd Level</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- BACK TO SECOND LEVEL OF MENU -->
<li class="subprod1"><a href="#nogo">2nd Level</a></li>
<li class="subprod2"><a href="#nogo">2nd Level</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- #3 MENU ITEM -->
<li class="services"><a href="simta.php">SIMTA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="subserv4"><a href="grading.php">Grading</a></li>
<li class="subserv3"><a href="insurance.php">Insurance</a></li>
<li class="subserv1"><a href="seminars.php">Seminars</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- #4 MENU ITEM -->
<li class="contact"><a href="masterskenacademy.php">Master Sken Academy</a></li>
<!-- #5 MENU ITEM -->
<li class="contact"><a href="clothingandequipment.php">Clothing & Equipment</a></li>
<!-- #6 MENU ITEM -->
<li class="contact"><a href="dvd.php">DVD's</a></li>
<!-- #7 MENU ITEM -->
<li class="contact"><a href="tournamentsandevents.php">Tournaments & Events</a></li>
<!-- #8 MENU ITEM -->
<li class="contact"><a href="forum.php">Forum</a></li>
<!-- #9 MENU ITEM -->
<li class="contact"><a href="photogallery.php">Photo Gallery</a></li>
<!-- #10 MENU ITEM -->
<li class="contact"><a href="clublocation.php">Club Location</a></li>
<!-- #11 MENU ITEM -->
<li class="contact"><a href="links.php">Links</a></li>
<!-- #12 MENU ITEM -->
<li class="contact"><a href="giftvouchers.php">Gift Vouchers</a></li>
<!-- #13 MENU ITEM -->
<li class="contact"><a href="contactus.php">Contact Us</a></li>
<!-- #14 MENU ITEM -->
<li class="contact"><a href="#sitemap.php">Sitemap</a></li>
</ul>
</div>
<img src="images/design/navBottom_mastersken.jpg" alt="Master Sken Bottom" />
<img src="images/design/navStrength_mastersken.jpg" alt="Master Sken Find Your Strength" />
<img src="images/design/navBalance_mastersken.jpg" alt="Master Sken Find Your Balance" /></div>
<!-- End of navigation -->
<!-- Content: includes sidebar AND content in the middle -->
<div id="contentMasterSken">
<form id ="searchform" action="home_mastersken.html" method="post">
<p id="search"><label>Search</label>
<input name="Search" type="text" value="" size="40" />
<img src="images/design/arrowRedMasterSken.jpg" alt="Master Sken SIMTA Login Click here" /></p>
</form>
<!-- Right sidebar is set up as a list -->
<ul id="rightsidebarMasterSken">
<li><h2>Master Sken DVD's</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sed lacus. Curabitur pulvinar. Ut consectetuer. Duis ultricies. Phasellus facilisis facilisis </p></li>
<li><h2>Offers & Promotions</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sed lacus. Curabitur pulvinar. Ut consectetuer. Duis ultricies. Phasellus facilisis facilisis <a href="offersandpromotions.php">>></a></p></li>
<li><h2>Grading & Instructors</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sed lacus. Curabitur pulvinar. Ut consectetuer. Duis ultricies. Phasellus facilisis facilisis <a href="gradingandinstructors.php">>></a></p></li>
<li><h2>Tournaments & Events</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sed lacus. Curabitur pulvinar. Ut consectetuer. Duis ultricies. Phasellus facilisis facilisis <a href="tournamentsandevents.php">>></a></p>
</li>
<li><h2>Master Sken Academy</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sed lacus. Curabitur pulvinar. Ut consectetuer. Duis ultricies. Phasellus facilisis facilisis <a href="masterskenacademy.php">>></a></p>
</li>
</ul>
<!-- End of right sidebar -->
<div id="contentmiddleMasterSken">
<h1>Welcome to Master Sken</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sollicitudin venenatis velit. Aliquam fermentum, mi sed faucibus volutpat, elit felis aliquet orci, non volutpat neque pede eget justo. Proin nulla. In lorem. In iaculis mauris a sapien. Quisque ipsum elit, placerat eget, tincidunt sed, lobortis quis, nunc. Praesent massa turpis, tincidunt tempor, vehicula sed, elementum eget, ligula. Integer tellus velit, aliquam quis, porttitor sed, imperdiet eu, felis. Vivamus dignissim molestie dolor. Fusce a dui at purus blandit gravida. Vivamus sollicitudin, ante quis commodo aliquam lacus mauris eget quam. Fusce fermentum libero et ipsum. Mauris dapibus felis et neque.
Aliquam lacus <a href="linktowhat.php">Link</a> quam, dictum sed, laoreet at, feugiat in, sdiam. Etiam ut lorem. Aenean vitae turpis a neque vehicula sodales. Donec ante eros, porttitor sed, porttitor at, mollis ut, velit. Vestibulum in lorem. Nulla </p>
<div id="shopMasterSken">
<img src="images/design/shopDVDMasterSken.jpg" alt="Shop Master Sken DVD's" />
<img src="images/design/shopClothingMasterSken.jpg" alt="Shop Master Sken Clothing" />
<img src="images/design/shopEquipmentMasterSken.jpg" alt="Shop Master Sken Equipment" />
</div>
<h1>Latest News& Upcoming Events</h1>
<p>elementum eget, ligula. Integer tellus velit, aliquam quis, porttitor sed, imperdiet eu, felis. Vivamus dignissim molestie dolor. Fusce a dui at purus blandit gravida. Vivamus sollicitudin, ante quis commodo aliquam lacus mauris eget quam. Fusce fermentum libero et ipsum. Mauris dapibus felis et neque.
Aliquam lacus <a href="linktowhat.php">Link</a> quam, dictum sed, laoreet at, feugiat in, sdiam. Etiam ut lorem. Aenean vitae turpis a neque vehicula sodales. Donec ante eros, porttitor sed, porttitor at, mollis ut, velit. Vestibulum in lorem. Nulla </p>
</div>
<div style="clear:both;"> </div>
</div>
<!-- End of content -->
<div style="clear:both;"> </div>
</div>
<!-- End of wrapper -->
<div id="footerMasterSken">
<p>©2007 Master Sken. All rights reserved. Site design by <a href="http://www.centralmasswebdesign.com/" title="central mass web design">Central Mass Web Design</a></p>
</div>
<div class="menu2">
<ul>
<!-- #1 MENU ITEM -->
<li class="home"><a href="index.php">Home</a></li>
<!-- #2 MENU ITEM -->
<li class="products"><a href="aboutus.php">About Us<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- SECOND LEVEL OF MENU -->
<ul>
<li class="subprod1"><a href="#nogo">2nd Level</a></li>
<li class="subprod1"><a href="#nogo">2nd Level</a></li>
<li class="subprod3"><a href="#nogo">2nd Level<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- THIRD LEVEL OF MENU -->
<ul>
<li><a href="#nogo">3rd Level</a></li>
<li><a href="#nogo">3rd Level</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- BACK TO SECOND LEVEL OF MENU -->
<li class="subprod1"><a href="#nogo">2nd Level</a></li>
<li class="subprod2"><a href="#nogo">2nd Level</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- #3 MENU ITEM -->
<li class="services"><a href="simta.php">SIMTA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="subserv4"><a href="grading.php">Grading</a></li>
<li class="subserv3"><a href="insurance.php">Insurance</a></li>
<li class="subserv1"><a href="seminars.php">Seminars</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- #4 MENU ITEM -->
<li class="contact"><a href="masterskenacademy.php">Master Sken Academy</a></li>
<!-- #5 MENU ITEM -->
<li class="contact"><a href="clothingandequipment.php">Clothing & Equipment</a></li>
<!-- #6 MENU ITEM -->
<li class="contact"><a href="dvd.php">DVD's</a></li>
<!-- #7 MENU ITEM -->
<li class="contact"><a href="tournamentsandevents.php">Tournaments & Events</a></li>
<!-- #8 MENU ITEM -->
<li class="contact"><a href="forum.php">Forum</a></li>
<!-- #9 MENU ITEM -->
<li class="contact"><a href="photogallery.php">Photo Gallery</a></li>
<!-- #10 MENU ITEM -->
<li class="contact"><a href="clublocation.php">Club Location</a></li>
<!-- #11 MENU ITEM -->
<li class="contact"><a href="links.php">Links</a></li>
<!-- #12 MENU ITEM -->
<li class="contact"><a href="giftvouchers.php">Gift Vouchers</a></li>
<!-- #13 MENU ITEM -->
<li class="contact"><a href="contactus.php">Contact Us</a></li>
<!-- #14 MENU ITEM -->
<li class="contact"><a href="#sitemap.php">Sitemap</a></li>
</ul>
</div>
</body>
</html>
Can see in action at:
http://www.closeoutmadness.com/karate/h ... rsken.html
Appreciate any help. This validates in w3c.
Thanks, Marie
