16 replies [Last post]
monstordh
Offline
Regular
Central Arkansas
Last seen: 13 years 43 weeks ago
Central Arkansas
Joined: 2008-03-05
Posts: 24
Points: 0

Ok. This one has me stumped (that's why I'm asking for help, of course)...

I have a CSS-based dropdown nav menu system that I use all the time. Normally, there are no problems with it at all. This time, there are issues with guess who? Yes. Your favorite and mine... Internet Exploder.

Some background info:
First, I cannot use a doctype with this site due to some javascript issues with a core module that my client uses as part of their dynamically driven content.

Second, I don't have control over the dynamically generated content of this site, a good chunk of it which is based on a php template/engine pulling from a database. However, I've built dozens of these sites running on the same system and never had these issues.

Lastly, I'm using php includes, so all of my code for the page isn't simply copy & paste. I'll post here what I believe is necessary and if you need more, just ask.

ps. There is a javascript file that I'm using which makes the dropdown menu CSS trigger in IE.

To the problem:
Here's a visual reference:

http://www.massartauctioneers.com/test/index.php

If you scroll over the nav item "Services" you get a dropdown menu with sublinks. All is fine until you view it in IE (any version). There are two problems. The first is obvious. It "appears" that part of the secondary menu is being covered by the "Company Profile" image. The second issue is only noticeable from a different page. Here's the link:

http://www.massartauctioneers.com/test/auction_detail.php?ID=380285

If you scroll over "Services" again, the subtitle for the page ("Public Auction") is overlapping the submenu. Although the div holding that text (#auctionTitle) does not have a z-index, it's parent container (#container) has a z-index of 5. Here's where it gets strange. My navmenu (ul#navmenu) has a z-index of 500. Yet it is beneath the #auctionTitle.

This project is due out today. Any help I could get would certainly appreciated.

relevant site code:

United Country Massart Auctioneers, Inc. :: HOME
<?php include 'head_info.php'; ?>


<?php include 'header.php'; ?>

<?php include 'left.php'; ?>

Massart Auctioneers Inc.

Founded in 1974, Massart Auctioneers, Inc. is a full time, full service auction company, dedicated to expert, professional and quality services.

Committed to excellence, this second-generation, family-owned and operated auction business conducts over 100 auctions each year and at least 12 to 24 charity auctions per year.

When it comes to service and representing our client, you, our client, are number one!


  • First-Class Professional Service

  • Pride and Professionalism of Work Ethics

  • Complete Auction Services

  • Professional Auctioneers, Appraisers and Consultants

Contact Massart Auctioneers Inc. today and see how their professional service, professional staff and state-of-the-art method of conducting auctions can benefit you!









<?php include 'footer.php'; ?>





CSS for layout:
/*===========================
011E36 = blue (background)
394F90 = blue (nav)
379028 = green
===========================*/

html {border:0;}

body {
background: #011E36 url('images/bg.jpg') repeat-x scroll top left;
text-align: center;
margin: 0 auto;
}

img {
border: 0px none transparent;
display: block; /*This fixes the vertical spacing issue in IE*/
}

table img {
display: inline;
}

#massart_wrapper {
width: 895px;
text-align: left;
margin: 0 auto;
}

#massart_header {
width: 895px;
height: 120px;
margin: 0;
}

#massart_logo {
background: url('images/logos.jpg') no-repeat scroll top left;
width: 515px;
height: 120px;
float: left;
display: inline; /*fixes IE Doubled Float-Margin Bug*/
/*IE GIVES ME GRIEF*/
}

#massart_flash {
/* background: url('images/flash_temp.jpg') no-repeat scroll top left;*/
width: 380px;
height: 120px;
float: left;
}

#massart_main {
background: #379028 url('images/wrapper_topLeft.jpg') no-repeat scroll top left;
width: 895px;
padding: 0;
margin: 0;
text-align: center;
float: left;
}

#content_wrapper {
background: #FFF url('images/watermark.jpg') no-repeat scroll center center;
width: 665px;
text-align: left;
margin: 0 auto;
float: left;
}

#content_top {
background: url('images/content_top.jpg') no-repeat scroll top left;
width: 665px;
height: 10px;
}

#content_bottom {
background: url('images/content_bottom.jpg') no-repeat scroll top left;
width: 665px;
height: 10px;
}

