Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Yet another fly-out list problem

    I am re-writing the code for my company's website, and just when I thought I had everything working right, IE7 bites me in the behind again. On one section of pages (industry applications), the text I have on the main page shows through the part of my main navigation that flys out when you hover over its "parent." You can still see the text and the bullet on the list (See picture below). It works fine in FF, Opera, and even in IE6 (thanks to csshover.htc!).

    Here's the html:

    Code:
    <div id="menuv-container">
    				<div id="menuv">
    				<!-- Home -->
    					<ul>
    						<li><a href="../index.html" class="parent">Home</a>
    							<ul>
    								<li><a href="../index.html">Porous Materials, Inc Home</a></li>
    								<li><a href="http://www.app.bz">Advanced Pressure Products Home</a></li>
    							</ul>
    						</li>
    					</ul>
    				<!-- End Home -->
    				<!-- About PMI -->
    					<ul>
    						<li><a href="../company/index.html" class="parent">About Us</a>
    							<ul>
    								<li><a href="../company/index.html">About PMI</a></li>
    								<li><a href="../employment/index.html">Employment</a></li>
    							</ul>
    						</li>
    					</ul>
    				<!-- End About PMI -->
    				<!-- Products -->
    					<ul>
    						<li><a href="../products/index.html" class="parent">Products</a>
    							<ul>
    								<li><a href="../products/index.html" class="parent">PMI Products</a>
    									<ul>
    										<li><a href="../products/porometers.html" title="PMI Porometers">Porometers</a></li>
    										<li><a href="../products/permeameters.html" title="PMI Permeameters">Permeameters</a></li>
    										<li><a href="../products/porosimeters.html" title="PMI Porosimeters">Porosimeters</a></li>
    										<li><a href="../products/bet_sorptometers.html" title="PMI Sorptometers">BET/Sorptometers</a></li>
    										<li><a href="../products/pycnometers.html" title="PMI Pycnometers">Pycnometers</a></li>
    									</ul>
    								</li>
    								<li><a href="../products/pore_size.html" title="Test Pore Size of your sample">Pore Size</a></li>
    								<li><a href="../products/pore_volume.html" title="Test Pore Volume of your sample">Pore Volume</a></li>
    								<li><a href="../products/permeability.html" title="Test Permeability of you sample">Permeability</a></li>
    								<li><a href="../products/density.html" title="Test Density of your sample">Density</a></li>
    								<li><a href="../products/surface_area.html" title="Test the Surface Area of your sample">Surface Area</a></li>
    								<li><a href="../products/adsorption.html" title="Test Adsorption of your sample">Adsorption</a></li>
    							</ul>
    						</li>
    					</ul>
    				<!-- End Products -->
    				<!-- Testing Services -->
    					<ul>
    						<li><a href="../testing/index.html" class="parent">Testing Services</a>
    							<ul>
    								<li><a href="../testing/index.html">PMI Testing Services</a></li>
    								<li><a href="../testing/docs/testing_price_list_4_12_05.pdf">Testing Price List</a></li>
    								<li><a href="../testing/docs/testing_request_form_4_12_05.pdf">Testing Request Form</a></li>
    							</ul>
    						</li>
    					</ul>
    				<!-- End Testing Services -->
    				<!-- Begin Applications Nav -->
    					<ul>
    						<li><a href="index.html" class="parent">Applications</a>
    							<ul>
    								<li><a href="index.html">Industry Applications</a></li>
    								<li><a href="automotive.html">Automotive</a></li>
    								<li><a href="battery_Separator.html">Battery Separator</a></li>
    								<li><a href="biotechnology_healthcare.html">Biotechnology &amp; Healthcare</a></li>
    								<li><a href="ceramics.html">Ceramics</a></li>
    								<li><a href="chemicals.html">Chemicals</a></li>
    								<li><a href="filtration.html">Filtration</a></li>
    								<li><a href="food_beverage.html">Food &amp; Beverage</a></li>
    								<li><a href="fuel_cells.html">Fuel Cells</a></li>
    								<li><a href="geotextiles.html">Geotextiles</a></li>
    								<li><a href="household_personal_hygiene.html">Household &amp; Personal Hygiene</a></li>
    								<li><a href="nonwovens.html">Nonwovens</a></li>
    								<li><a href="paper.html">Paper</a></li>
    								<li><a href="pharmaceuticals.html">Pharmaceuticals</a></li>
    								<li><a href="powder_metallurgy.html">Powder Metallurgy</a></li>
    								<li><a href="textiles.html">Textiles</a></li>
    							</ul>
    						</li>
    					</ul>
    				<!-- End Applications Nav -->
    				<!-- Publications -->
    					<ul>
    						<li><a href="../publications/index.html" class="parent">Publications</a>
    							<ul>
    								<li><a href="../publications/index.html">Technical Papers</a></li>
    								<li><a href="../publications/index.html#recent">Recent Publications</a></li>
    								<li><a href="../publications/index.html#review">Review Papers</a></li>
    								<li><a href="../publications/index.html#biotech">Biotechnology &amp; Pharmaceutical</a></li>
    								<li><a href="../publications/index.html#ceramic">Ceramic</a></li>
    								<li><a href="../publications/index.html#filtration">Filtration</a></li>
    								<li><a href="../publications/index.html#fuel">Fuel Cells</a></li>
    								<li><a href="../publications/index.html#nonwovens">Nonwovens</a></li>
    								<li><a href="../publications/index.html#textiles">Textiles</a></li>
    								<li><a href="../publications/index.html#paper">Paper &amp; Packaging</a></li>
    								<li><a href="../publications/index.html#brochures">Selected Technical Brochures</a></li>
    							</ul>
    						</li>
    					</ul>
    				<!-- End Publications -->
    				<!-- Begin News/Conferences Nav -->
    					<ul>
    						<li><a href="../news/index.html" class="parent">News/Conferences</a>
    							<ul>
    								<li><a href="../news/index.html">PMI News</a></li>
    								<li><a href="../conferences/index.html">Conferences/Shows</a></li>
    								<li><a href="../calendar.html" target="_blank">Calendar of Events</a></li>
    							</ul>
    						</li>
    					</ul>
    				<!-- End News/Conferences Nav -->
    				<!-- Begin Tech Support Nav -->
    					<ul>
    						<li><a href="../support/index.html" class="parent">Tech Support</a>
    							<ul>
    								<li><a href="../support/index.html">PMI Tech Support</a></li>
    								<li><a href="../support/service_request_form.html">Service Request Form</a></li>
    								<li><a href="../support/product_support_form.html">Product Support Form</a></li>
    								<li><a href="../support/test_support_form.html">Testing Services Form</a></li>
    							</ul>
    						</li>
    					</ul>
    				<!-- End Tech Support Nav -->
    				<!-- Begin Contact Us Nav -->
    					<ul>
    						<li><a href="../contact/index.html" class="parent">Contact</a>
    							<ul>
    								<li><a href="../contact/index.html">Contact PMI</a></li>
    								<li><a href="../distributors/index.html">Distributors</a></li>
    								<li><a href="../contact/index.html#directions">Directions</a></li>
    							</ul>
    						</li>
    					</ul>
    				<!-- End Contact Us Nav -->
    				</div>
    			</div>
    On page text html:

    Code:
    <div id="dual">
    					<div id="dual2">
    						<ul>
    							<li class="read"><a href="geotextiles.html">Geotextiles</a></li>
    							<li class="read"><a href="household_personal_hygiene.html">Households & Personal Hygiene</a></li>
    							<li class="read"><a href="non_wovens.html">Nonwovens</a></li>
    							<li class="read"><a href="paper.html">Paper</a></li>
    							<li class="read"><a href="pharmaceutical.html">Pharmeceuticals</a></li>
    							<li class="read"><a href="powder_metallurgy.html">Powder Metallurgy</a></li>
    							<li class="read"><a href="textiles.html">Textiles</a></li>
    						</ul>
    					</div>
    					<div id="dual1">
    						<ul>
    							<li class="read"><a href="automotive.html">Automotive</a></li>
    							<li class="read"><a href="battery_separator.html">Battery & Battery Separators</a></li>
    							<li class="read"><a href="biotechnology_healthcare.html">Biotechnology & Healthcare</a></li>
    							<li class="read"><a href="ceramic.html">Ceramics</a></li>
    							<li class="read"><a href="chemical.html">Chemicals</a></li>
    							<li class="read"><a href="filtration.html">Filtration Media & Membranes</a></li>
    							<li class="read"><a href="food_beverage.html">Food & Beverage</a></li>
    							<li class="read"><a href="fuel_cells.html">Fuel Cells</a></li>
    						</ul>
    					</div>
    				Is your field missing?<br /><br />
    				Call <strong>1-800-TALK-PMI</strong> so we can discuss a custom solution for you.
    		  </div>
    And here's the CSS:

    Code:
    #dual {
    	padding: 5px 15px 15px 15px;
    	z-index: 1;
    }
    #dual p {
    	padding: 10px;
    	z-index: 1;
    }
    #dual1 {
    	padding: 0px;
    	width: 48%;
    	height: inherit;
    	z-index: 1;
    }
    #dual2 {
    	padding: 0px;
    	width: 48%;
    	height: inherit;
    	z-index: 1;
    }
    #dual ol {
    	list-style: none;
    	z-index: 1;
    }
    #dual ul li {
    	list-style: disc;
    	z-index: 1;
    }
    #dual h1, #dual h2, #dual h3, #dual h4, #dual h5, #dual h6 {
    	display: inline;
    	z-index: 1;
    }
    #dual img {
    	float: left;
    	padding: 10px 25px 0px 0px;
    	z-index: 1;
    }
    /*--Begin Main Navigation CSS--*/
    /* Fix IE. Hide from IE Mac \*/
    * html #menuv ul li{float:left;height:1%;}
    * html #menuv ul li a{height:1%;}
    /* End */
    #menuv-container {
    	max-height: 189px;
    }
    #menuv		/* position, size, and font of  menu */
    	{
    	position: absolute;
    	z-index: 10;
    	width: 131px;
    	text-align: left;
    	font: 12px Arial, Helvetica, sans-serif;
    	top: 0px;
    	left: 0px;
    	overflow: visible;
    }
    #menuv a
    	{
    	width: 100%;
    	display: block;
    	padding-top: 2px;
    	padding-bottom: 2px;
    	border-top: 1px solid Black;
    	border-right: 1px solid black;
    	border-bottom: 1px solid black;
    	padding-left: 3px;
    }
    #menuv a, #menuv a:visited, #menuv a.parent			/* all menus at rest */
    	{
    	color: white;
    	background-color: #3300FF;
    	text-decoration: none;
    }
    #menuv a:hover, #menuv a.parent:hover				/* all menus on mouse-over */
    	{
    	background: #99CCFF;
    	text-decoration: none;
    	color: Black; 
    	z-index: 2;
    	}
    #menuv li
    	{
    	list-style-type:none;		/* removes bullets*/
    	}
    #menuv ul li
    	{
    	position:relative;
    	}
    #menuv li ul
    	{
    	position: absolute;
    	top: 0;
    	left: 135px;				/* distance from left menu (this should be the same as width value in #menuv [1]) above */
    	display: none;
    	border-left: 1px solid black;
    	}
    div#menuv ul, #menuv ul ul, div#menuv ul ul ul
    	{
    	margin:0;				/* keeps the menu parts together */
    	padding:0;
    	width: 131px;			/* width of sub menus  (this should be the same as width value in #menuv [1]) above */
    	}
    
    div#menuv ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv ul li:hover ul ul ul
    	{
    	display: none;
    	}
    div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul li:hover ul
    	{
    	display: block;
    	}
    /*--End Main Navigation CSS--*/
    Attached Thumbnails Attached Thumbnails Yet another fly-out list problem-wrong_again.jpg  

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Is it possible that you can post a link to the page in question? I cannot reconstruct the page.

  • #3
    New Coder
    Join Date
    Mar 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by BigAl75 View Post
    I am re-writing the code for my company's website, and just when I thought I had everything working right, IE7 bites me in the behind again. On one section of pages (industry applications), the text I have on the main page shows through the part of my main navigation that flys out when you hover over its "parent." You can still see the text and the bullet on the list (See picture below). It works fine in FF, Opera, and even in IE6 (thanks to csshover.htc!)
    The problem is that in IE position: relative is enough to define a new stacking context. This is a bug that is still present in IE7. It is in violation with the CSS specification which requires that also an explicit z-index value is set.

    The affected element is #dual which hold the text that overlaps your menu in IE7. From your source:
    Code:
    #dual {
    	padding: 5px 15px 15px 15px;
    	position: relative; /* enough to define new stacking context in IE6 and IE7*/
    }
    The reason why there is not overlap in IE6 is not because of csshover.htc. This file only makes the hover function. Rather it is because you are feeding IE6 with a different style sheet where #dual for some reason is not being positioned.
    Code:
    #dual {
    	padding: 5px 15px 15px 15px;
    	position: static;
    }
    I didn't take a look at why you had relatively positioned #dual in one style sheet, but not the other. If the relative positioning is not needed for #dual, you may just leave it at position: static.

    In any case, to solve your problem, you can let #nav (which holds the menu) define a new stacking context and raise it above the rest of the page. Add the red part:
    Code:
    #nav {
    	width: 135px;
    	left: 10px;
    	position: relative;
    	border-left: 1px solid black;
    	z-index: 1;
    }

  • #5
    New Coder
    Join Date
    Mar 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. That fixed it, although I had to enter a higher number than 1. I thought it had something to do with that, but I was adding the z-index to the wrong sections of the css (ul, li, etc.).

    Thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •