OK Guys, here's the problem: I cannot get background images to show in list items... for EITHER FF or IE I've been absolutely killing myself trying to figure out why this isn't working. I'll show you a basic example. Something I KNOW should work. I want to make a unordered list with an image background in the list items instead of using a bullet. Simple Enough? Here is my HTML: <ul> <li>Item 1</li> <li>Item 2</li> </ul> ... and my CSS: ul { list-style-type:none; } ul li { margin:0px; padding:5px 0px 0px 10px; background: url (bullet.jpg); } Simple right? Well, I can't get it to work in EITHER Firefox (newest version) or IE7 (newest version). What is happening? I also cleared my internet temporarly files and cache. Oh, and the image exists.
You have a space between url_( . take it out. Quotes I believe should be around the image.jpg but it shows without.
I tried both suggestions, but neither work... I've built many sites using CSS and HTML in the past, so I'm just ridiculously confused as to what is going on here... Anyone???
Drop the ul li part as well, put it as li, forgot I did that too. It has to be the space, I just put ul li and it works fine. Something else you are doing is messing it up. <style> ul { list-style-type:none; } ul li { margin:0px; padding:5px 0px 0px 10px; background: url(butt.jpg); } </style> <ul> <li>Item 1</li> <li>Item 2</li> </ul> Code (markup):
Actually it had nothing to do with the spaces... I can't believe how annoying some of this stuff is. The problem was that Dreamweaver was set links set to root relative instead of document relative... Even with it being set up like that, it was giving the proper path to the image that was to be used as a bullet. Go figure. <sigh>Sometimes I hate being a web designer...</sigh>
Well there's your problem. You really should be hand coding this stuff. You would have saved yourself hours of time, and had fewer headaches if you were using a text editor. Also, have you tried the Firebug Extension for Firefox? With that, you could have quickly found out that the paths were not correct, thus your image wasn't showing up.
I'll tell you another problem there-- in addition to the space mentioned above, you are trying to use a shortcut for one property. No can do. You either need background: #color url(blahblah.gif) 0 0 no-repeat; (something like that, many of those can be removed but you need more than one) OR background-image: url(blahblah.gif); Extra points tip! Bullets can usually be gifs which are smaller and thus quicker to load. Unless the bullets are big and are made of photos of people's faces, you don't want or need .jpg.
I actually do most everything in dreamweaver's coding view. Works quite well. It was a setting under the site preferences that was the issues. I will have to take a look at that. I debug in both IE and FF, so that would be helpful. I've never seen a problem with that, but I guess it is a good idea... Yep, agreed. Thanks.
I generally get a CSS error when I try to only use one property with "background." Some shortcuts like "font" have a certain number of properties present to work, while as far as I know background simply needs more than one.
For some reason, I've never got an error doing that. My documents validate well in Dreamweaver. Could it be because I'm using XHTML 1.0 Transitional? I do it because it allows me to use less lines of code in my .css files.
Hmm, I don't think so cause that's the HTML part and CSS is validated separately. I've only coded in strict, not transitional, and yeah Transitional lets you get away with more stuff... but only with HTML as far as I know. Does DW validate using the w3c validator?? Or does it have its own? *Edit so long as your backgrounds are showing when your site is sitting on a server and you're accessing it like anyone else does, I guess it's not a big problem : )
Oh yes, everything always works. I always test my sites in various browsers to ensure their compatiability. Dreamweaver does have a css validator that checks to see if the css properties are supported in many different browsers, though that would probably be different than an actual css validator like W3 has.
DW might then let you know that -moz is supported by Gecko and :filter is supported by IE... the validator doesn't necessary know those as they're proprietary. DW might also be okay with the Holly Hack, knowing it's for IE. The validator usually calls it bad, "Expected { but found 'html' instead." and that sort of thing. I'm willing to let my CSS be not considered valid simply to help a retarded browser render properly.