Advanced Search

Results 1 to 1 of 1

Thread: Stubborn Sprite Stacking

  1. #1
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Stubborn Sprite Stacking

    Afternoon!

    I've decided to switch our website's dropdown menu icons into sprites for faster pageloading but I'm having a finishing touch issue. The sprites are somehow showing up behind the background color of the <li>'s and thus hidden. I've tried tweaking the z-index but they remain in the back. Any thoughts on known stacking issues or background-color/background url conflicts?

    Here's the css:

    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: small;
    }
    
    h1, h2, h3, h6 {
    	margin-bottom: 10px;
    	text-transform: lowercase;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	color: #000000;
    }
    
    h4 {
    	margin-bottom: 10px;
    	text-transform: lowercase;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	color: #FFFFFF;
    }
    
    h5 {
    	margin-bottom: 10px;
    	text-transform: lowercase;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #58b6dd;
    }
    
    h1 { font-size: 2em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.4em; font-weight: normal;}
    h4 { font-size: 2em; } 
    h5 { font-size: 2em; } 
    h6 { font-size: 1.2em; } 
    
    
    p, blockquote, ul, ol {
    	margin-bottom: 1.5em;
    	line-height: 1.8em;
    }
    
    blockquote, ul, ol {
    	margin-left: 3em;
    }
    
    blockquote {
    	margin-right: 3em;
    }
    
    a {
    	color: #0065CC;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #CC0000;
    }
    
    img { border: none; }
    
    img.left {
    	float: left;
    	margin: 0 15px 15px 0;
    	display: inline;
    }
    
    img.right {
    	float: right;
    	margin: 0 15px 0 15px;
    	display: inline;
    }
    
    hr { display: none; }
    
    .hr {
    	height: 36px;
    	margin-bottom: 15px;
    	background: url(images/img06.gif) repeat-x left center;
    }
    
    .welcome	{
    	text-align:justify;
    }
    
    .welcomeh	{
    	text-align:center;
    }
    
    #photodiv {
      background-repeat: no-repeat;
    }
    
    /* Transparency see http://www.mandarindesign.com/opacity.html*/
    
    div.transON	{
    	width: 100%;
    }
    
    div.transOFF		{
    	width: 100%;
    	opacity:.50;
    	filter: alpha(opacity=50); 
    	-moz-opacity: 0.5;
    }
    
    
    /* Header */
    
    #header {
    	width: 700px;
    	height: 100px;
    	margin: 0 auto;
    }
    
    #headerticker {
    	width: 700px;
    	height: 15px;
    	margin: 0 auto;
    	text-align: right;
    }
    
    .trleft	{
    	width:240px;
    }
    
    .trright	{
    	width:460px;
    }
    
    
    #logo {
    	float: left;
    	width: 240px;
    	height: 100px;
    	text-align: center;
    	color: #FFFFFF;
    }
    
    
    #logo h1 {
    	margin: 0;
    	font-size: 2.6em;
    }
    
    #logo h2 {
    	font-size: 1em;
    }
    
    #logo a {
    	text-decoration: none;
    	color: #333333;
    }
    
    
    /* Menu */
    
    #menu {
    	float: right;
    	width: 460px;
    	height: 50px;
    	background: #58b6dd url(images/img01.gif) no-repeat left bottom;
    }
    
    #menu ul {
    	margin: 0;
    	padding-top: 60px;
    	text-align: center;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	padding: 0 20px;
    	border-left: 1px solid #FFFFFF;
    	text-decoration: none;
    	font-weight: bold;
    	color: #ffffff;
    }
    
    #menu a:hover {
    	text-decoration: underline;
    }
    
    #menu .first a {
    	border: none;
    }
    
    /* Page */
    
    #page {
    	width: 700px;
    	margin: 0 auto;
    	background: url(images/img03.gif) repeat-y;
    }
    
    #pagetop {
    	width: 700px;
    	margin: 0 auto;
    }
    
    /* Content */
    
    #content {
    	float: right;
    	width: 420px;
    	padding: 20px;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: left;
    	width: 200px;
    	padding: 60px 20px 20px 20px;
    	background: url(images/img02.gif) no-repeat;
    }
    
    #sidebar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	line-height: normal;
    }
    
    #sidebar li {
    	margin-bottom: 20px;
    }
    
    #sidebar li ul {
    	list-style: disc inside;
    }
    
    #sidebar li li {
    	margin: 0;
    }
    
    #sidebar dl {
    }
    
    #sidebar dt {
    }
    
    #sidebar dd {
    	margin-bottom: 10px;
    }
    
    #sidebar ol {
    	margin-left: 0;
    	list-style-position: inside;
    }
    
    #sidebar h2 {
    	margin-bottom: 20px;
    	padding-bottom: 10px;
    	background: url(images/img05.gif) repeat-x left bottom;
    	color: #000000;
    }
    
    #sidebar h4 {
    	margin-bottom: 20px;
    	padding-bottom: 10px;
    	background: url(images/img05.gif) repeat-x left bottom;
    	color: #FFFFFF;
    }
    
    #sidebar blockquote {
    	margin-left: 0;
    	margin-right: 0;
    }
    
    #sidebar a {
    	color: #ffffff;
    }
    
    /* Footer */
    
    #footer {
    	width: 700px;
    	margin: 0 auto;
    	padding: 10px 0;
    	background: url(images/img06.gif) repeat-x;
    	border-top: 1px solid #FFFFFF;
    	font-size: small;
    	text-align:center;
    }
    
    
    #footer p {
    	margin: 0;
    	line-height: normal;
    	color: #999999;
    	font-size: x-small;
    }
    
    #footer a {
    	color: #999999;
    }
    
    
    /* Begin CSS Drop Down Menu */
    
    
    #menuh-container
    	{
    width: 460px;
    height: 45px;
    font-weight: normal;
    float: right;
    background-color: #58b6dd;
    	}
    
    #menuh
    	{
    	font: normal 10px Trebuchet MS;
    	width:459px;
    	float: none;
    	margin:2em;
    	margin-top: 2em;
    	}
    	
    
    #menuh a
    	{
    	text-align: center;
    	display:block;
    	border: 1px solid #BBB;
    	white-space:nowrap;
    	margin:0;
    	padding: 0.3em;
    	}
    	
    #menuh a, #menuh a:visited	/* menu at rest */
    	{
    	color: #58b6dd;
    	background-color: white;
    	text-decoration:none;
    	border: 1px groove #BBB;
    	}
    		
    #menuh a:hover	/* menu at mouse-over  */
    	{
    	color: white;
    	background-color: #58b6dd;
    	}	
    				
    #menuh ul
    	{
    	list-style:none;
    	margin:0;
    	padding:0;
    	float:left;
    	width:6em;	/* width of all menu boxes */
    	}
    
    #menuh li
    	{
    	position:relative;
        min-height: 1px; 	/* Sophie Dennis contribution for IE7 */
        vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
    	z-index:500;
    	}
    
    #menuh ul ul
    	{
    	position:absolute;
    	top:auto;
    	display:none;
    	padding: 1em;
    	margin:-1em 0 0 -1em;
    	width:12em;
    	}
    
    #menuh ul ul ul
    	{
    	top:0;
    	left:100%;
        width:12em;
    	background-image:none;
    	}
    
    div#menuh li:hover ul ul,
    div#menuh li li:hover ul ul,
    div#menuh li li li:hover ul ul,
    div#menuh li li li li:hover ul ul
    {display:none;}
    
    div#menuh li:hover ul,
    div#menuh li li:hover ul,
    div#menuh li li li:hover ul,
    div#menuh li li li li:hover ul
    {display:block;}
    
    
    /* End CSS Drop Down Menu */
    
    
    /* navigation sprites starts*/
    
    #sprites ul {
       background: url('csg-4a045c34e58ea.png') no-repeat;
       background-position: 15px;
       position:relative;
       z-index:1000;
       }
    
    #sprites.sprite-01 { background-position: 0 -10px; } 
    #sprites.sprite-02 { background-position: 0 -55px; } 
    #sprites.sprite-03 { background-position: 0 -100px; } 
    #sprites.sprite-04 { background-position: 0 -145px; } 
    #sprites.sprite-05 { background-position: 0 -190px; } 
    #sprites.sprite-06 { background-position: 0 -235px; } 
    #sprites.sprite-07 { background-position: 0 -280px; } 
    #sprites.sprite-08 { background-position: 0 -325px; } 
    #sprites.sprite-09 { background-position: 0 -370px; } 
    #sprites.sprite-10 { background-position: 0 -415px; } 
    
    /* navigation sprites ends*/
    
    
    #category
    	{
    	height: 75px;
    	width: 210px;
    	font-weight:bold;
    	}
    
    /* Lightbox Begins */
    
    #lightbox{
    	background-color:#eee;
    	padding: 10px;
    	border-bottom: 2px solid #666;
    	border-right: 2px solid #666;
    	}
    #lightboxDetails{
    	font-size: 0.8em;
    	padding-top: 0.4em;
    	}	
    #lightboxCaption{ float: left; }
    #keyboardMsg{ float: right; }
    
    #lightbox img{ border: none; } 
    #overlay img{ border: none; }
    
    #lightbox{
    	background-color:#eee;
    	padding: 10px;
    	border-bottom: 2px solid #666;
    	border-right: 2px solid #666;
    	}
    #lightboxDetails{
    	font-size: 0.8em;
    	padding-top: 0.4em;
    	}	
    #lightboxCaption{ float: left; }
    #keyboardMsg{ float: right; }
    #closeButton{ top: 5px; right: 5px; }
    
    #lightbox img{ border: none; clear: both;} 
    #overlay img{ border: none; }
    
    #overlay{ background-image: url(images/overlay.png); }
    
    * html #overlay{
    	background-color: #333;
    	back\ground-color: transparent;
    	}
    	
    
    /* Lightbox Ends */
    
    .callout	{
    	font-weight:bold;
    	color:#CC0000;
    }
    
    .privatelabel	{
    	text-align:justify;
    }
    and the link:

    http://www.imbibeinc.com/tester.html

    The sprites are there because when I remove the background color I can see them...they're just hiding from me! The sprites are supposed to be under the Product menu only; the root URL shows the desired result. Any help would be appreciated!
    Last edited by imanbushara; 05-11-2009 at 04:10 PM. Reason: increase clarity

Bookmarks

Posting Permissions

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