CSS - Css List Sprite

I currently have a menu sprite set up that works.
I also have a css dropdown menu set up as well in conjunction with the sprite menu.

Issue: The dropdown does not work in IE6. It drops down behind the div just below it (never to see it until I hid the contents in the div below) even after adding z-index to nearly every attribute. After hiding the contents in the div below, I see the drop down, but as soon as I mouse over it, it disappears. This has been a headache for me and I need to get this resolved asap.

Here is the CSS:
aunkor.com/css.html

Here is the HTML:
aunkor.com/html.html

Please help! >_<

Im struggling here trying to replace this code. any help would be appreciated. Now To go into details I have a magento template. Im trying to replace the default navigation text menu to a css sprite top image menu. the default navigation text menu css code is stated below

Quote:

/********** < Navigation */
.nav-container {}
#nav {padding:0; margin:0; font-size:11px; border-bottom:1px solid #000; }

/* All Levels */
#nav li { text-align:left; position:relative; border-right:1px solid #000;}
#nav li a,
#nav li a span{background:url(../images/menu_bg.gif) left top repeat-x #141314;}

#nav li.first{background:url(../images/menu_corner_left.png) left top no-repeat; padding-left:5px;}
#nav li.first a span{padding-left:42px;}
#nav li.over.first,
#nav li.active.first{background:url(../images/menu_corner_left_active.png) left top no-repeat;}

#nav li.last a{background:url(../images/menu_corner_right.png) right top no-repeat; padding-right:5px;}
#nav li.last a span{padding-right:38px; padding-left:45px;}
#nav li.over.last a,
#nav li.active.last a{background:url(../images/menu_corner_right_active.png) right top no-repeat;}

#nav li.over a span,
#nav li.active a span{background:url(../images/menu_bg_active.gif) left top repeat-x #1E1F1F; padding-bottom:16px;}
#nav li.over,
#nav li.active{border-bottom:1px solid #2C2B2C;}

#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; padding:20px 43px 17px 47px; text-transform:uppercase; white-space:nowrap; cursorointer; }
#nav li ul a span { white-space:normal; }

/* 1st Level */
#nav li { float:left; }
#nav li a { float:left; padding:0; color:#FFF; }
#nav li a:hover { color:#FFF; }
#nav li.over a,
#nav li.active a { color:#FFF; }

/* 2nd Level */
#nav ul { position:absolute; width:17em; top:50px; left:-10000px; border:1px solid #202020; border-bottom:0; background:#070707; font-size:9px; }
#nav ul li { float:none; border-bottom:1px solid #202020!important; background:0; }
#nav ul li.last { border-bottom:0; }
#nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#888 !important; background:0!important; }
#nav ul li a:hover { color:#FFF !important; }
#nav ul li a span{padding:3px 5px!important; background:0!important;}
#nav ul li.active > a,
#nav ul li.over > a { color:#FFF !important; }

/* 3rd+ leven */
#nav ul ul { top:7px; }

/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
/********** Navigation > */





Ok now after viewing the code above i was wondering how can i add the css sprite image code that i made to replace the default navigation text menu. Below is the css code i made for the sprite images.

Quote:

#navigation { margin: 0; padding: 0; width: 969px; height: 53px;
Background-image: url(lastone.gif) ; }

#navigation li { margin: 0; padding: 0; list-style-type: none; display: inline;
height:53px; text-align: center; float:left; line-height:53px; }

#navigation a { display:block; height:52px; }
#navigation a:hover { background-image: url(lastone.gif) ; }

#nav-home { width:161px; }
#nav-home a:hover { background-position:bottom 0; }

#nav-Service { width:161px; }
#nav-Service a:hover { background-position:bottom -162px; }

#nav-Quicklinkz { width:161px; }
#nav-Quicklinkz a:hover { background-position:bottom -323px; }

#nav-Advertise { width:161px; }
#nav-Advertise a:hover { background-position:bottom -484px; }

#nav-Contact { width:161px; }
#nav-Contact a:hover { background-position:bottom -645px; }

#nav-About { width:161px; }
#nav-About a:hover { background-position:bottom -806px; }

#navigation span { display: none; }





AS you can see below i also have inserted the HTML that correspond to the css sprite image menu code. I link the css code into the html. so my final 2 questions is. can anyone replace the css code i made in the default css code. and after thats done which root do i upload the html code to.


Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation Menu</title>
 
