No replies
reg44reg
reg44reg's picture
Offline
newbie
Baltimore, MD
Last seen: 13 years 46 weeks ago
Baltimore, MD
Timezone: GMT-4
Joined: 2007-04-03
Posts: 6
Points: 0

I have a horizontal drop menu at the top of my page thats working fine in FF, IE on PC but netscape (PC), FF and Safari on (mac) the second level menus fall/show behind a main content div just below it. Safari seems to be the worst off as it hides the entire dropped menu. Netscape wont even allow me to click on the second level, menu just closes.

Page view:

About ASDI

About

Affiliations/Collaborations

Online Catalog

Request a Quote

New Products/Additions

Publications

Search

 

About Company

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

 

css view:
/* SET BODY ATTRIBUTES */
body { font: 13px/1.4em Arial, Helvetica, sans-serif; line-height:16px; color:#fff; background:#1D455D url(/images/mainbg.jpg) repeat-x; margin-top:0; padding:0; /*behavior:url(/styles/csshover.htc);*/}
* {margin:0; padding:0;}

/* SITE STRUCTURE -------------------------------------------------------------
---------------------------------------------------------------------------*/
#WRAPPER {width:793px; margin:0 auto; border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc;}
#sectionDivider {border-bottom:1px #000 solid;}
#contentarea {background-color:#005267;}

/* HEADER ---------------------------------------------------------------------------
---------------------------------------------------------------------------------------*/
#HEADER {text-align:center; height:153px; background-image:url(/images/mainimg_01.jpg); background-repeat:no-repeat;}
#HEADER a,
#HEADER a:link,
#HEADER a:visited {color:#C47C00; text-decoration:none;}

#HEADER a:hover,
#HEADER a:focus,
#HEADER a:active {color:#C47C00; text-decoration:underline;}

/* CONTENT --------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/
#MainContent {float:left; display:inline; width:618px; background-image:url(/images/mainimg_grd.jpg); padding:0;}

#MainContent h1 {margin:30px 0 1em 0; font-size:20px; color:#fff; font-weight:bold; text-align:center; letter-spacing:-1px;}
#MainContent h2 {margin:0 0 .5em 0; font-size:15px; color:#CC6633;}
#MainContent h3 {margin:0 0 .5em 0; font-size:12px; color:#99CC33;}
#MainContent h4 {margin:0 5px 0 0; font-size:12px; color:#fff; font-weight:normal; text-align:right;}

#MainContent p {font-size:13px; margin:20px 10px 30px 30px; color:#FFFFFF;}

#MainContent a,
#MainContent a:link,
#MainContent a:visited {color:#fff; text-decoration:none;}

#MainContent a:hover,
#MainContent a:focus,
#MainContent a:active {color:#D9AF69; text-decoration:underline;}

#SubContent {float:left; display:inline; width:618px; height:500px; padding:0px; margin:0px; background:url(/images/mainimg_grd.jpg) top no-repeat; background-color:#007998; overflow:auto;}

#SubContent h1 {margin:20px 15px 10px 20px; font-size:18px; color:#fff; font-weight:bold;}
#SubContent h2 {margin:0 0 .5em 0; font-size:15px; color:#fff;}
#SubContent h3 {margin:0 0 .5em 20px; font-size:12px; color:#fff;}
#SubContent h4 {margin:20px 25px 25px 25px; font-size:12px; color:#fff;}

#SubContent p {margin:20px 25px 25px 25px; font-size:13px; line-height:15px; color:#fff; font-weight:normal;}
.boldhead {margin:0 0 .5em 0; font-size:12px; color:#fff; font-weight:bold;}
div#SubContent ul {margin:0 20px 0 55px;/* indents ul from edge of container */}
div#SubContent li {list-style-type:disc;}

#SubContent a,
#SubContent a:link,
#SubContent a:visited {color:#fff; text-decoration:underline;}

#SubContent a:hover,
#SubContent a:focus,
#SubContent a:active {color:#D9AF69; text-decoration:underline;}

#ScContent {float:left; display:inline; width:618px; height:500px; padding:0px; margin:0px; overflow:auto;}

#ScContent h1 {margin:20px 15px 10px 20px; font-size:18px; color:#fff; font-weight:bold;}
#ScContent h2 {margin:0 0 .5em 0; font-size:15px; color:#fff;}
#ScContent h3 {margin:0 0 .5em 20px; font-size:12px; color:#fff;}
#ScContent h4 {margin:20px 25px 25px 25px; font-size:12px; color:#fff;}

