Hello, building a website, I got some css for a drop down menu that was supposed to be cross browser. It works fine in IE but doesn’t appear in MF. There is a bit in the CSS that I have messed about with, which is:
.menu ul li a.hide,
.menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
When I mess with this, I can get it to work in MF but it then appears differently in IE. It displays every link in the list twice!
I know that this code just needs some tinkering to get it to work on both browsers.
Any help would be much appreciated.
Below is the CSS for the whole document.
/* CSS Document for Washingwell School*/
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#996600;
font-size:10px;
background:#88652b;
}
/* This is NAV */
#mainNav{
padding:0;
margin:0;
text-align:right;
font-size:12px;
width:186px;
font-family:Georgia, “Times New Roman”, Times, serif;
}
#mainNav a{
display:block;
color:#996600;
background:url(…/images/nav_bg.gif) right no-repeat;
text-decoration:none;
padding:7px 75px 7px 0;
margin:0;
}
#mainNav a:hover{
background:url(…/images/nav_rollover.gif) right no-repeat;
color:#996600;
text-decoration:none;
padding:7px 75px 7px 0;
margin:0;
}
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative top; margin:0; font-size:11px; margin:0;}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#654a1d;
width:128px;
voice-family:""}"";
voice-family:inherit;
width:118px;
height:25px;
text-align:right;
border:1px solid #fff;
border-width:1px 1px 0 0;
padding-right:10px;
background:#ebe4d0;
line-height:19px;
font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#654a1d; background:#ebe4d0;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:129px; width:80px;}
.menu ul li:hover ul li a.hide {background:#ebe4d0; color:#654a1d;}
.menu ul li:hover ul li:hover a.hide {width:100px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#fff; width:100px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#fff;}
table {border-collapse:collapse; border:0; margin:0; padding:0;}
.menu ul li a.hide,
.menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:129px; width:80px;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff; width:100px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#654a1d;}
#leftcolumn h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#663300;
padding:5px;
letter-spacing:5px;
text-align:left;
width:500px;
background-image:url(…/images/header_bg.gif);
border-left:1px solid #CCCC99;
border-bottom:1px solid #996600;
border-right:1px solid #996600;
border-top:1px solid #CCCC99;
}
#docnav a{
display:block;
color:#996600;
background:url(…images/nav_bg_docs.gif) right no-repeat;
text-decoration:none;
padding:6px 55px 6px 0;
margin:0;
}
#docnav a:hover{
background:url(…images/nav_rollover.gif) right no-repeat;
color:#996600;
text-decoration:none;
padding:6px 55px 6px 0;
margin:0;
}
#holder{
width:868px;
margin:auto;
padding-top:40px;
padding-bottom:0px;
}
#header{
width:868px;
height:33px;
background:url(…/images/header.jpg) no-repeat;
}
#mainHolder{
background:url(…/images/hackline.gif) repeat-y;
width:868px;
margin:0;
padding:0;
}
#galleryhome img{
border-left:2px solid #CCCC99;
border-bottom:2px solid #996600;
border-right:2px solid #996600;
border-top:2px solid #CCCC99;
margin-bottom:10px;
margin-right:6px;
}
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac */
- html .clearfix {height: 1%;}
/* End hide from IE-mac */
#leftcolumn{
margin:0;
float:left;
padding:170px 102px 30px 50px;
width:682px;
voice-family:""}"";
voice-family:inherit;
width:530px;
background:url(…/images/bg_girl_white_lines.jpg) top left no-repeat;
}
#rightcolumn{
background-image:url(…/images/right_column_1_pixel.gif);
margin:0;
float:right;
width:186px;
}
#footer{
clear:both;
float:none;
height:70px;
vertical-align:top;
background:url(…/images/footer.gif) no-repeat;
text-align:right;
margin:0px;
padding: 10px 70px 0 0;
width:868px;
voice-family:""}"";
voice-family:inherit;
width:798px;
}
