/    Sign up×
Community /Pin to ProfileBookmark

image in css ??

Copy linkTweet thisAlerts:
Aug 15.2006

Hi I created a css file that has :
li {
list-style-image:url(imagesarrow.gif);
list-style-position: outside;
}

but when I call li in my html page I got only a black dot and not the image arrow.gif

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisAug 15.2006 — The file name has to have quotes around it.
Copy linkTweet thisAlerts:
@danaddAug 15.2006 — You need the list-style:none in the ul tag. I've found this method works really well cross-browser:

ul {list-style:none; margin:0; padding:0 0 12px 40px;}

li {background:url(imagesarrow.gif) no-repeat 0 3px; padding-left:10px;}

Mess around with the padding in the ul and li as well as the positions in the li background (0 is for top, 3px is for left).

(and you don't need quotes around the image name - that's outdated.)
Copy linkTweet thisAlerts:
@ray326Aug 15.2006 — url(/images/arrow.gif)

The web ain't Windows.
Copy linkTweet thisAlerts:
@mlotfiauthorAug 15.2006 — Hi, I tried all the above, but nothing work, here is what I have :

li {

list-style-image:url(/images/arrow.gif);

list-style-position: outside;

}

ul {

margin-left: 23px;

}

thanks
Copy linkTweet thisAlerts:
@gil_davisAug 15.2006 — Are you absolutely sure that the image is where it should be?
Copy linkTweet thisAlerts:
@mlotfiauthorAug 15.2006 — I think gil Davis was right, it has to be between quotes :

list-style-image:url('images/arrow.gif');

now it works.

But I don't understan why, because when I downloaded this css file from a web site it was working without quotes :

list-style-image:url(http://..../images/arrow.gif);
Copy linkTweet thisAlerts:
@WebJoelAug 15.2006 — Not sure why either, but in EditPlus2 the HTML-editor, even though you CAN write a URL image as

list-style-image:url([COLOR=DarkOliveGreen]/images/arrow.gif[/COLOR]);

it colors the path, indicating a possible syntax or format error, but:

list-style-image:url([SIZE=3]'[/SIZE][COLOR=SandyBrown]/images/arrow.gif[/COLOR][SIZE=3]'[/SIZE]);

makes the color indicate correctness, -even though either works and both validate... hmm..
Copy linkTweet thisAlerts:
@ewallaceAug 16.2006 — I don't use quotes for my background images and they work for me.

mlofti, I think the trick was the difference between the "/images/arrow.gif" in your first post and the "images/arrow.gif" in the gil is right post. Perhaps?
×

Success!

Help @mlotfi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...