jumping submenu

liunx · Jan 11, 2008

how to explain this - you'll just have to look at it.

My page is <a class="postlink" href="http://www.southgateschools.com/myindex.htm">http://www.southgateschools.com/myindex.htm</a>

In netscape 7.2 and opera 7.52 when you roll over the menu and the submenu pops up and then you roll over the submenu, the menu jumps and you can see thru it and it is just plain annoying as heck. In Internet Explorer and Safari it is fine.

this is my style sheet:

/* This CSS file is used to style the Southgate Community School District Home Page only */
/* (Classes are the entries beginning with a '.') */

body {background-color: #eeeeee; background-image: url("../images/beige169.jpeg");}
table {border:0}
td {font: 12px arial; color: #770000; background-image: url("../images/beige169.jpeg");}
h3 {font: 16px arial; color: #770000; font-style: bold;}
h4 {font: 18px arial; color: #770000}
p {font: 12px arial; color: #770000;}

DL
{
z-index: 300;
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

DT
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

DD
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

UL
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

LI
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

#menu
{
LEFT: 1em; WIDTH: 10em; POSITION: absolute; TOP: 200px
}

#menu DT
{
z-index:200;
BORDER-RIGHT: #770000 2px solid;
BORDER-TOP: #770000 1px solid;
PADDING-LEFT: 5px;
PADDING-TOP: 3px;
FONT-SIZE: 75%;
COLOR: #770000;
BACKGROUND: #eeeeee;
MARGIN: 2px 2px;
BORDER-LEFT: #770000 1px solid;
BORDER-BOTTOM: #770000 2px solid;
CURSOR: pointer;
LINE-HEIGHT: 20px;
HEIGHT: 20px;
TEXT-ALIGN: left
}

#menu DD
{
BORDER-RIGHT: #770000 1px solid;
BORDER-TOP: #770000 1px solid;
FONT-SIZE: 75%;
COLOR: #770000;
BACKGROUND: #eeeeee;
MARGIN-TOP: -1.4em;
BORDER-BOTTOM: #770000 1px solid;
BORDER-LEFT: #770000 1px solid;
WIDTH: 220px;
LEFT: 10em; POSITION: absolute
}

#menu UL
{
PADDING-RIGHT: 2px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 2px;
margin: 2px;
}

#menu LI
{
FONT-SIZE: 75%;
COLOR: #770000;
LINE-HEIGHT: 18px;
HEIGHT: 18px;
TEXT-ALIGN: left;
margin: 2px;
}

#menu LI A
{
DISPLAY: block;
COLOR: #770000;
TEXT-DECORATION: none
}

#menu DD A
{
DISPLAY: block;
COLOR: #770000;
TEXT-DECORATION: none
}

#menu DT A
{
DISPLAY: block;
COLOR: #770000;
TEXT-DECORATION: none
}

#menu LI A:hover
{
TEXT-DECORATION: underline; color: #000000;
BACKGROUND: white
}

/* these are the font styles for links */

a:link {font: 12px arial; bold; color: #770000; text-decoration: none;}
a:active {font: 12px arial; color: #770000; text-decoration: none;}
a:visited {font: 12px arial; color: #770000; text-decoration: none;}
a:hover {font: 12px arial; color: #990000; background-color: white; text-decoration: underline;}

.wrapper /* remove this to have the page load at full width */
{
width: 780px;
}

.top_left
{
align: center;
padding: 0px 5px 0px 5px;
position: absolute;
/* border-left: thin solid #aaaaaa;
border-right: thin solid #aaaaaa;
border-top: thin solid #aaaaaa;
border-bottom: medium solid #770000; */
top: 10px;
left: 10px;
width: 500px;
height: 100px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}

p#addr
{
font: 14px verdana bold; color: #770000;
}

.top_right
{
align: center;
padding: 0px 5px 0px 5px;
position: absolute;
top: 14px;
left: 765px;
width: 175px;
height: 100px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
/* border-left: thin solid #770000;
border-right: thin solid #770000;
border-top: thin solid #770000;
border-bottom: thin solid #770000;*/
}

p.solidtop
{
background-image: "../images/SCSDbkg.gif";
}

.disclaimer
{
position: absolute;
top: 750px;
width: 965px;
left: 10px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}

.menuleft
{
position: absolute;
top: 200px;
left: 20px;
width: 208px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
/*background-color: white;
border-left: thin solid #770000;
border-right: thin solid #770000;
border-top: thin solid #770000;
border-bottom: thin solid #770000;*/
}

.temporary
{
position: absolute;
top: 135px;
left: 20px;
width: 208px;
padding: 0px 5px 0px 5px;
margin: 0px;
background-color: white;
border-left: thin solid #770000;
border-right: thin solid #770000;
border-top: thin solid #770000;
border-bottom: thin solid #770000;
}

.powerschool
{
position: absolute;
top: 450px;
left: 20px;
width: 208px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
/*background-color: white;
border-left: thin solid #770000;
border-right: thin solid #770000;
border-top: thin solid #770000;
border-bottom: thin solid #770000;*/
}

.closed
{
position: absolute;
top: 140px;
left:760px;
width: 205px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
background-color: white;
border-left: thin solid #770000;
border-right: thin solid #770000;
border-top: thin solid #770000;
border-bottom: thin solid #770000;
}

.weather
{
position: absolute;
top: 200px;
left:760px;
width: 205px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
/*background-color: white;
border-left: thin solid #770000;
border-right: thin solid #770000;
border-top: thin solid #770000;
border-bottom: thin solid #770000;*/
}

.bottom
{
position: absolute;
top: 600px;
width: 965px;
left: 10px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}

/* First Row of Pictures - Allen, Anderson, Beacon, Chormann */

.allen
{
position: absolute;
top: 150px;
left: 260px;
width:118px;
z-index: 100;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}
.anderson
{
position: absolute;
top: 150px;
left: 380px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}
.beacon
{
position: absolute;
top: 150px;
left: 500px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}
.chormann
{
position: absolute;
top: 150px;
left: 620px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}

/* Second Row of Pictures - Fordline, Gerisch, Grogan, Northpointe */

.davidson
{
position: absolute;
top: 300px;
left: 260px;
width:118px;
z-index: 100;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}
.fordline
{
position: absolute;
top: 300px;
left: 380px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}
.gerisch
{
position: absolute;
top: 300px;
left: 500px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}
.grogan
{
position: absolute;
top: 300px;
left:620px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}

/* Third Row of Pictures - Shelters, Board, Asher */

.northpointe
{
position: absolute;
top: 450px;
left: 260px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}
.shelters
{
position: absolute;
top: 450px;
left: 380px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}
.board
{
position: absolute;
top: 450px;
left: 500px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}
.asher
{
position: absolute;
top: 450px;
left: 620px;
width:118px;
padding: 5px 5px 5px 5px; /* keeps text off the borders */
margin: 0px;
}It worked fine in Netscape 7.1 so I tried FireFox.
Wow! That is weird.
The only thing I could think of off the top of my head is that, in the javascript, you may be setting the display to 'none' in one 'if' statement then resetting it to 'block' in the next - causing the blink.It is your onmouseover/onmouseout calls:

<DT onmouseover="javascript:menu('smenu1'); return true;"
onmouseout="javascript:menu(); return false;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">District Info</a></DT>
<DD id=smenu1 onmouseover="javascript:menu('smenu1'); return true;"
onmouseout="javascript:menu(); return false;">
Use the "return true;" and "return false;" and you should be ok.

jumping submenu

liunx

Guest