#ScContent p {margin:20px 25px 25px 25px; font-size:13px; line-height:15px; color:#fff; font-weight:normal;}
div#ScContent ul {margin:0 20px 0 55px;/* indents ul from edge of container */}
div#ScContent li {list-style-type:disc;}

#ScContent a,
#ScContent a:link,
#ScContent a:visited {color:#fff; text-decoration:underline;}

#ScContent a:hover,
#ScContent a:focus,
#ScContent a:active {color:#D9AF69; text-decoration:underline;}

/* TOP NAV BAR -----------------------------------------------------------------------
--------------------------------------------------------------------------------------
/* the horizontal menu starts here */
div#navarea {width:100%; height:29px; background:url(/images/mainimg_02.jpg) top no-repeat;}
div#listmenu {width:96%; font-size:13px; font-weight:bold; float:left; height:29px;}
div#listmenu ul {margin:5px 0 0 0;/* indents ul from edge of container */}
div#listmenu li {float:right; position:relative; list-style-type:none;}

/*the first vertical line on the menu
div#listmenu li:first-child {border-left:0px solid #069; }*/

/*sets the background of the menu items */
div#listmenu li:hover {background-color:#00A9C3;}
div#listmenu a {display:block; padding:0 8px; text-decoration:none; color:#fff;}
div#listmenu a:hover {color:#fff;}
/* the horizontal menu ends here */

/* the drop-down starts here */
div#listmenu ul li ul {margin:0; position:absolute; width:10em; left:-1.25px;}/*aligns the drop exactly under the menu */
div#listmenu ul li ul li {width:99%; font-size:11px; border-bottom:1px solid #1D455D; padding:0 0 1px 0; background-color:#006C87;}
/*the top edge of the dropdown */
div#listmenu ul li ul li:first-child {border-top:0px solid #069;}
/* make the drop-down display as the menu is rolled over */
div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* pop-out starts here */
body div#listmenu ul li ul li ul {visibility:hidden; top:-1px;}
div#listmenu ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* second level popouts start here*/
div#listmenu ul li ul li:hover ul li ul {visibility:hidden;}
div#listmenu ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* third level popouts start here*/
div#listmenu ul li ul li ul li:hover ul li ul {visibility:hidden;}
div#listmenu ul li ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {float:left; margin-left:0px;} /* IE doubles the given value above - why? */
/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html div#listmenu ul li ul {border-top:0px solid #069; border-left:0px;} /* stops the drop inheriting the ul border */
/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html div#listmenu ul li ul li ul {left:9.85em; voice-family: "\"}\""; voice-family:inherit; left:11.5em;}
/* and the "be nice to Opera" rule */
html>body div#listmenu ul li ul li ul {left:11.5em;}

/* An Opera-only hack to fix a redraw problem by invisibly extending the ul */
/*@media all and (min-width: 0px){
body div#listmenu ul li ul {padding-bottom:200px;}
body div#listmenu ul li ul li ul {padding-bottom:22px;}
body div#listmenu ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */

/*}
/*end Opera hack */
/* end of hack zone */
/* END OF LIST-BASED MENU */

/* Deal with MAc5 IE
@import("/styles/ie51_menu_hack.css");*/

/* END OF DROP DOWN MENUS */

/* News window -------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------- */
#newswin {float:right; margin-top:0; padding:45px 20px 30px 30px;}
#newswin h1, #newswin h2, #newswin p { margin:0 10px; letter-spacing:1px; }
#newswin h1 {padding:8px 0 8px 0; font-size:20px; color:#fff; font-weight:bold; text-align:center; letter-spacing:-1px;}
#newswin h2 {font-size:1em;color:#06a; border:0;}
#newswin p {font-size:11px; padding-bottom:0.5em;}
#newswin h2 {padding-top:0.5em;}
#newswin {background: transparent; margin-top:1em; width:35%;}

