No background images showing in UL for sprite navigation

[Clueless]

Trying my luck at using sprites for navigation, alas i can't even get any background images to show in an UL... or for that matter even a properly sized anything, just a text list. I have tinkered for 3 days with endless CSS combinations, checking codes... nothing. I havn't even gotten to the hover states yet.Where have i gone astray?

 

>  
</pre>
<ul>
Buy
Cook
About
FAQ
Contact
</ul>

 

#nav {
   width:150px;
   height:90px;
   margin:0;
   padding:0;
   background-image: url(../Assets/BarrelNav12.png);
   background-repeat: no-repeat;
   overflow: hidden;
}

#nav li, #nav a {
height:90px;
display:block;
}

#nav li {
   float:none;
   list-style:none;
   display:inline;
}

#buy {
   width: 150px;
   height: 90px;

}
#cook {
   width: 150px;
   height: 90px;
}
#about {
   width: 150px;
   height: 90px;
}

[falkencreative]

First thing... In your code sample:

 

></pre>
<ul id="?nav?">
Buy
Cook
About
FAQ
Contact

 

When you are assigning id values to your nav (and also in the tag), you'll notice that the first quote and the second quote surrounding the id value aren't the same. The first quote is stylized (slanted slightly), whereas the second is normal (straight up and down). I'm not sure how you are coding this/what program you are using, but if you code in a rich text editor (which gives you the ability to bold, italicize, etc) it may automatically convert all "regular", straight up and down quotes to stylized quotes. Perhaps you also copied/pasted code from a file that used rich text, and that could have also caused the problem. Using a basic text editor (or one with syntax highlighting specifically for coding) should help with this problem.

 

For print documents, these slanted quotes are correct -- they are supposed to be slanted around the text that is being quoted. For coding in HTML/other web languages, though, you want regular, up and down quotes.

 

I'd suggest replacing your HTML sample with this, which uses the same "normal" quotes (or just finding and replacing all instances of the stylized quotes to regular quotes in your code).

 

></pre>
<ul id="nav">
Buy
Cook
About
FAQ
Contact

 

If that still isn't working, check your image link, and make sure the image is where you think it is. Also, I noticed that your menu items are styled inline (they will display in one line, rather than multiple) but your

element only has a width of 150px (the same width as your
• s). With that code in place, your menu will only show one menu item, and the rest will be hidden because of "overflow:hidden" on the
  .

[Clueless]

Now that is the best advice I've heard in days! The qoute error has certainly solved an issue... now I'll take a look at your other points. Benjamin, If you've helped me solve this problem I've been working on for literally 3 days... I just might put you in my will;)

[falkencreative]

Glad to hear that I helped.

 

If you aren't using a program that gives you syntax highlighting (basically, it colors/stylizes your text so the code is more readable) I'd definitely suggest you do. It'll help catch errors. That's what helped me discover the solution -- I pasted it into my code editor (Coda, in my case) and I noticed that the code highlighting looked strange, like it was ignoring the quotes.

 

You might want to look at Notepad++ (Windows, free) or something like TextWrangler (Mac, free) or Textmate/Coda (Mac, paid).

[Clueless]

You rock Benjamin, I have my sprite navigation locked up. I am using DW8 and it has some code highlighling... perhaps it's worth a look at going to Notepad++

 

Thank you greatly!

[falkencreative]

Well, if you are using Dreamweaver, it may not be worth switching. The apps I mentioned are text editors only -- they won't have some of the visual features that Dreamweaver has.

[PicnicTutorials]

Here is how I did it... http://www.visibilityinherit.com/code/sprites.php