#massart_content {
padding: 0 15px;
}

#wrapper_bottom {
background: url('images/wrapper_bottom.jpg') no-repeat scroll top left;
width: 895px;
height: 15px;
clear: both;
}

#massart_footer {
width: 665px;
margin: 20px 0 0 210px;
text-align: center;
/* float: left;*/
clear: both;
}

#massart_footer p {
/* width: 895px;*/
/* margin: 0 0 0 200px;*/
}

/* =========================== */
/* = LEFT COLUMN BEGINS HERE = */
/* =========================== */
#leftColumn {
background: url('images/inset_bg.jpg') repeat-x scroll top left;
width: 210px;
/* height: 400px;*/
text-align: center;
float: left;
display: inline; /*fixes IE Doubled Float-Margin Bug*/
/*IE GIVES ME GRIEF*/
}

/*==News Inset Begins Here==*/
#news_inset {
background: url('images/inset_left_bg.jpg') repeat-y scroll top left;
width: 125px;
margin: 0;
padding: 0;
}

#news_top {
background: url('images/news_top.jpg') no-repeat scroll top left;
width: 125px;
height: 30px;
}

#news_body {
background: url('images/news_bg.jpg') no-repeat scroll top left;
width: 125px;
/* height: 250px;*/
/* overflow: hidden;*/
}

#news_content {
width: 115px;
margin: 0 0 0 5px;
}

#more_button {
text-align: center;
width: 125px;
margin: 5px 0 0 0;
}

#more_button img {
margin: 0 auto;
}

#news_bottom {
background: url('images/inset_left_bottom.jpg') no-repeat scroll top left;
width: 125px;
height: 5px;
}

/*==Affiliation logos==*/
#massart_affiliations {
background: url('images/affiliations.jpg') no-repeat scroll top left;
width: 610px;
height: 70px;
margin: 10px 0 0 22px;
}

/*==Auction Alerts Signup==*/
#inset_join {
width: 180px;
/* height: 300px;*/
margin: 10px auto 0 auto;
text-align: center;
}

#inset_join form {
display: inline; /*This fixes the IE Extra Form Margin bug*/
/* IE gives me grief*/
margin: 0;
padding: 0;
}

#join_top {
background: url('images/join_top.jpg') no-repeat scroll top left;
width: 180px;
height: 85px;
}

#join_body {
width: 180px;
margin: 0;
text-align: left;
padding: 10px 0 10px 10px;
}

#join_bottom {
background: url('images/inset_right_bottom.jpg') no-repeat scroll bottom left;
width: 180px;
height: 25px;
/* margin: 10px 0 0 10px;*/
text-align: center;
}

/*==Auction Scroller Begins==*/
#auction_inset {
width: 180px;
height: 280px;
margin: 15px auto 0 auto;
padding: 0;
text-align: center;
}

#auction_top {
background: url('images/scroller_top.jpg') no-repeat scroll top right;
width: 180px;
height: 30px;
text-align: center;
}

#auction_body {
background: url('images/scroller_bg.jpg') repeat-y scroll top left;
width: 180px;
height: 200px;
margin: 0 auto;
text-align: center;
}

#auction_bottom {
margin: 0 auto;
text-align: center;
}

#auction_bottom img {
margin: 0 auto 0 auto;
}

.auctionlist {
/* width: 625px;*/
}

/*This keeps the gallery working properly in FireFox*/
table #container img {
display: inline;
}

/*Auction scroller photo background*/
table .listAuctionPic {
background: transparent none;
border: 0px none transparent;
}

/*Fixes scroller photo in FireFox*/
a.menulisting .listAuctionPic img {
display: inline;
background: transparent none;
border: 0px none transparent;
}

/* =================== */
/* = NAVIGATION MENU = */
/* =================== */
/*Navigation*/
#massart_nav {
background: url('images/nav_bg.jpg') repeat-x scroll top left;
width: 685px;
height: 45px;
margin-bottom: 10px;
text-align: left;
float: left;
z-index: 500;
}

#massart_nav img {
display: inline;
margin: 0 !important;
margin: 0 -3px; /*Fixes IE 3px bug for floated images*/
/*IE GIVES ME GRIEF*/
padding: 0;
float: left;
}