.xtop, .xbottom {display:block; background:none; font-size:1px;}
.xtop *, .xbottom *{display: block; height: 1px; overflow: hidden}
.x1{ margin: 0 5px; background: #fff; }
.x2{margin: 0 3px}
.x3{margin: 0 2px}
.x4{margin: 0 1px; height: 2px}
.x3, .x4 {background:transparent; border-left:1px solid #fff; border-right:1px solid #fff;}
.x2 { background:transparent; border-left:2px solid #fff; border-right:2px solid #fff;} /* *** added *** */
.xboxcontent {display:block; background:none; border:0 solid #fff; border-width:0 1px;}

.xboxcontent .noTopgap { margin-top: 0 !important; } /* *** added *** */

/* RIGHT SIDE BAR --------------------------------------------------------------------
--------------------------------------------------------------------------------------- */
#Rightside {float:right; display:inline; width:197px; height:380px; text-align:center; border:1px solid #fff; margin:30px 10px 0 10px; }
#Rightside h1 {font-size:18px; font-weight:normal; color:#4c6faa;}
#Rightside p {font-size: 11px; line-height:12px; font-weight:normal; color:#FFFFFF; margin:15px 10px 5px 10px;}

.Newprod {text-align:center;}


/* LEFT SIDE BAR --------------------------------------------------------------------
--------------------------------------------------------------------------------------- */
#Leftside {float:left; display:inline; width:175px; height:443px; text-align:left; background-image:url(/images/mainimg_03.jpg); background-repeat:repeat-y; background-color:#005469}
#Leftside p {font-size:13px; font-weight:normal; color:#FFFFFF; margin:20px 10px 0 0; text-align:right;}
#Leftside a,
#Leftside a:link,
#Leftside a:visited {color:#fff; text-decoration:none;}

#Leftside a:hover,
#Leftside a:focus,
#Leftside a:active {color:#D9AF69; text-decoration:underline;}

/* LEFT SUBPAGE SIDE BAR --------------------------------------------------------------------
--------------------------------------------------------------------------------------- */
#Leftsub {float:left; display:inline; width:175px; height:460px; text-align:right; background-image:url(/images/mainimg_grdlt.jpg); background-color:#005267;}
#Leftsub p {font-size:13px; font-weight:normal; color:#FFFFFF; margin:20px 10px 0 0; text-align:right;}
#Leftsub a,
#Leftsub a:link,
#Leftsub a:visited {color:#fff; text-decoration:none;}

#Leftsub a:hover,
#Leftsub a:focus,
#Leftsub a:active {color:#D9AF69; text-decoration:none;}

/* FOOTER ----------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------*/
#FOOTER {background:#1D455D; padding:10px 10px 10px 10px; border:1px solid #fff; border-width:1px 0 0 0; color:#fff; text-align:center;}
#FOOTER p {font-size:9px; line-height:13px;}
.footerlinks {}

.footerlinks a,
.footerlinks a:link,
.footerlinks a:visited {color:#fff; text-decoration:none;}

.footerlinks a:hover,
.footerlinks a:focus,
.footerlinks a:active {text-decoration:underline;}

/* LOGIN --------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------*/
#LoginSub {float:left; display:inline; width:618px; padding:20px 0 200px; margin:0px; background:url(/images/mainimg_grd.jpg); background-repeat:no-repeat; background-color:#007998;}
#LoginSub a,
#LoginSub a:link,
#LoginSub a:visited {color:#fff; text-decoration:none;}

#LoginSub a:hover,
#LoginSub a:focus,
#LoginSub a:active {text-decoration:underline;}

#Login {width:375px; margin:0 auto; border:1px solid #fff; background-color:#1D455D;}
#Login p {font-size:13px; font-weight:bold; text-align:right; line-height:13px; margin:5px;}
.top {background-color:#C47C00; font-size:19px; font-weight:bold; color:#fff; text-align:center; padding:8px; border-bottom:1px solid #fff;}

#Custwrap {float:left; display:inline; width:618px; padding:20px 0 10px; margin:0px; background:url(/images/mainimg_grd.jpg); background-repeat:no-repeat; background-color:#007998;}

#Customerb {width:570px; margin:0 auto;}
#Customerb p {font-size:13px; font-weight:bold; text-align:left; line-height:13px; margin:5px;}
#Customerb td {border:1px solid #fff; background:#006C87; padding:3px;}
.tophead {font-size:17px; font-weight:bold; color:#fff; text-align:center; padding:10px;}
.topsubhead {font-size:13px; font-weight:bold; color:#fff; text-align:center; padding:5px;}
.center {text-align:center;}


.clearfix:after {
content: "."; /* the period is placed on the page as the last thing before the div closes */
display: block; /* inline elements don't respond to the clear property */
height: 0; /* ensure the period is not visible */
clear: both; /* make the container clear the period */
visibility: hidden; /* further ensures the period is not visible */
}

.clearfix {display: inline-block;} /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}

Assistance with this would be greatly appreciated.
REG