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 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts

    css z index problem with drop down menu

    My site: http://www.beautybytara.co.uk/member...hip-signup.php

    has a problem in ie7 with the drop down menu. It gets cut off where the main content starts instead of going on top (as it does in FF). If I make the zindex of the content area -1 it works but then you cant click any of the links in the content area as they go behind.

    What difference in browsers is causing this problem?

    Do I need to rearrange my divs?

    Thanks.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    That's not the way to make a drop down list. There should be only <ul> as the parent of all list elements, so that we would get a better control over them in CSS.

    Have a look at http://htmldog.com/articles/suckerfish/dropdowns/
    PS: There are a number of markup errors, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    That's not the way to make a drop down list. There should be only <ul> as the parent of all list elements, so that we would get a better control over them in CSS.

    Have a look at http://htmldog.com/articles/suckerfish/dropdowns/
    PS: There are a number of markup errors, see http://validator.w3.org/check?uri=ht...Inline&group=0
    Thanks - so if I redo the dropdown list as you say will that stop it going behind the content?

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Ive redone the dropdown menu but I still cant get it to appear above the content in IE7. And also I cant get the drop down boxes to be equal widths.

    Here's the menu code (it has some PHP in it as some menu items only show when logged in):

    Code:
    <ul id="nav">
    	<li><a href="../index.php" class="top_parent">Home</a></li>
    
    	<li><a href="../treatments/index.php" class="top_parent">Treatments</a>
    		<ul>
    			<li><a href="../treatments/pamper-packages.php">Pamper Packages</a></li>
    			<li><a href="../treatments/waxing.php">Waxing</a></li>
    			<li><a href="../treatments/facials.php">Facials</a></li>
    			<li><a href="../treatments/swedish-massage.php">Swedish Massage</a></li>
    			<li><a href="../treatments/hands-and-feet.php">Hands & Feet</a></li>
    			<li><a href="../treatments/eye-treatments.php">Eye Treatments</a></li>
    			<li><a href="../treatments/mens-grooming.php">Men's Grooming </a></li>
    		</ul>
     	</li>
    
    	
    	<li><a href="../vouchers/beauty-gift-vouchers.php" class="top_parent">Gift Vouchers</a>		</li>
    	
    	<?PHP 
    	if (!isset($_SESSION['admin'])): ?>
    	
    		
    	<li><a href="#" class="top_parent">Booking</a>
    		
    		<ul><?PHP 
    	if (!isset($_SESSION['loggedin'])): ?>
    			<li><a href="../membership/membership-signup.php">Register For Online Booking</a></li>
    			<?PHP else: ?>
    			<li><a href="../booking/booking-form.php">New Booking</a></li>
    			<li><a href="../booking/edit-booking.php">View My Appointments</a></li>
    			<?PHP endif; ?>
    		</ul>
    	</li>
    
    	
    	
    	<?PHP endif; ?>
    	
    	
    	<li><a href="#" class="top_parent">Price Guide</a>
    		<ul>
    			<li><a href="../treatments/beauty-by-tara-price-list.php">Treatment Price List</a></li>
    			<li><a href="../treatments/beauty-promotions.php">Discounts & Promotions</a></li>
    		</ul>
    	</li>
    
    
    	
    	<?PHP if (!isset($_SESSION['admin'])): ?>
    	
    	<li><a href="../beauty-by-tara-location.php" class="top_parent">Contact Tara </a></li>
    	
    	<?PHP endif; ?>
    	
    	<?PHP if (isset($_SESSION['admin'])): ?>
    	<li><a href="#" class="top_parent">ADMINISTRATOR OPTIONS </a>
    		  <ul>
    		  	<li><a href="../admin/schedule.php" class="parent">Schedule</a></li>
    		  	<li><a href="#" class="parent">Treatments</a>
    				<ul>
    					<li><a href="../admin/treatments.php?addtreatments=1">Add New Treatment</a></li>
    					<li><a href="../admin/treatments.php?listtreatments=1">Edit / Delete Treatment</a></li>
    					<li><a href="../admin/treatments.php?editcats=1">Add New Category</a></li>
    					<li><a href="../admin/treatments.php?listcats=1">Edit / Delete Category</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Admin 2</a></li>
    			<li><a href="#">Admin 3</a></li>
    		</ul>
    	</li>
    	<?PHP endif; ?>
    	
    	</ul>

    And here is the css:

    Code:
    ul#nav {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    
    
    ul#nav li a {
    
    	display: block;
    	font-weight: bold;
    	padding: 5px 15px;
    	background:#C6168B;
    	text-decoration:none;
    	width: auto;
    	color:#FFFFFF;
    }
    
    ul#nav li a:hover{
    	background:#FF1AB5;
    	color:#fff;
    	}
    	
    li {
    	float: left;
    	position: relative;
    	width: auto;
    	text-align: left;
    	margin-right:0px;
    	border:1px solid #ccc;
    	list-style:none;
    
    }
    
    ul#nav li.current a{
    	background:#ddd;
    	}
    
    ul#nav li.current a:hover{
    	background:#888;
    	}
    
    li ul {
    display:none;
    	position:absolute;
    	width:140px;
    	top: 18px;
    	left: 0;
    	font-weight: normal;
    	padding: 1px 0 10px 0;
    	margin-left:-1px;
    	z-index:999;
    }
    
    ul#nav li ul.sub li{
    	border-width:0 1px 1px 1px!important;
    }
    
    ul#nav li ul.sub li a{
    	font-weight: normal!important;	
    }
    li>ul {
    	top: auto;
    	left: auto;
    }
    
    li:hover ul, li.over ul {
    	display: block;
    }
    Any thoughts how to get all the submenu boxes to be equal width (ie all as wdide as the widest one) and how to resolve the problem in IE7?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Ive redone the dropdown menu but I still cant get it to appear above the content in IE7. And also I cant get the drop down boxes to be equal widths.
    To make them equal width, you have to apply a specific value to them, say
    Code:
    #nav li {
    .........
    width:130px;
    }
    But the problem is, the space is not enough to occupy the entire menu at the right. You may have to utilise the entire width of the main container.

    Alright, now fix the remaining errors also from your markup. Also try to remove all divitis, to make the things easier.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    To make them equal width, you have to apply a specific value to them, say
    Code:
    #nav li {
    .........
    width:130px;
    }
    If i set the width like this then all the sub menus are the same width. I want each dropdown menu to be as wide as the widest item in that dropdown, so if one drop down only has one word items in it that width will be less than another dropdown that may have a two word item in etc. Is this possible?

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    OK - Ive got the menu looking good in FF and it works as I want.

    http://www.beautybytara.co.uk/index.php

    I now have two IE problems.

    In IE6 the menu is in a completely different position and breaks onto a second line.

    In IE7 the position is OK but the dropdowns go behind the content below them.

    Can anyone help me fix these two IE problems?

    The CSS is:

    Code:
    body,td,th {
    	font-family: arial, helvetica, sans-serif;
    	color: #2E3092;
    }
    body {
    background-color:#ffffff;
    	font-family: arial, helvetica, sans-serif;
    		font-size: 12px;
    	color: #2E3092;
    	line-height:17px;
    }
    a:link {
    	color: #C6168B;
    	font-weight: bold;
    }
    a:visited {
    		color: #C6168B;
    	font-weight: bold;
    }
    a:hover {
    	color: #FF1AB5;
    		font-weight: bold;
    }
    a:active {
    			color: #C6168B;
    	font-weight: bold;
    }
    h1 {
    	font-size: 17px;
    	text-align:left;
    }
    
    
    
    
    smallBr{
    font-size: 1px;
    line-height: 2px;
    }
    
    #menuh-container
    	{
    	position:relative;	
    margin:0px;
    padding:0px;
    	top:42px;
    	left:270px;
    	z-index:99;
    width:auto;
    	text-align:left;
    
    	}
    
    
    #nav {
      position: relative;
        list-style:none;
    
    
    }
    	#nav li {
      	
      	  width: auto;
    	   border:solid 1px #FFFFFF;
    float:left;
    	      list-style:none;
    	}
    	#nav a {
      	  display: block;
    	  padding: 0.4em 1.5em 0.4em 1.5em;
      	  text-align: center;
      	  color: #fff;
      	  text-decoration: none;
    	  	background-color: #C6168B;
    	}
    	#nav li:last-child {
    	  border-right: none;
    	}
    	/*IE6*/
    	#nav a:hover, #nav a:active {
      	  background-color: #FF1AB5;
      	  color: #ffffff;
    	}
    
    #nav ul {
      position: absolute;
      width: 9em;
      left: -999em;
    
    
    }
    #nav ul li, #nav ul ul li {
      width: 150px;
    
    }
    #nav ul ul {
      margin: -1.8em 0 0 9em;
    }
    
    #nav li:hover {
      position: relative;
      z-index: 1;
      
    }
    	#nav li:focus ul ul, #nav li:hover ul ul {
      	  left: -1000em;
    	}
    	#nav li:focus ul, #nav li li:focus ul, 
    	#nav li:hover ul, #nav li li:hover ul {
    	  left: -40px;
    	}
    	#nav li li:focus ul.links, #nav li li:hover ul.links {
             
      	}
    	
    #nav ul li {
      border-right: none;
    }
    	#nav ul a, #nav ul a:visited {
      	  background-color: #C6168B;
      	  display: block;
      	  color: #ffffff;    
    
    	}
    	#nav ul a:focus, #nav ul a:hover, #nav ul a:active
    	#nav ul :hover > a, #nav ul :active > a {
      	  background-color: #FF1AB5;
    
      	  color: #fff;
      
    	}
    	#nav ul ul a, #nav ul ul a:visited {
      	  padding: 0 5px;
    	}
    	#nav ul li.dubbel a,
    	#nav ul ul li.dubbel a {
    	  line-height: 18px;
    	}
    	#nav :hover > a, #nav :active > a {
      	  color: #ffffff;
      	  background-color: #FF1AB5;
    	}
    
    
    
    .greybox{
    background-color:#EBEBEB; border-style:solid; border-width:1px; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; 
    }
    
    .greybox:hover{
    background-color:#ffccff; border-style:solid; border-width:1px; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; cursor:pointer;
    }
    
    .clickdiv {
    display: block;
    height: 100%;
    width: 100%; 
    }
    
    
    .tara {
    
     width: 900px ;
      margin-left: auto ;
      margin-right: auto ;
    
    }
    
    
    .tara .menubar {
    position:relative;
    top:0px;
    width: 900px;
    height:140px;
    left:0px;
    background-image:url(../images/nav-menu-background09.jpg);
    
    margin-right:auto;
    margin-bottom:0px;
    background-repeat:no-repeat;
    text-align:left;
    background-color:#CC3300;
    }
    
    
    .tara .mainpage {
    clear:left;
    position:relative;
    top:0px;
    width:810px;
    left:0px;
    background-image:url(../images/background09.jpg);
    padding-left:45px;
    padding-right:45px;
    margin-top:0px;
    background-repeat:repeat-y;
    text-align:left;
    
    }
    
    
    .clearfix:after {
    position:relative;
    	content: ".";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	line-height: 0;
    	height: 0;
    clear: left;
    }
    
    .clearfix {
    	display: inline-block;
    }
    
    html[xmlns] .clearfix {
    	display: block;
    }
    
    * html .clearfix {
    	height: 1%;
    }
    
    
    .tara .mainpage .content {
    position:relative;
    top:0px;
    width:465px;
    left:0px;
    float:left;
    
    margin-top:0;
    
    text-align:left;
    
    
    }
    
    .tara .mainpage .content .treattimetable td {
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    vertical-align:bottom;
    height:12px;
    text-align:right;
    
    }
    
    .treattimes  {
    margin-left:0px;
    vertical-align:bottom;
    padding-left:15px;
    padding-bottom:0px;
    margin-bottom:0px;
    text-align:left;
    
    }
    
    
    .tara .mainpage .contentwide {
    position:relative;
    top:0px;
    width:810px;
    left:0px;
    float:left;
    
    margin-top:0;
    
    text-align:left;
    
    
    }
    
    
    .tara .mainpage .sidebar {
    position:relative;
    top:0px;
    width:300px;
    left:0px;
    float:right;
    background-color:#ffccff;
    padding:10px;
    
    margin-top:0;
    
    text-align:left;
    z-index:1;
    
    
    }
    
    .tara .mainpage .sidebar .titles {
    background-color:#2E3092;
    color:#FFFFFF;
    padding:6px;
    font-size:16px;
    margin-top:-10px;
    margin-left:-10px;
    margin-right:-10px;
    margin-bottom:10px;
    font-weight:bold;
    
    
    }
    
    
    
    .tara .menubar .memberlogin {
    left:307px;
    font-size:11px;
    width:545px;
    height:30px;
    text-align:right;
    color: #2E3092;
    position:relative;
    padding-right:40px;
    	top:30px;
    	margin-top:0;
    	line-height:13px;
    	font-weight:normal;
    }
    
    
    
    
    
    .tara .menubar .loginmessage {
    float:right;
    font-size:11px;
    width:545px;
    height:30px;
    text-align:right;
    color: #2E3092;
    position:relative;
    padding-right:40px;
    	top:30px;
    	margin-top:0;
    	font-weight:normal;
    }
    
    input, select, textarea {
    color: #2E3092;
    }
    
    input {
    font-weight:bold;
    }
    
    
    .tara .footer {
    position:relative;
    top:0px;
    width: 900px;
    height:252px;
    left:0px;
    background-image:url(../images/nav-menu-background-base09.jpg);
    display:block;
    margin-right:auto;
    margin-bottom:0px;
    background-repeat:no-repeat;
    text-align:left;
    }
    
    
    
    .tara .pagebase {
    position:relative;
    top:0px;
    width: 750px;
    height:245px;
    left:-45px;
    padding:0;
    
    }
    
    .tara .pagebase2 {
    position:relative;
    top:0px;
    width: 750px;
    height:40px;
    left:-45px;
    padding:0;
    
    }
    
    
    
    
    .hiddentextarea {
    visibility: hidden;
    } 
    
    .bookingformoptions{
    border:none; 
    margin: 0px; 
    text-align:left;
    color:#2E3092;
    font-size:11px;
    
    }
    
    select {
     background-color: #ffccff;
     color: #2E3092;
    }
    
    
    textarea.database { 
    visibility: hidden; 
    } 
    
    textarea.textareabookingforms { 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    		font-size: 0.92em;
    	color: #2E3092;
    } 
    
    
     
    .buttons {
    
    background-color:#C6168B;
    color:white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    		font-size: 0.98em;
    border:2px outset #C6168B;
    }
    .buttonsOverClass {
    
    background-color:#FF1AB5;
    color:white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    		font-size: 0.98em;
    border:2px inset #FF1AB5;
    }
     
     
    .textboxes {
     
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	color: #2E3092;
    	
    	}
    	
    	.datedisplay {
     
    color:#2E3092; 
    background-color:#EBEBEB;
    Border:none; 
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	
    	}
    
    
    
    /* the div that holds the date picker calendar */
    .dpDiv {
    
    	}
    
    
    /* the table (within the div) that holds the date picker calendar */
    .dpTable {
    width:200px;
    	font-family: Tahoma, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	text-align: center;
    	color: #505050;
    	
    	background-color:#FFCCFF;
    	border: 1px solid #AAAAAA;
    	}
    
    
    /* a table row that holds date numbers (either blank or 1-31) */
    .dpTR {
    	}
    
    
    /* the top table row that holds the month, year, and forward/backward buttons */
    .dpTitleTR {
    	}
    
    
    /* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
    .dpDayTR {
    	}
    
    
    /* the bottom table row, that has the "This Month" and "Close" buttons */
    .dpTodayButtonTR {
    	}
    
    
    /* a table cell that holds a date number (either blank or 1-31) */
    .dpTD {
    	border: 1px solid #FFCCFF;
    	}
    
    
    /* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
    .dpDayHighlightTD {
    	background-color: #CCCCCC;
    	border: 1px solid #AAAAAA;
    	}
    
    
    /* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
    .dpTDHover {
    	background-color: #aca998;
    	border: 1px solid #888888;
    	cursor: pointer;
    	
    	}
    
    
    /* the table cell that holds the name of the month and the year */
    .dpTitleTD {
    	}
    
    
    /* a table cell that holds one of the forward/backward buttons */
    .dpButtonTD {
    	}
    
    
    /* the table cell that holds the "This Month" or "Close" button at the bottom */
    .dpTodayButtonTD {
    	}
    
    
    /* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
    .dpDayTD {
    	background-color: #C6168B;
    	border: 1px solid #C6168B;
    	color: white;
    	}
    
    
    /* additional style information for the text that indicates the month and year */
    .dpTitleText {
    	font-size: 12px;
    	color: #2E3092;
    	font-weight: bold;
    	}
    
    
    /* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
    .dpDayHighlight {
    	color: #4060ff;
    	font-weight: bold;
    	}
    
    
    /* the forward/backward buttons at the top */
    .dpButton {
    	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #2E3092;
    	background: #E5E7FF;
    	padding: 0px;
    	}
    
    
    /* the "This Month" and "Close" buttons at the bottom */
    .dpTodayButton {
    	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #2E3092;
    	background: #E5E7FF;
    
    	}
    	
    	
    	/* tooltips */
    a.tooltip{
        position:relative; /*this is the key*/
        z-index:24; color: #2E3092;
        text-decoration:none;
    	font-weight:normal;}
    
    a.tooltip:hover{z-index:25;}
    
    a.tooltip span{display: none}
    
    a.tooltip:hover span{ /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        top:-1.4em; left:4em; padding:5px;
        border:1px solid #2E3092;
        background-color:#ffffff;color: #2E3092;
        text-align: left;
    	width:100px;
    	font-weight:normal;
    	}
    
    
    
    
    
    .tablink {
            	padding: 0px;
            	}
    
    .tablink a {
            	font-weight: bold;
            	color: #d00;
            	text-decoration: underline;
            	padding: 6px;
            	border: 1px solid #CCC;
            	display: block;
            	}
    .tablink a:hover {
            	border: 1px solid #f00;
            	background-color: #ffccff;
            	}
    
    
    
    
    
    
    
    #dhtmltooltip{
    position: absolute;
    left: -300px;
    width:auto;
    border: 1px solid black;
    padding: 8px;
    background-color: #ffff55;
    visibility: hidden;
    z-index: 100;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);*/
    }
    
    #dhtmlpointer{
    position:absolute;
    left: -300px;
    z-index: 101;
    visibility: hidden;
    }
    
    
    
    
    
    
    
    
    
    /* Styles for ALL browsers */ 
    
    .borderright { 
    height: 1px; 
    border-right: 1px solid #2E3092;
    }
    
    .bookedcell { 
    height: 1px; 
    border-bottom: 1px dotted #2E3092; 
    }
    
    .unbookedcell { 
    height: 1px; 
    border-bottom: 1px dotted #2E3092; 
    border-right: 1px solid #2E3092;
    
    }
    
    
    
    
    
    
    .borderallround { 
    
    border-bottom: 1px solid #2E3092; 
    border-right: 1px solid #2E3092;
    border-left: 1px solid #2E3092; 
    border-top: 1px solid #2E3092;
    }
    
    a.todaylink {
    background-color: #ffccff; 
    	color: #2E3092;
    text-decoration:none;
    padding:2px;
    }
     
    
    <![if ie]> 
    {
     /* Styles for ie only, overriding any styles defined above */ 
     .unbookedcell { 
     border-bottom: 0; 
     background-color: #000000; 
     } 
      
    <![endif]
    Ps. This pages now seems to validate perfectly: http://validator.w3.org/check?uri=ht...uk%2Findex.php. Most of the errors were originally coming from the amazon widget I had there, which I have removed for now.
    Last edited by leemarquis; 11-27-2008 at 06:48 PM.

  • #8
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    OK - Ive sorted the IE6 problem. That was an oversigth on my part as I forgot I had a separte CSS file for IE6 that I hadnt updated!

    But Im still at a loss to rectify the IE7 problem of the dropdown menus disappearing behind the content divs below it. If anyone can check my code and let me know where Ive gone wrong it would be much appreciated.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'd like to ask you about the use of this much IE specific styles.
    Code:
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="menuh_ie.css" />
    <![endif]-->
    The original suckerfish menu uses a very little IE specific styles, where as you have written everything again for IE6. I'd recommend you to remove it and after all you need to do will be some position:relative; to the lis and some high z-index values to the uls.

    (Have you considered removing divitis?)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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