/*Staff Page*/
div.staff {
padding-top: 10px;
clear: left;
border-top: 1px solid #999;
}

div.staff p.staff {
font-size: 1.5em;
font-weight: bold;
}

.staff img {
float: left;
margin-right: 20px;
}

tr.stripe {
background-color: #FBE49B;
}

/********* helpers *********/
.floatRight { float: right; }
.floatLeft { float: left; }
img.floatRight { float: right; margin-left: 1em;}
img.floatLeft { float: left; margin-right: 1em;}
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }
.clear, .clearme { clear: both; }
.block { display: block; }
.divider { height: 1px; margin: 1em 0; border-top: 1px solid #CCC;}

Typography CSS:
/*===========================
011E36 = blue (background)
394F90 = blue (nav)
2B4284 = blue (text)
379028 = green
===========================*/

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 62.8%;
color: #333;
}

table,
td p {
font-size: 13px;
line-height: 1.2em;
padding: 2px 0 0 0;
margin: 0 0 2px 0;
text-align: left;
}

p {
font-size: 1.3em;
line-height: 1.5em;
padding: 0 0 1em 0;
margin: 0;
}

/*Fixes problem with images at bottom of _detail pages*/
#massart_content table div p img {
display: inline;
}

#massart_content table div p {
/* text-align: center;*/
}

#massart_content p {
text-align: left;
}

#massart_content td p {
text-align: left;
}

h1, td h1,h2,h3,h4,h5,h6 {
color: #2B4284;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
}

h1, td h1 {
font-size: 2.6em;
}
h2, td h2 {
font-size: 2.4em;
}

h3, td h3 {
color: #2B4284;
font-size: 2.2em;
line-height: 1.2em;
margin: 1em 0 0 0;
text-transform: uppercase;
/* border-bottom: 1px solid #908044;*/
}

h4, td h4 {
color: #6A3306;
font-size: 1.8em;
padding: 5px 0;
margin: 1em 0 5px 0;
border-top: 1px solid #6A3306;
border-bottom: 1px solid #6A3306;
}

h5, td h5 {
color: #394F90;
font-size: 1.6em;
/* border-bottom: 1px solid #908044;*/
/* width: 80%; */
margin-top: 1.2em;
}

h3.group {
margin-bottom: .2em;
}

h4.group {
margin-bottom: 1em;
}

h5.indent {
margin-left: 1em;
padding-left: 0;
}

h6, td h6 {
color: #666666;
font-size: 1.3em;
text-transform: uppercase;
margin-top: 1.2em;
}

p.hSubtext {
font-size: 1.2em;
margin: 0 0 1em 0;
line-height: 1.2em;
}

ul, ol {
font-size: 1.3em;
line-height: 1.3em;
text-align: left;
font-weight: bold;
}

ul {
/* list-style: disc outside;*/
}

table ul li {
font-size: 13px;
line-height: 18px;
}

ul.smallList {
font-size: 1.1em;
line-height: 1.1em;
text-align: left;
/* font-weight: bold; */
/* margin-right: 20%; */
}

li.smallList {
padding-bottom: .5em;
}

ul.bigList {
color: #2B4284;
font-family: Trebuchet, "Trebuchet MS", Verdana, Arial, sans-serif ;
font-size: 14px;
font-style: italic;
font-weight: normal;
/* width: 600px;*/
margin: 1em 1em 1em 1em;
padding-top: 1em;
padding-bottom: 1em;
}

ul.bigList li {
margin: 0 0 0 1.5em;
padding-top: 0;
padding-bottom: 0;
line-height: 1.2em;
}

.backtotop_sm {
font-size: 11px;
color: #1B5D99;
padding-left:10px;
}

.backtotop_sm a,
.backtotop_sm a:link,
.backtotop_sm a:visited,
.backtotop_sm a:hover,
.backtotop_sm a:active {
color: #1B5D99;
}

/* SERVICES PAGE */

#sectionhead {
font-size: 1.3em;
color: #333;
font-weight: bold;
/* padding-bottom: .5em; */
}

/*
blockquote {
font-size: 1.3em;
padding: 20px;
margin: 1em 0;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
color: #908044;
}
*/

/* ================== */
/* = Sitewide links = */
/* ================== */
a,
a:link,
a:visited,
a:hover,
a:active {
color: #369;
text-decoration: none;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}

a:visited {
color: #69C;

}

a:hover {
color: #5E1612;
text-decoration: none;
}

/* ==================== */
/* = Navigation Links = */
/* ==================== */

#contact_top {
color: #E7E7E7;
font-weight: normal;
position: absolute;
top: 163px;
left: 33px;
}

#contact_top p {
font-size: 12px;
}

#contact_top a:link,
#contact_top a:visited,
#contact_top a:hover,
#contact_top a:active {
color: #9EBF90;
}

#contact_top a:hover {
color: white;
}

.contact1 {
color: #01AD4E;
font-weight: bold;
}

/*Join our Email List inset*/
#signup {
margin: 0;
padding: 0;
font-size:9px;
font-weight:bold;
text-transform: capitalize;
/* text-align: left;*/
}

#signup p {
color: #FFF;
padding: 0;
margin: 0 0 7px 10px;
line-height: .9em;
/* float: left;*/
}

.email {
text-align: center;
}

#massart_footer p {
font-size: 12px;
line-height: 1.3em;
color: #FFC;
padding: 5px 0;
text-align: center;
}

#massart_footer a,
#massart_footer a:link,
#massart_footer a:visited,
#massart_footer a:hover,
#massart_footer a:active {
color: #FFF; /*030*/
text-decoration: none;
/* font-weight: bold;*/
}

#massart_footer a:hover {
text-decoration: underline;
/* color: #FC3;*/
}

.required {
color : #ff0000;
font-weight : bold;
}

.subhead {
font-weight: bold;
color: #908044;
}

/* ===================================== */
/* = Typography for Insets begins here = */
/* ===================================== */

/*News Inset*/
#news_inset #news_body {
text-align: left;
}

#news_inset #news_content p {
font-size: 1em;
line-height: 1.2em;
}

#news_inset .newsBriefs {
color: #999;
font-size: 1em;
}

#news_inset #news_body .newsBreak {
width:98%;
height:1px;
border-bottom:1px dashed #9FA6B4;
text-align:center;
line-height: 1em;
}

.dashed {
/* width:90%;
height:1px;
border-bottom: 1px dashed #999;
text-align:center;*/
}

#news_inset #news_body a,
#news_inset #news_body a:link,
#news_inset #news_body a:visited,
#news_inset #news_body a:hover,
#news_inset #news_body a:active {
color: #919E79;
text-decoration: none;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

#news_inset #news_body a:visited {
color: #919E79;

}

#news_inset #news_body a:hover {
color: #6A3306;
text-decoration: underline;
}

/*News-List*/
.article_count {
font-size: 10px;
color: #666;
text-align:left;
}

.news_date {
text-align: left;
font-size: 10px;
color: #999;
margin: 0 0 2px 0;
}

.news_title {
text-align: left;
font-size: 1.1em;
font-weight:bold;
color: #039;
margin-top: 0;
}

.news_summary {
text-align: left;
font-size: 12px;
color: #333;
margin-top: 0;
}
.newsQuote {
font-size: 1em;
color: #666;
/* text-align: justify;*/
border: 0 none transparent;
padding: 1em 0 .5em 2em;
margin: 0 0 1em 0;
}

.news_break {
height: 2em;
border-bottom: 1px solid #CCC;
}

.news_id {
font-size: .8em;
}

a.news_url, .news_title a,
a.news_url:link, .news_title a:link,
a.news_url:visited, .news_title a:visited,
a.news_url:hover, .news_title a:hover,
a.news_url:active, .news_title a:hover {
color: #023E0E;
font-weight: bold;
text-align: right;
}

a.news_url:hover, .news_title a:hover {
/* text-decoration: underline;*/
color: #908044;
}

a.news_id,
a.news_id:link,
a.news_id:visited,
a.news_id:hover,
a.news_id:active {
color: #023E0E;
font-weight: bold;
text-align: right;
}

a.news_id:hover {
text-decoration: underline;
color: #908044;
}

.call_us {
font-size: 1.7em;
font-weight: bold;
}

.phone_large {
font-size: 2.2em;
font-weight: bold;
}

