List-style-image:; not working.

Question

I have set a list style to use a picture but I cannot get it to show on my site. I have resized the picture to 10x10 and I should also point out that it is a png arrow image.

I have tried putting the image in the images file and calling it from there with no result, I have even put it in the main file and calling it with no result.

The urls I used were:

#contact {
list-style-image: url("images/bullet.png");
}

AND:

#contact {
list-style-image: url("bullet.png");
}

I need help whenever I can get it; it's not urgent.

Answer 1

could try for the url (if it's in the images folder and the html file is in another folder):

"../images/bullet.png"

Answer 2

@ Lucas

the png extension is widely used and supported by the browsers. it's THE image standard. so I too don't think it's the extension. wirgout the code we would be just guessing. I'd go with Blue, to post those parts of your code in here.

Answer 3

I tried it out. Blue is absolutely right. first, put that bullet.png file in your images folder and add in your css file in the #contact section the following line:

list-style-image: url ("../images/bullet.png");

problem solved. great job Blue! :)

Answer 4

Ok

Answer 5

I can give you the web address. If you don’t know, You hit F12 then go to sources and you will find the root files and you will be able to view all the code

Answer 6

I'm at a loss. if every other style works, it can't be the link element (otherwise the other styles wouldn't work either). what's left is either the file itself or something with the url.

final offer:

give te path to your png file in the ul element as inline style.

Answer 7

@Storm I would like to point out that my relevant file tree is as follows:

Site > css > stylesheet.css
images > bullet.png
index.html

ALSO,

#contact {
list-style-image: url("../images/bullet.png");
}

Did NOT work either.

Answer 8

@Storm Would the extension have anything to do with it?

I saw some articles referring to a .SVG image, and Sololearn referred to a .JPG image. Do you think maybe .PNG is not supported?

Answer 9

@Blue

Absolutely, Which part of the HTML?

Answer 10

I have the .CSS file linked in the HTML header. and everything I followed in the Sololearn CSS list styling is correct. It's just not showing up on the index.html page when opened.

Do you mean style the <li> tag and not the <ul> tag?

Answer 11

Lucas Mclerie,
Ya, I wanted that link present in your HTML header and <li> with its parent element i.e., <ul> I think...

Answer 12

Again, the section I’m trying to style or the full document?

Answer 13

HTML:

<ul id="contact" align="left">
<li>What your site is going to be about.</li>
<li>How you want your site to be laid out.</li>
<li>What you want your domain name to be.</li>
</ul>

CSS:

#contact {
list-style-image: url("images/bullet.png");
list-style-position: inside;
}

Answer 14

Please post the <link> tag in which you included css file cuz everything is looking fine!

Answer 15

I know the link is correct because every other tag I have needed to style has worked perfectly.

But here it is anyway: <link rel="stylesheet" type="text/css" href="css/stylesheet.css">

Answer 16

Yup you're right!
Try #contact li as the CSS selector...

Can you share your FULL code (html and css) through SoloLearn or any online media then, it will be more easy to solve the error!

Answer 17

www.lucasmclerie.com

Answer 18

I have no idea how to set a list image in a <style> tag. (Is it just <ul style=“list-style-image:url(“images/bullet.png”);”>?

Is the above also what you mean by ‘inline style’?

Answer 19

There is no
#contact {
list-style-image: url("images/bullet.png");
}
block in your stylesheet.css? (DON'T include this! It is incorrect)

Plus, there isn't any image named 'bullet.png' in images folder???

Solution:
Include this block in your CSS file:
#contact {
list-style-image: url("../images/sitelogo.png");
} /* just as an example */
@storm was absolutely right! :)

Answer 20

Might I add. I actually forgot that I did not upload the updated files to the hosting site. I will need to do that tomorrow as my pc is now off.

I’m so sorry that I didn’t realize earlier.

Again, I did do exactly as you just stated; include #contact {
list-style-image: url(“images/bullet.png”);
}

And there is a bullet.png image in my images file.