I am working on website navigation and the navigation works fine in every browser on a window system, including windows safari. The problem then arises on a MAC. what is happening is that when you roll over then then roll off of your first link that link disappears. This will only happen the one time and it does not show back up, then the sup navigation shows up in the wrong spot for all proceeding rollovers from this point on.
My first thought was that I had an issue with javascript that was preventing this from working, but it continued even after javascript was turned off.
the link is wrgbc.com/development
here is my css for the menu
Quote:
/* ================================================== ==============
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 */
.menu2{
font-size:1.1em; font-family: arial, sans-serif; width:200px; height:100px; position:relative; margin:30px 0; z-index:10000; float:left;
}
.menu2 ul {
padding:0; margin:0; list-style-type: none; width:100px; height:100px; border:none;
}
.menu2 ul li ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:85px;
}
.menu2 ul li {
float:left;
}
.menu2 ul li a, .menu2 ul li a:visited {
display:block; float:left; text-decoration:none; width:100px; height:22px; line-height:1.2em; background:transparent;
}
* html .menu2 ul li a, * html .menu2 ul li a:visited {width:120px;}
.menu2 table {
border-collapse:collapse; border:0; margin:0; padding:0; position:absolute; left:0; top:0;
}
.menu2 ul li:hover {position:relative; z-index:90;}
* html .menu2 ul li a:hover {position:relative; z-index:100;}
.menu2 ul li:hover ul,
.menu2 ul li a:hover ul {
visibility:visible; position:absolute; height:100px; width:250px; border:none; overflow:visible; white-space: nowrap;
}
.menu2 ul li:hover ul li a,
.menu2 ul li a:hover ul li a{
display:block; background:transparent; line-height:1.94em; padding:0px 0px 0px 35px; height ; text-decoration:none;
}
/*moves the fifth item up in the second navigation*/
.menu2 ul li + li + li + li + li +li {
position:relative; top:-9.6em; left:130px;
}
/*navigation links*/
.menu2 ul li a, .menu2 ul li ul li a, .homeLink {
text-decoration: none;
color: #333;
}
.menu2 ul li a:hover, .menu2 ul li ul li a:hover, .homeLink:hover {
color:#003366;
}
|
and here is the formatting css:
Quote:
body {
margin: 60px 0 0 0;
padding: 0;
text-align:center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;/* font sizing in ems, baby. if you want to change anything, just change this.*/
/*funny thing happens at 75% and lower. opera goes to a nice small size, but moz and ie pc change almost not at all. seems 76% is as small as you can go and stay the same across browsers. poop.*/
color: #000;
background-color: #fff;
background-image: url(http://www.thenoodleincident.com/img/_.gif);/*these three lines replace the n4_upgrade.gif in n4.css. and if you use this code, make sure you point to an img on _your_ server, not mine.*/
background-repeat: no-repeat;
background-position: top left;
}
#content {
margin: 0em;
padding: 4em 6em 2em 6em;/* use padding instead of margin for multicolumn layouts because of a really odd ie5pc bug where it sometimes relates the width of an unrelated menu div to this div. i'll, uh, write about that somewhere. it was hard to figure out what was causing it, so i want this note here to remind me. */
}
/*the following classes are to demonstrate better line heights for narrow columns*/
.narrow1{
width: 50%;
line-height: 1.3em;
}
.narrow2{
width: 50%;
line-height: 1.5em;
}
/*typography*/
a {
text-decoration: none;
color: #333;
}
a:link {
}
a:visited {
}
a:active {
}
a:hover {
/*color:#003366;*/
}
h1 {
font-size: 2.0em;
font-weight: normal;
margin-top: 0em;
margin-bottom: 0em;/*both set to zero and padding in header div is used intead to deal with compound ie pc problems that are beyound summary in a simple comment.*/
}
h2 {
font-size: 1.7em;
margin: 1.2em 0em 1.2em 0em;
font-weight: normal;
}
h3 {
font-size: 1.4em;
margin: 1.2em 0em 1.2em 0em;
font-weight: normal;
}
h4 {
font-size: 1.2em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
h5 {
font-size: 1.0em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
h6 {
font-size: 0.8em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
img {
border: 0;
}
p {
font-size: 1.0em;
line-height: 1.8em;
margin: 1.2em 0em 1.2em 0em;
}
li > p {
margin-top: 0.2em;
}
pre {/*moz 1.0/1.1/1.2.1, net 7.0/7.01 make this way too small, but i'm not going to go larger because monospace tends to run you into overflow pretty quick. prior moz and net are okay.*/
font-family: monospace;
font-size: 1.0em;
}
strong, b {
font-weight: bold;
}
#wrapper {
margin:0 auto;
text-align:left;
width:750px;
font-size:.85em;
}
|
and here is the html:
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Web Page Title</title>
<script language="JavaScript" type="text/javascript" src="includes/javascript/common.js"></script>
<link rel="stylesheet" type="text/css" href="includes/css/styles.css" />
<link rel="stylesheet" type="text/css" href="includes/css/menu.css" />
</head>
<body>
<div id='wrapper'>
<a href="index.php">
<img src="images/logo2.jpg" alt="Grace Church" style="float:left; position:relative; border:none;" />
</a>
<div style="float:right; margin-top:20px;">
<a href="index.php" class="homeLink">home</a>
</div>
<img src="images/banner.jpg" style="margin-top:45px; width:750px; height:300px;" />
<div class="menu2" >
<ul>
<li><a href="#nogo" onmouseover="menuFade('nav1')" id="nav1">about us<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="margin-top:-3px;">
<li><a href="#nogo">who is Grace Church</a></li>
<li><a href="#nogo">history</a></li>
<li><a href="#nogo">staff</a></li>
<li><a href="#nogo">vision</a></li>
<li><a href="#nogo">location + directions</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" onmouseover="menuFade('nav2')" id="nav2">what we're doing<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="margin-top:-25px;">
<li><a href="#nogo">men</a></li>
<li><a href="#nogo">women</a></li>
<li><a href="#nogo">student</a></li>
<li><a href="#nogo">children</a></li>
<li><a href="#nogo">parent</a></li>
<li><a href="#nogo">singles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" onmouseover="menuFade('nav3')" id="nav3">current<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="margin-top:-47px;">
<li><a href="#nogo">stories</a></li>
<li><a href="#nogo">church plant in Kent</a></li>
<li><a href="#nogo">teachings</a></li>
<li><a href="#nogo">music</a></li>
<li><a href="#nogo">videos</a></li>
<li><a href="#nogo">photos</a></li>
<li><a href="#nogo">calendar</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" onmouseover="menuFade('nav4')" id="nav4">connecting<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="margin-top:-69px;">
<li><a href="#nogo">01 classes</a></li>
<li><a href="#nogo">small groups</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" onmouseover="menuFade('nav5')" id="nav5">serving</a></li>
</ul>
</div>
<div style="background:transparent; width:370px; height:120px; float:left; margin:25px 0 0 -210px;" onmouseout="menuFadeIn()"></div>
</div>
</body>
</html>
|
any help is appreciated, and thank you for your time.
-Pat |
