 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / September 2007Possible to Change List Bullet Color?
I've got an unordered list with a list-style-type of 'square.' The color of this (and the text in the list) is black. Is it possible, via the CSS, to specify the color of this square (i.e. make the bullet red) without changing the color of the text in the list also? For example, setting 'color: red' makes the square and text red, but I want the square to be red and the text to remain black. I was hoping for a quick way of achieving this and would rather not specify a small gif image as the bullet-image. Thanks for any help. > I've got an unordered list with a list-style-type of 'square.' The color > of this (and the text in the list) is black. > > Is it possible, via the CSS, to specify the color of this square (i.e. > make the bullet red) without changing the color of the text in the list > also? Under CSS 2.1, no. [*] The current WD of the CSS 3 Lists module does specify the ::marker pseudo-element which would do exactly what you want; FF has been tested to not support ::marker and I doubt that either Safari or Opera has it. IE, of course, does not support it. [*] Not directly, at least. Wrapping a <span class="foo"> within each <li> element allows you to do this, but it is relatively hack-ish.  SignatureBeware of bugs in the above code; I have only proved it correct, not tried it. -- Donald E. Knuth You could make the bullet an image and then use something like the following to invoke it ... ul { list-style-image : url( "http://www.xxxxxxxx.com/bullet.gif" ); } ... Thom ___________________________________________________ Thom Little - www.tlanet.net - Thom Little Associates, Ltd. > You could make the bullet an image and then use something like the following > to invoke it ... [quoted text clipped - 7 lines] > ___________________________________________________ > Thom Little - www.tlanet.net - Thom Little Associates, Ltd. Yes, I was hoping to do it with CSS, but other than use the hack that Joshua posted, I guess the above is the most efficient and 'hack free' way I can do this. Thanks. spm schrieb: >> ul >> { >> list-style-image : url( "http://www.xxxxxxxx.com/bullet.gif" ); >> } [...] > Yes, I was hoping to do it with CSS, but other than use the hack that > Joshua posted, I guess the above is the most efficient and 'hack free' > way I can do this. Note, that browsers won't resize the image specified with list-style-image, when the user changes the font size. So on big screens with a high resolution (so big fonts) the image may look rather small. SignatureJohannes Koch Spem in alium nunquam habui praeter in te, Deus Israel. (Thomas Tallis, 40-part motet) Scripsit Johannes Koch: > Note, that browsers won't resize the image specified with > list-style-image, when the user changes the font size. Unfortunately, we have the same problem with the default list bullets, and generally with list markers. So I don't think this is a strong argument against using images a list bullets - though, theoretically, we can argue that browsers _should_ scale the default bullets (and markers settable with list-style-type) according to font size. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ Jukka K. Korpela schrieb: > Scripsit Johannes Koch: > >> Note, that browsers won't resize the image specified with >> list-style-image, when the user changes the font size. > > Unfortunately, we have the same problem with the default list bullets, Well, at least my Firefox 1.5.0.12, IE 7.0.5730.11, Opera 9.22 (all Win) resize the default list bullets when resizing the text. SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) Scripsit Johannes Koch: > Jukka K. Korpela schrieb: >> Scripsit Johannes Koch: [quoted text clipped - 7 lines] > Well, at least my Firefox 1.5.0.12, IE 7.0.5730.11, Opera 9.22 (all > Win) resize the default list bullets when resizing the text. Right, sorry, I was thinking about other matters... namely CSS. When I use the browser's font size control, then the bullet size indeed changes, but if I set, say, <ul style="font-size:300%"> (just to make a point [no pun intended]), the default bullets keep their size, resulting in a grotesque mismatch between their size and text size. The only way to make bullets get the same size as text is to make them part of the textual content somehow. Using :before pseudo-elements and generated content, this would be possible in pure CSS, but IE still doesn't support them. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > The only way to make bullets get the same size as text is to make them part > of the textual content somehow. Using :before pseudo-elements and generated > content, this would be possible in pure CSS, but IE still doesn't support > them. Or perhaps using an image inside the list item and dimensioning it in ems. Signaturedorayme dorayme : > Or perhaps using an image inside the list item and dimensioning it in > ems. Generally speaking, dimensioning images in ems, especially menu images containing text in fancy fonts and the like, makes them "zoom" together with the text if the user, e.g., presses the Ctrl key while turning the mouse's wheel. People with the sight problems common to most people over 40 tend to appreciate that when it is pointed out, and since many clients at the managerial level are over 40... SignatureJohannes "Quand on dit c'est un Johannes, cela vaut autant que ce que maintenant on appelle un pédant" (H. Estienne, in É. Littré, /Dictionnaire de la langue française/, art. PÉDANT) > dorayme : > [quoted text clipped - 9 lines] > appreciate that when it is pointed out, and since many clients at the > managerial level are over 40... Let me knock up what I had in mind ... something like: <http://members.optushome.com.au/droovies/test/imgBullets/imgBulle ts.html> or http://tinyurl.com/2v82ro which works as I expect in Safari 2 on my Mac. I recall things playing up a bit with em based images in IE but have no time to check now... Signaturedorayme dorayme : > http://tinyurl.com/2v82ro > which works as I expect in Safari 2 on my Mac. Works for me in Firefox on Ubuntu, too. Pressing Ctrl and turning the mouse wheel is fun. Except for one detail: since you have specified the padding px, not em, it doesn't quite scale right. Why use px? Ever? > I recall things playing up a bit with em based images in IE but have no > time to check now... It worked last time I checked. You only have a few font sizes available, 5 as I remember, and I have been told they don't work at all if you specify a font-size in pixels, but why would anyone want to do that? SignatureJohannes "Quand on dit c'est un Johannes, cela vaut autant que ce que maintenant on appelle un pédant" (H. Estienne, in É. Littré, /Dictionnaire de la langue française/, art. PÉDANT) > dorayme : > [quoted text clipped - 7 lines] > Except for one detail: since you have specified the padding px, not em, it > doesn't quite scale right. Why use px? Ever? Yes, I was in a big rush to get to my avo swim at the beach! em is the way to go. In fact, it was something that occurred to me when swimming (I swallowed some water on realization. In Oz here, it is salty). See how not all Australians think of sharks when in the sea? Signaturedorayme >> Generally speaking, dimensioning images in ems, ... > > <http://members.optushome.com.au/droovies/test/imgBullets/imgBullets.html> Nice! I had thought about dimensioning images in non-intrinsic ways, but never followed through to see. This might come in handy in other places where relative sizing is useful, but I wonder if treating a replaced element this way opens a Pandora's Box? William Gill : >> <http://members.optushome.com.au/droovies/test/imgBullets/imgBullets.html> > Nice! I had thought about dimensioning images in non-intrinsic ways, > but never followed through to see. This might come in handy in other > places where relative sizing is useful, but I wonder if treating a > replaced element this way opens a Pandora's Box? You could take a look at, e.g., http://esean.fr/004-la-vie-a-esean.xml That might open a few Pandora's boxes :-) The main problem I see in this site is that unless your browser groks XSLT, you won't see a thing (Safari should be all right), and of course, it may be difficult to understand what is going on from inspecting the sources, but please notice how the real estate is occupied no matter how you size the window within reasonable limits, and try to change the size of the text (in Firefox, just press Ctrl while turning the mouse wheel, I don't know with Safari), and see how the images follow, both the images which actually are meaningful content and those which are simply text. (I hate text images, as a rule, but the client insisted on an unusual font in the menu and the header.) In contrast, on http://esean.fr./114-reconstruction.xml the main image is not dimensioned in ems but in %. It therefore occupies as much space as possible no matter what text size the user chooses. SignatureJohannes "Quand on dit c'est un Johannes, cela vaut autant que ce que maintenant on appelle un pédant" (H. Estienne, in É. Littré, /Dictionnaire de la langue française/, art. PÉDANT) > You could take a look at, e.g., http://esean.fr/004-la-vie-a-esean.xml <snip> > In contrast, on http://esean.fr./114-reconstruction.xml the main image is > not dimensioned in ems but in %. It therefore occupies as much space as > possible no matter what text size the user chooses. I guess "proceed with caution" is applicable. > >> Generally speaking, dimensioning images in ems, ... > > [quoted text clipped - 3 lines] > places where relative sizing is useful, but I wonder if treating a > replaced element this way opens a Pandora's Box? Just one thing to note about this general technique, it is wasteful in that one needs to prepare pics that are bigger than are mostly needed. For the simple reason that scaling pics down is always more accurate than up. You will notice the bullet gif is unlikely to be ever used at its native size or above. Being bigger is an insurance. If you were tempted to use the technique for pics generally, there would be a mounting bandwidth overhead. Signaturedorayme > Just one thing to note about this general technique, it is > wasteful in that one needs to prepare pics that are bigger than [quoted text clipped - 3 lines] > bigger is an insurance. If you were tempted to use the technique > for pics generally, there would be a mounting bandwidth overhead. Thanks for the heads up. >> I've got an unordered list with a list-style-type of 'square.' The >> color of this (and the text in the list) is black. [quoted text clipped - 12 lines] > [*] Not directly, at least. Wrapping a <span class="foo"> within each > <li> element allows you to do this, but it is relatively hack-ish. Thanks for the explanation Joshua. I'll look forward to CSS 3 in that case, though I guess it'll be several years yet before the specification is even agreed, never mind supported by the major browsers of the day. Thanks. > Thanks for the explanation Joshua. I'll look forward to CSS 3 in that > case, though I guess it'll be several years yet before the specification > is even agreed, never mind supported by the major browsers of the day. > > Thanks. From what I have gathered from observing some of the specs, a sizable portion of CSS 3 is sufficiently stable enough to be worth reading and some of it even enjoys (sometimes) widespread support. The best example is Selectors, where everything but the pseudo-elements, and some of the pseudo-classes are supported in several browsers (IE and Safari don't appear to take namespacing into account--that is probably a special issue not wholly relevant here). I would be willing to bet that much of the actual RECs that come out of CSS 3 will have at least as much as the current WD states, the only exception being some of the thornier i18n issues. Support, though, is still mostly hard-to-find and in experimental regimes. SignatureBeware of bugs in the above code; I have only proved it correct, not tried it. -- Donald E. Knuth |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.