#massart_content p.links {
/* background-color: #FCE8D9;*/
color: #33CC00;
text-align: center;
line-height: 2em;
padding: 0;
margin: 0 0 2em 0;
border-top: 1px solid #33CC00;
border-bottom: 1px solid #33CC00;
}

#massart_content p.links a {
padding: 0 .5em;
}

#massart_content p.top {
background: url('images/top_arrow.jpg') no-repeat scroll 0px 7px;
color: #CCC;
text-align: left;
line-height: 2em;
padding: 0 0 0 15px;
margin: 0 0 2em 0;
border-top: 1px solid #6A3306;
border-bottom: 1px solid #6A3306;
}

#massart_content p.top a,
#massart_content p.top a:link,
#massart_content p.top a:visited,
#massart_content p.top a:hover,
#massart_content p.top a:active {
color: #6A3306;
text-decoration: none;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

#massart_content p.top a:hover {
color: #6A3306;
text-decoration: underline;
}

/* =========================== */
/* = Auction Scroller Styles = */
/* =========================== */

/*Auction scroller link color*/
#auction_body a.menulisting {
color: #FBE49B;
font-size: 12px;
}

.slidetext {
color: #FFF;
font-size: 10px;
}

/*misc*/
#massart_content p.emphasis {
background-color: #86805F;
font-size: 1.6em;
line-height: 1.3em;
font-weight: bold;
text-align: center;
color: #FFE87A;
padding: .5em;
margin: 1em auto 1em auto;
}

#massart_content p.slogan {
font-size: 1.4em;
text-align: center;
font-weight: bold;
margin: 0;
padding: 1em 0;
border-top: 1px solid #6A3306;
border-bottom: 1px solid #6A3306;
}

body#home #massart_content p em {
color: #6A3306;
font-weight: bold;
font-style: normal;
}

body#home #massart_content p em.large {
font-size: 1.5em;
}

Dropdown Menu Navigation code:
/*HORIZONTAL CSS NAVIGATION WITH FLY-OUT SUBMENUES*/

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 685px; /*For KHTML*/
list-style: none;
height: 45px;
z-index: 10;
}

ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 35px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 40px; /*This is the offset of the secondary from the root nav*/
left: 0;
z-index: 500;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
z-index: 500;
}

