RService,
A discussion of this along with some CSS you can use can be found at
the alt.html FAQ.
http://www.html-faq.com/faq.php?category=css&fid=163
Note that, as is often the case, different browsers may react
differently to CSS tags.
As another method, since you are using a custom image, you can simply
make your own lists with something like the HTML below, using <BR> to
force line breaks and not using <UL> or <LI> at all.
<IMG SRC="http://MYSERVER.com/images/arrow.gif"> Line 1 Text<BR>
<IMG SRC="http://MYSERVER.com/images/arrow.gif"> Line 2 Text<BR>
<IMG SRC="http://MYSERVER.com/images/arrow.gif"> Line 3 Text<BR>
Good luck with your web project!
- Hammer
Search Strategy
---------------
HTML bulleted list indent |
Request for Answer Clarification by
rservice-ga
on
09 Feb 2005 10:49 PST
I'm sorry, but this won't work for me. It's important that the answer
comes in the form of a CSS method.
I've tried the other methods suggested, including putting the image in
the LI tag and not using a UL tag, but that only gets a regular
bullet. It ignores the image.
Could you please remove this answer; it doesn't do it.
|
Clarification of Answer by
hammer-ga
on
09 Feb 2005 11:16 PST
RService,
I have no ability to remove the answer. If you are dissatisfied, you
can request a refund using the method described below.
http://answers.google.com/answers/faq.html#refund
- Hammer
|
Clarification of Answer by
hammer-ga
on
09 Feb 2005 16:53 PST
RService,
Just as a note, the syntax below worked perfectly for me in IE. I was
able to adjust the indent at will by changing the margin-left
specification. This also worked in Netscape, if I set the margin to a
negative number, such as -10px.
If there is a particular browser or combination of browsers that this
must work in, you may want to note which ones, so the next person can
test in that particular browser.
- Hammer
<HTML>
<HEAD>
<style type="text/css">
ul { margin-left: 0; list-style-image: url("Green_Square3312.gif")}
li { margin-left: 0; }
</style>
</HEAD>
<BODY>
<UL>
<LI>One</LI>
<LI>Two</LI>
<LI>Three</LI>
</UL>
</BODY>
</HTML>
|
Request for Answer Clarification by
rservice-ga
on
10 Feb 2005 09:21 PST
Hi Hammer,
The problem is that the solution I need must reside entirely in the
CSS file, not in any style tags or anywhere else in the HTML file.
|
Clarification of Answer by
hammer-ga
on
10 Feb 2005 10:11 PST
RService,
I provided the syntax inside a complete web page so it would be a
self-contained example. You should be able to use the same syntax
inside your CSS file. I just added the margin-left specification to
the example in your question and changed the image name to one I have.
If you add the margin-left to the UL definition in your CSS file, and
also add the LI definition as shown, it should work for you.
- Hammer
|
Request for Answer Clarification by
rservice-ga
on
10 Feb 2005 19:24 PST
Thanks -- good point. But I have tried putting it in the CSS file as
well and it turns my custom graphic into a standard bullet, and keeps
the indent (in both Firefox 1.0 and IE6). Here is the code I have now
in my CSS.
ul { list-style-image: url("http://MYSERVER.com/images/arrow.gif";
margin-left: 0; }
li { margin-left: 0;
line-height: 140%;
padding: 0px 0px 5px 0px;}
|
Clarification of Answer by
hammer-ga
on
11 Feb 2005 05:41 PST
RService,
CSS is very fussy about syntax and order. A semicolon out of place (or
similar syntax error) will cause it to ignore portions of your style.
The syntax below works for me in IE, Netscape and Firefox. I was able
to adjust the indent by changing the margin-left setting in the LI.
list.css
------------
ul { margin-left: 0; list-style-image: url("Green_Square3312.gif")}
li { margin-left: 0; line-height: 140%; padding: 0px 0px 5px 0px }
list.html
------------
<HTML>
<HEAD>
<link REL=StyleSheet HREF="list.css" TYPE="text/css">
</HEAD>
<BODY>
<UL>
<LI>One</LI>
<LI>Two</LI>
<LI>Three</LI>
</UL>
</BODY>
</HTML>
- Hammer
|
Request for Answer Clarification by
rservice-ga
on
12 Feb 2005 10:34 PST
Thanks -- okay this is working in IE6 now... is there any way it can
work in Firefox 1? I've requested a refund for the non-working answer
here and I'll be happy to have you answer it once it's reposted.
|
Request for Answer Clarification by
rservice-ga
on
12 Feb 2005 10:35 PST
Oops -- you ARE the original researcher! Sorry about that... I'll
close this one now, but would love to know if there's a way to make
this work in Firefox as well.
|
Clarification of Answer by
hammer-ga
on
13 Feb 2005 06:09 PST
RService,
As I noted earlier, this does work in Firefox. For
Netscape/Mozilla/Firefox, you can set the margin-left to a negative
number. As different browsers interpret certain CSS tags differently,
you may need to make browser-specific adjustments.
- Hammer
|
