[css-d] list line wrap
Hi, I am using li with a bull; in the bengining of each line of text. How can I make sure if the line is too long, after the line wrap the second line stays behind the bullet, not under the bullet? Thanks __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list line wrap
are you not using the list-style-image? it sounds as if your bullet picture is part of your actual html instead of a background image. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list line wrap
xhu1 wrote: Hi, I am using li with a bull; in the bengining of each line of text. How can I make sure if the line is too long, after the line wrap the second line stays behind the bullet, not under the bullet? Give the li a left-padding of the desired width, and then negative indent of the same width. This assumes you know the exact width of the bull; plus space though. Why not make the bull; an image and apply it in CSS by list-style-image:url(bullet.jpg); ? -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list line wrap
xhu1 wrote: I am using li with a bull; in the bengining of each line of text. How can I make sure if the line is too long, after the line wrap the second line stays behind the bullet, not under the bullet? Text-indent may work. Better to use the proper 'list-style-type'[1] and 'list-style-position'[2], as that will keep it all lined up properly. Georg [1]http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type [2]http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list line wrap
I am using li with a bull; in the bengining of each line of text. How can I make sure if the line is too long, after the line wrap the second line stays behind the bullet, not under the bullet? Give the li a left-padding of the desired width, and then negative indent of the same width. This assumes you know the exact width of the bull; plus space though. Why not make the bull; an image and apply it in CSS by list-style-image:url(bullet.jpg); ? Because list-style-image doesn't work properly cross-browser. Background image and padding does though: http://css.maxdesign.com.au/listamatic/vertical05.htm -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list line wrap
You can't across all browsers if you insist on using bull;. Instead use
an unordered list and then use list-style to set the type of bullet you'd
like to use.
If you don't care about maximum visibility across different browsers, you
could use the :first-letter or :first-line pseudo elements and given them
a negative margin, i.e.,
li:first-letter {
margin-left:-1em;
}
I don't recommend that.
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
Hi,
I am using li with a bull; in the bengining of each
line of text. How can I make sure if the line is too
long, after the line wrap the second line stays behind
the bullet, not under the bullet?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list line wrap
I am using li with a bull; in the bengining of each line of text. How can I make sure if the line is too long, after the line wrap the second line stays behind the bullet, not under the bullet? Give the li a left-padding of the desired width, and then negative indent of the same width. This assumes you know the exact width of the bull; plus space though. Why not make the bull; an image and apply it in CSS by list-style-image:url(bullet.jpg); ? Because list-style-image doesn't work properly cross-browser. Background image and padding does though: http://css.maxdesign.com.au/listamatic/vertical05.htm For the most part I agree with using background image for control but if you have any floated block to the left of the list, list-style image is going to give you the best result.( or in this case the bull;) If you really want to use bull; then put that in the li, set list-style-position to inside, and put a negative text indent on the li. use the margin and padding of the ul to get the correct spacing from other elements. For more info look up taming lists at A List Apart. Nick -- Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