/* Root Menu */
ul#navmenu a {
/*background*/: url('images/nav_divider.jpg') no-repeat scroll top right;
/* border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;*/
padding: 0;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
color: #FBE49B;
font: bold 12px/35px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a { /*This has a positioning problem in IE*/
float: none;
background: #2B4284;
color: #FBE49B;
font: bold 11px/35px Verdana, Arial, Helvetica, sans-serif;
padding: 0 6px;
z-index: 500;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #FBE49B;
color: #6A3306;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

(1) Why should doctype

(1) Why should doctype affect javascript?

(2) The bottom menu item "Auction House Facility" requires more space than the width provided. IE6 being IE6 simply ignores your width and works out its own - which is wider.

(3) z-index isn't an absolute thing. Its relative. 1 and 2 are just as good as 5 and 500. For IE the z-index needs to be applied at a level where the elements are siblings, that means at #massart_nav & #content_nav.

(4) HTML source is available from your browser, View Source, Select All, Copy Wink

monstordh
Offline
Regular
Central Arkansas
Last seen: 13 years 43 weeks ago
Central Arkansas
Joined: 2008-03-05
Posts: 24
Points: 0

First... THANKS! for taking

First... THANKS! for taking the time to respond so quickly.

Chris..S wrote:
(1) Why should doctype affect javascript?

No clue. The auction scroller on the left explodes in Safari with a doctype for some reason.

Chris..S wrote:
(2) The bottom menu item "Auction House Facility" requires more space than the width provided. IE6 being IE6 simply ignores your width and works out its own - which is wider.

Not on any of the browsers/systems I've viewed it on (including IE6/PC), but I can easily expand this. It should not be part of the problem.

Chris..S wrote:
(3) z-index isn't an absolute thing. Its relative. 1 and 2 are just as good as 5 and 500. For IE the z-index needs to be applied at a level where the elements are siblings, that means at #massart_nav & #content_nav.

I'm not sure I'm following you on this. Can you elaborate, pls? (specifically - I don't have a #content_nav in the page)

Chris..S wrote:
(4) HTML source is available from your browser, View Source, Select All, Copy Wink

DUH! Thanks Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

(2) Sorry, I should have

(2) Sorry, I should have looked closer. Its the same problem as (3). The z-index is on the open submenu element which isn't a sibling of the later element it needs to appear in front of.

(3) Hmm. #content_wrapper (you should have been able to work that out Wink). The rest of the answer holds. IE needs the z-index set on siblings. The long explanation, IE creates a new stacking context for the children of any element with position:relative - which is incorrect according to the standard. Other browsers don't create a new stacking content for an element with position:relative and no z-index. Z-index values only have effect within a single stacking context. So in IE, the z-index values on elements that are children of an element with position:relative have no affect on their stacking relative to other elements that are not children of that same element.

For your menu (2), don't have the position:relative on ul#navmenu li but on ul#navmenu li:hover.

monstordh
Offline
Regular
Central Arkansas
Last seen: 13 years 43 weeks ago
Central Arkansas
Joined: 2008-03-05
Posts: 24
Points: 0

Thanks. I understand the

Thanks. I understand the concept (3), but how do I practically implement it? I tried turning position:relative off for #content, but it didn't affect anything (and I'm really not sure why they used that anyway). Can you help?

monstordh
Offline
Regular
Central Arkansas
Last seen: 13 years 43 weeks ago
Central Arkansas
Joined: 2008-03-05
Posts: 24
Points: 0

FYI - i removed

FYI - i removed position:relative from ul#navmenu li and put it on ul#navmenu li:hover and the dropdown menu moved completely over to the left edge of the browser window... Shock

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

#massart_nav {

#massart_nav { position:relative; z-index: 2; }
#content_wrapper { position:relative; z-index: 1; }

As I recall, "ul#navmenu li" had position:relative. If you remove that and change it to ul#navmenu li:hover (or whatever mechanism you are using to show the dropdown menu). The later sibling LI elements won't be positioned, so won't appear in front of the positioned open submenu.

monstordh
Offline
Regular
Central Arkansas
Last seen: 13 years 43 weeks ago
Central Arkansas
Joined: 2008-03-05
Posts: 24
Points: 0

the nav flowing beneath the

the nav flowing beneath the #auctionTitle text is fixed. i'm still having issues with the sibling li elements within the nav. can you help me more with that, please?

Suzy
Suzy's picture
Offline
Regular
Last seen: 14 years 42 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

monstordh wrote:FYI - i

monstordh wrote:
FYI - i removed position:relative from ul#navmenu li and put it on ul#navmenu li:hover and the dropdown menu moved completely over to the left edge of the browser window... Shock

it shouldn't, as the positioned child ul's (drops) will still be positioned to that parent li but only when it's hovered on, and as that's the only time it needs positioned it should be OK?

however you could try adding a z-index (1 will do) to the li:hover, am not convinced of this yet as IE has laws unto itself when stacking/haslayout is concerned

just taking a proper look now and will get back in a bit.. meanwhile try it.. why oh why doesn't IE have a web dev toolbar Wink

Suzy

monstordh
Offline
Regular
Central Arkansas
Last seen: 13 years 43 weeks ago
Central Arkansas
Joined: 2008-03-05
Posts: 24
Points: 0

Suzy wrote:monstordh

Suzy wrote:
monstordh wrote:
FYI - i removed position:relative from ul#navmenu li and put it on ul#navmenu li:hover and the dropdown menu moved completely over to the left edge of the browser window... Shock

it shouldn't, as the positioned child ul's (drops) will still be positioned to that parent li but only when it's hovered on, and as that's the only time it needs positioned it should be OK?

however you could try adding a z-index (1 will do) to the li:hover, am not convinced of this yet as IE has laws unto itself when stacking/haslayout is concerned

just taking a proper look now and will get back in a bit.. meanwhile try it.. why oh why doesn't IE have a web dev toolbar Wink

whether it should or shouldn't isn't the point. it did what it did, because IE has a mind of its own. (IE finally does have a dev toolbar, but it's not very good). let's get away from this issue. i don't have any problems with this part of the nav anymore. please review the visual:

http://www.massartauctioneers.com/test/index.php

the problem that persists is that there appears to be a "half" gap between the root level LI and the second level UL/LI due to the image contained within the sibling root level LI being above the secondary level UL. I hope I'm explaining this right. Can anyone help me on this issue, please?

Suzy
Suzy's picture
Offline
Regular
Last seen: 14 years 42 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

Quote:whether it should or

Quote:
whether it should or shouldn't isn't the point. it did what it did, because IE has a mind of its own. (IE finally does have a dev toolbar, but it's not very good). let's get away from this issue.

I did work it out but dismissing me (or anyone trying to help) like this, not appreciated Sad
your desperation to meet your deadline is obvious.. which is why I thought I might try, I came back to post some solutions which might've helped, then I saw your reply..

>> dev toolbar
was a 'joke' meaning I couldn't test live and had to take the unpaid time to set the code up in my editor the same way you have it! (yes it's working in isolation)

the only reason I put a reply in 'too early' was to let you know I was even looking at it, I won't next time.. the whether it "should or shouldn't" not being the point .. is exactly the point if you want it fixed rather than patched.. (like I said it's working in isolation) - I know how it should work, I also know IE (and respected that you also knew), and was trying that

sorry, and good luck hope you get it sorted

Suzy

monstordh
Offline
Regular
Central Arkansas
Last seen: 13 years 43 weeks ago
Central Arkansas
Joined: 2008-03-05
Posts: 24
Points: 0

Suzy wrote:Quote:whether it

Suzy wrote:
Quote:
whether it should or shouldn't isn't the point. it did what it did, because IE has a mind of its own. (IE finally does have a dev toolbar, but it's not very good). let's get away from this issue.

I did work it out but dismissing me (or anyone trying to help) like this, not appreciated Sad
your desperation to meet your deadline is obvious.. which is why I thought I might try, I came back to post some solutions which might've helped, then I saw your reply..

>> dev toolbar
was a 'joke' meaning I couldn't test live and had to take the unpaid time to set the code up in my editor the same way you have it! (yes it's working in isolation)

the only reason I put a reply in 'too early' was to let you know I was even looking at it, I won't next time.. the whether it "should or shouldn't" not being the point .. is exactly the point if you want it fixed rather than patched.. (like I said it's working in isolation) - I know how it should work, I also know IE (and respected that you also knew), and was trying that

sorry, and good luck hope you get it sorted

WOW... Suzy - I'm really sorry you took my comments the wrong way. I've had internet problems all afternoon and was posting for brevity, hoping that I wouldn't get disconnected before I hit the post button. I apologize that I sounded rude and ungrateful. I'm not. I was just short on time. Please forgive me.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Chris..S wrote:#massart_nav

Chris..S wrote:
#massart_nav { position:relative; z-index: 2; }
#content_wrapper { position:relative; z-index: 1; }

As I recall, "ul#navmenu li" had position:relative. If you remove that and change it to ul#navmenu li:hover (or whatever mechanism you are using to show the dropdown menu). The later sibling LI elements won't be positioned, so won't appear in front of the positioned open submenu.

This works. My guess is you didn't include the ie6 class in the style rule. See http://wiki.jalakai.co.uk/tester497.html. View the source and look for the STYLE element, that is the only change from your original page. The position:static is because I have to override the rule in your stylesheet, its the equivalent of removing position:relative from the rule in the navmenu.css.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Suzy wrote:

Suzy wrote:

however you could try adding a z-index (1 will do) to the li:hover, am not convinced of this yet as IE has laws unto itself when stacking/haslayout is concerned

Not really. It just creates new stacking contexts way too easily. As I mentioned in my earlier post, the simple rule for IE is always apply z-index to siblings. Its actually a little more complex than that, but that simple rule will take care of 95% of IE stacking issues.

Rule 2 (which is really rule Innocent is minimize the use of position:relative. Like in the menu, not having position on the non-active menu items is a better solution than messing with z-index.

The more complex version of the sibling rule, is it doesn't need to be siblings as long as there is no intervening position:relative.

Suzy
Suzy's picture
Offline
Regular
Last seen: 14 years 42 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

Hi Chris..

Chris..S wrote:
Suzy wrote:

however you could try adding a z-index (1 will do) to the li:hover, am not convinced of this yet as IE has laws unto itself when stacking/haslayout is concerned

Not really. It just creates new stacking contexts way too easily. As I mentioned in my earlier post, the simple rule for IE is always apply z-index to siblings. Its actually a little more complex than that, but that simple rule will take care of 95% of IE stacking issues.

Rule 2 (which is really rule Innocent is minimize the use of position:relative. Like in the menu, not having position on the non-active menu items is a better solution than messing with z-index.

The more complex version of the sibling rule, is it doesn't need to be siblings as long as there is no intervening position:relative.

Yes Chris, I do know it more complex too Wink, (the question mark after the 'it should work' was puzzlement as to why your solution didn't work, it should have as you've pointed out now Smile ) - the z-index was just a 'try this as I know you're in hurry' thing - in my experience that new stacking context on the hovered li is very often enough to bring the child drops over the top of the parents sibling, (in fact I always build it in for IE whether it's needed or not now as it's been so useful, specially in vertical menus) - but as I said in my post I wasn't convinced it work here as I had feeling I was about to go look at code that was full of pos:rel 'fixes' already built in because of Quirks mode! Wink.. I just needed some time to go look at the code to see what the variables all were ..once I did the first thing I did was to fix the immediate problem, same as you, but then I also recoded the menu using less of the IE workarounds in the first place - the simple rule of applying z-indexes to parents / siblings is not simple it just takes IE's problems further up the tree, IMHO of course, to mi mind it's just unnecessary additions (or patches) - which might only cause further complications down the line or if the page ever went to strict mode?

I didn't even look at the other two sheets as I've not seen an IE drop menu yet that needs to rely on it's parent/or wrapper z-indexes to work Wink I try to fix them right their in their own code, but I guess we just have different IE "rules of thumb" which is not surprising as we shouldn't need any heh!

but actually I did find (or cause?) something else, which might or might not happen in monsterdh's code with the z-index fix - it could be something I did during my isolation recode Shock ..

monsterdh, (forgiven!.. though next time you're in a hurry to read the question marks or to post before connection dropping simply acknowledge the "attempt" whether it works or not, until you get more time to explain/try solutions maybe?), if you find that your menu (in IE6) when it drops down over actual text does not hold its hovers (not saying you will but..) then I also came across the same thing.. can't remember how or why like I said but do ask if you need to

and also I have a condensed navmenu.css if you would like it, there are a lot of unnecessary "fixes" in yours which might cause problems in the future, but perhaps that's not your responsibility once you pass off the job?

cheers

Suzy

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Suzy wrote:in my experience

Suzy wrote:
in my experience that new stacking context on the hovered li is very often enough to bring the child drops over the top of the parents sibling, (in fact I always build it in for IE whether it's needed or not now as it's been so useful, specially in vertical menus)

Yeah. This is the ideal method, positioned elements will always appear in front of non-positioned elements in the same stacking context. Keeping the number of positioned elements to an absolute minimum, means the singled positioned active menu must appear above everything else, which works across all browsers.

Suzy wrote:
the simple rule of applying z-indexes to parents / siblings is not simple it just takes IE's problems further up the tree, IMHO of course, to mi mind it's just unnecessary additions (or patches) - which might only cause further complications down the line or if the page ever went to strict mode?

I'm not sure what you mean here. If there are positioned elements within reach of the drop down menu, there is no choice. The nice thing about IE6 creation of new stacking contexts on a position:relative is its simple enough (though usually not necessary) to duplicate the behaviour on other browsers (add z-index: Innocent. Getting identical x-browser behaviour is half the battle. Smile

monstordh
Offline
Regular
Central Arkansas
Last seen: 13 years 43 weeks ago
Central Arkansas
Joined: 2008-03-05
Posts: 24
Points: 0

You guys are the best

Chris & Suzy - You guys (er... guy and gal) are the best! This is the first opportunity I have had to get back on this. Your wisdom (and patience!) has been sooooo appreciated. You really helped me out, and I am very grateful.

I haven't had time to digest the "how" of things quite yet. So, I was wondering if either of you would mind if I "walk through" learning about this relative positioning thing with you at some point in the future. I really want to fully understand the principles behind this. I'll start, of course, with what you have already shared. Just making sure you wouldn't mind if I picked your brain in the future...

Thanks again. Many blessings to the both of you!

ps. if you would like to see, the site has gone live here: http://www.massartauctioneers.com/