<link rel="stylesheet" type="text/css" href="menu.css"/>
 
</head>
 
 
<body>
<ul id="navigation">
 
  <li id="nav-home"><a href="#"><span>Home</span></a></li> 
  <li id="nav-Service"><a href="#"><span>Service</span></a></li>  
  <li id="nav-Quicklinkz"><a href="#"><span>Quicklinkz</span></a></li>
  <li id="nav-Advertise"><a href="#"><span>Advertise</span></a></li>  
  <li id="nav-Contact"><a href="#"><span>Contact</span></a></li>
  <li id="nav-About"><a href="#"><span>About</span></a></li>
</ul>
</body>
</html>

I'm new with this image sprite method, at least with the type of image I have copied. I have it mostly working, but for some reason it word wraps the two word text that appears over the image.

Here is a link to the example: ... EDIT: It seems I can't post a URL. I'll try on the second post.

It is located in the Test Data tab on this product page. The button that says View More. View on one line, More on the other. I'm thinking it is an issue with my HTML more than the CSS. I've tried many different variations with not much like. I can break it more, but can't seem to fix it.

Any help or guidance is appreciated.

I am looking to make a navigation menu similar to the following:

http : / / www . coremediadesign.co.uk/website_design_company/about_core_media_design.html


This is the sprite image they use.

http : / / img819.imageshack.us/img819/8185/menuo.png


I would like to accomplish the same thing. I am NOT looking for one long image with my entire menu in image format. I want a three-part background image/sprite like the one I posted above that is used as the background/hover/active by repeating it on the x-axis.


I have tried for a long time to get this working but have not been able to. Please help me out.

Hey everyone,

I'm trying to convert a jscript rollover setup to using CSS sprites.

I have setup the following sprite:

[IMG]eagleonedims.com/images/navmap.jpg[/IMG]

I cannot figure out how to have the <li> sections replace the entire ba6nner with a shifted-down sprite upon rollover. The shifted sprite just appears within the boundaries of the respective<li> section. The reason for needing this is to include the cloud effect which overlap the other li sections. Basically, upon rollover I need the ENTIRE navmap.jpg image to be shifted by 88px down. The image is 1000px wide and each sprite is 88px tall.

Thanks for any help!

CSS:
Code:

#navmap {
	width: 1000px;
	height: 88px;
	background: url("images/navmap.jpg");
	margin: 0;
	padding: 0;
	position: relative;
}

#navmap li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}

#navmap li, #navmap a {
	height: 88px;
	display: block;
}

#home {left: 141px; width: 110px;}
#about {left: 251px; width: 120px;}
#pricing {left: 371px; width: 120px;}
#quote {left: 491px; width: 120px;}
#contact {left: 611px; width: 120px;}
#login {left: 731px; width: 128px;}

#home a:hover {background: url("images/navmap.jpg") 0px -88px no-repeat;}
#about a:hover {background: url("images/navmap.jpg") 0 -176px no-repeat;}

HTML:
Code:

<ul id="navmap">
  <li id="home"><a href="index.php">Home</a></li>
  <li id="about"><a href="about.php">About</a></li>
  <li id="pricing"><a href="pricing.php">Pricing</a></li>
  <li id="quote"><a href="quote.php">Quote</a></li>
  <li id="contact"><a href="contact.php">Contact</a></li>
  <li id="login"><a href="login.php">Login</a></li>
</ul>    

I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example:

Currently like this
Code:

#store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}

want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}

with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet.

effectively so i can just change the other external style sheet to change the gif file and keep this one the same.

HOW? possible?

Seems like most people use unordered lists for menus.
Code:

<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>

Others use definition lists. They claim it is less buggy with IE.
Code:

<dl>
<dt>menu1</dt>
<dt>menu2</dt>
<dt>menu3</dt>
</dl>

Any thoughts on whether unordered lists or definition lists are best?

Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag?
Code:

<ul>
<li><span>menu1</span></li>
<li><span>menu2</span></li>
<li><span>menu3</span></li>
</ul>

Thanks

I have a list that I've created with the list-style-type being an image.

For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly?

Below is the code. The cell that these lists sit in has has an id of 'cellid'.

Code:

#cellid {
margin: 0 0;
padding: 0 0;
}

#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}

#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}

The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space?

Thanks,

Brian

Hi

I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript.

here is the structure,
Code:

<ul id="nav">
										                                            <li  class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>

</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>

<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
                                                                                    <li  class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>

here is my all related css,

external css file,
Code:

#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0  0; width:100%;}

/* All Levels */
#nav li { text-align:left; }


#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}

/* 0 Level */
#nav li { clear:both; position:relative;  display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left;  padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }

#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}


#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}

/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }

#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }

/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }

/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }

/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }


#nav li ul { display:none; }
#nav li:hover ul{display: block; }


#nav ol {  margin-left:5px; margin-bottom:10px;  }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif);  font-size:12px; font-weight:normal;    }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }

inline css code to overwrite the default behavior for target page

Code:

ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover  {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}

ul#nav ol li a { padding:0px;  }
ul#nav ol li  { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol {  border:#ccc 1px solid; padding-bottom:30px;  }

I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem.

In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards.

any help is much appreciated I am really stuck with this.

Hi,

Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side?

/Hubba Bubba

Hi,

I have an OL list (the numbered one) and the horz gap between the list item
number (as automatically generated by OL) and the text of the LI is too big
(according to client). Looks fine in FF but is bigger alright on IE (ahem
naturally .....)

I've played with the CSS for both the OL & LI styles even setting all
margins and paddings to 0 but without effect on the gap.

Is there any way to style that gap? Code below.

Kevin

<ol class="most_read">
<li class="most_read_li">Apples</li>
<li class="most_read_li">Oranges</li>
</ol>



.most_read {
text-align:left;
color:#808080;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
margin-left:30px;
padding:0px;
margin-top:5px;
}


.most_read_li {
margin-bottom:7px;
margin-right:7px;
}

Hi

I am creating a navigation bar using unsorted list and CSS.
I have given my CSS and HTML code here


Code:

#navcontainer 
{
width: 200px;
margin-top:150px; 
}

#navcontainer ul#navlist
{
width:200px;
clear:left; 
text-align:left; 
margin-left:0; 
padding-left:0; 
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;

}

#navcontainer ul#navlist li
{
margin-left:0; 
padding: 0px;
display: block;
list-style:none; 
border-bottom: 1px solid gray;
}

#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}

  a.linkText {
    padding: 10px;
    display: block;

    color : #444444;
    font-family : arial;
    font-size : 11px;
    font-weight : bold;
    text-decoration : none;
    height:25px;

    }
    a.linkText:link {
    color : Aqua;
    /* you can define other styles if necessary */
    }
    
    a.linkText:visited {
    color : Maroon;
    /* you can define other styles if necessary */
    }
    
    a.linkText:hover {
    color : Blue;
    }
    
    
    
    </style>
</head>
<body>
<div id="navcontainer">
    <ul id="navlist">
        <li><a class="linkText" href="#">Item One</a></li>
        <li><a class="linkText" href="#">Item two</a></li>
        <li><a class="linkText" href="#">Item three</a></li>
        <li><a class="linkText" href="#">Item four</a></li>
        <li><a class="linkText" href="#">Item five</a></li>
    </ul>
</div>

The problem is, when I select the next list item, previously selected list item should come to the original color.

Is there any way I can achieve this? Your guidence will be appreciated. Many thanks

I have a list in IE that works fine, but I have to make it work in NN4 as well. The problem is the big space left between the item and the left side of the body. I looked several sites, but couldn't find any answers.

You can view the actual htm at http://www.nald.ca/test/fora/test.htm
Main CSS: http://www.nald.ca/test/fora/test.css
CSS for NN4: http://www.nald.ca/test/fora/test.css

If anyone could just give me some kind of idea where I am going wrong, it would be really awesome. Thanks

Hello,

I created a menu using an unordered list and after the list I have a
div with some text:
http://www.27lamps.com/public/Menu.htm

My menu gets over the div. Why?

Thanks,
Miguel

Hi,

I am currently using an unordered list to output images in a photo gallery im making however i want to also add text underneath each of these. If i use <br> after the image it messes up the UL as the next LI appears underneath the previous one. This is not the desired effect as i am creating a horizontal list. How can i add text underneath the image without distroying the layout?