Post Archive
› January 5, 2004
List Style Bullet Images
Robbert Broersma writes in to suggest a method of using list style bullet images for more advanced browsers that display them well (Not IE), and at the same time use background-image bullets for those that don't. A simple IE avoidance trick is all that's needed to provide both. I'm trying out this technique here at Web-Graphics (see bullets for list of items below). Here's the snippet of CSS that I'm using, the bottom two selectors are right from Robbert's email:
.nicelist {
margin-left: 10px;
padding-left: 0;
list-style: none;
}
.nicelist li {
padding-left: 14px;
background-image: url(/img/bdot.gif);
background-repeat: no-repeat;
background-position: 0 6px;
}
html[xmlns] .nicelist {
padding-left: 2em;
}
html[xmlns] .nicelist li {
background: none; /* undo the background-image */
list-style-image: url(/img/bdot.gif);
padding: 0;
}
From what I can tell it seems to work pretty well, anyone see any downfalls to using this method save a few extra lines of CSS? If you're interested, Robbert also has a number of interesting things to sort through, it's not yet organized into a website, but here's a list of stuff to be found there:
- javascript for sorting tables: /sort-table/
- javascript for alternate row colors: /alternate-row-color/
- javascript basis for a XML-based chatsystem: /xml-chat-i/
- the one _big_ thing: a remake of the large Dutch site tweakers.net in XHTML/CSS: /tweakers/frontpage.html (they currently use tons of nested tables)
This list of items found at Robbert's site, along with associated notes is quoted from an email he sent recently, and is used with his permission.
Comments
1. January 5, 2004 04:21 PM
2. January 5, 2004 04:28 PM
Nate Posted…
No it's not a stupid question Scrivs, I like the idea of using things the way they were intended to be used. Browsers known to play well with bullet images (as they should) get true bullet images, others get background treatment. Then again, using a hack to achieve this is a little bit weird. Perhaps this is not a good type of redundancy? For some reason it struck me as a good idea.
3. January 5, 2004 05:25 PM
The Dunce Posted…
This really got me thinking and I was going to write a comment about it here, but it started getting too long so I just wrote it here.
4. January 5, 2004 09:55 PM
Nate Posted…
Testing PRE tag in comments, which is now allowed.
class {
just:testing;
}You can now demonstrate your markup, css, and code when you comment by doing the following. Close your paragraph tag and add:
<pre><code>YOUR CODE HERE</code></pre>You also need to use:
< for < and > for >Is this too complicated? Yes, I think so. But that's what we have working for now.
5. January 6, 2004 02:34 AM
Anne Posted…
Another 'advantage' (Robbert told me that) is that you can now click on the images to select the content of the list item.
6. January 6, 2004 02:42 AM
Sander Posted…
I really think too much hacks like this will end the need for browser development. It's not the responsibility of the webmaster to compensate their individual website because for faulty browsers, that's comparable to make a special highway lane for cars who can't get the "round wheel thing" right and use square ones (while saying they are round).
So by introducing all these "make up for IE flaws" techniques MS don't have to update IE anymore because they will show customers that all modern sites still look exactly the same as on the alternative browsers.
And that should not be the long term effect of practical webdevelopment
7. January 6, 2004 05:17 AM
Robbert Broersma Posted…
Like this you'd use no redundant code (CSS as is meant to be) for 'the good', and we use a bug to fool Internet Explorer:
.nicelist {
padding-left: 2em;
}
.nicelist li {
list-style-image: url(/img/bdot.gif);
padding: 0;
}
* html .nicelist {
margin-left: 10px;
padding-left: 0;
list-style: none;
}
* html .nicelist li {
padding-left: 14px;
background-image: url(/img/bdot.gif);
background-repeat: no-repeat;
background-position: 0 6px;
}I think there is one better solution, but it doesn't validate, as far as I know:
.nicelist li {
list-style-image: url(/img/bdot.gif);
_list-style-image: url(/img/bdot-ie.gif);
padding: 0;
}8. January 6, 2004 11:37 AM
Paul G Posted…
Sander: It seems to me that since we can't expect a new version of IE until Longhorn comes out anyway, we might as well figure out how to get the POS we're stuck with to do things we need it to do. MS hasn't shown a tremendous proclivity towards developer-friendly products anyway ( 'user friendly' is pretty much synonymous with 'developer hostile', and MS makes most of its money on 'user friendly'), so I'm not exactly holding my breath for the new version of IE, either. *sigh*
9. January 6, 2004 11:44 AM
huphtur Posted…
exactly paul, who says all these hacks will be obsolete when longhorn comes out? maybe we will be stuck with these hacks "for life". i try not to use any hacks in my work, but sometimes you just cant get around not using them. so therefor its nice that we have em.
10. January 6, 2004 11:54 AM
David House Posted…
>Is this too complicated? Yes, I think so. But that’s what we have working for now.
< and > not allowed?
>I think there is one better solution, but it doesn’t validate, as far as I know
Pretty sure it does, Pixy says it will, although I'd like to make a couple of ammendments anyway:
.nicelist li {
list-style-image: url(/img/bdot.gif);
_list-style-image: none; /*not sure if this is the right keyword*/
_background-image: url(img/bdot_ie.gif);
padding: 0;}11. January 6, 2004 12:00 PM
huphtur Posted…
actually... i bet yall $1 that when longhorn comes out, all these hacks wont work anymore and IE still wont render correctly and new hacks have to be developed. erf, i think im going back to print.
12. January 6, 2004 12:17 PM
Robbert Broersma Posted…
Pretty sure it does, Pixy says it will.
There is a significant difference between a validating stylesheet and a correct stylesheet according to the CSS 2.1 specification - and Pixy never said the hack validates:
1. Underscore ("_") is allowed in CSS identifiers by the CSS2.1 Specification
By example, Pixy's example is correct...
#menu {
position: fixed;
_position: absolute;
}...but it does not validate!
13. January 7, 2004 07:25 AM
liorean Posted…
As I explained in wg:CSS: The Underscore MSIE-Only Hack, and as Robbert pointed out above, Pixy is wrong (and he did in fact say it was valid in that thread, if not on the page Robbert pointed to). There's a large difference between legal and valid, and he's confusing the two. That it is allowed only tells us that it may be used in a CSS identifier. However, what CSS identifiers are valid are presented in each of the CSS specs for their respective versions. Note that the CSS lexer is intended to be more general purpose than the CSS language itself, for reasons of both forward compatibility and for providing a grammar that also other languages, such as STTS, can built upon.
14. January 7, 2004 03:38 PM
Stu Posted…
Why use li ? Why not just links
http://www.s7u.co.uk/menus/menutwelve.html
15. May 14, 2004 04:42 AM
Mitch Posted…
Well, there us a chance to count Google, Yahoo, MSN, AOL and other backwards through UptimeBot Link Popularity Check Script
16. March 6, 2005 03:01 PM
ap Posted…
Sander, as much as i agree with you, as long as IE has the biggest share of the cake i'll be using these kind of hacks for my markup. It's either using hacks, or violating sementics. I simply cannot explain to my client (nor my boss) why his web site looks crummy in most of his customers' browsers in order to validate for something he never even heard of, let alone make him understand the importance of accessibility. I can hardly tame the graphic designers surrounding me.
Boy, does my life suck.
17. April 24, 2005 09:52 PM
madmaxx Posted…
First time posting on any of these threads, but I have to say that I always build my css to meet the specs of WC3 and have since been looking for hacks outside the "css hack" realm of possibilies avoiding IE's endless flaws with CSS. Lately have found myself leaving the problem to be solved by the back-end or scripts. (usually resulting in some minor redundancy or extra code, but nothing in comparison to some ill effects of non-valid css)
For example, I create all the CSS to handle the proper browers which don't suck for my include files. Then i make up a PHP function (like is_ie() or is_css_crap()) to determine what browser they are using. This way I can handle some last minute display modifications (usually just some style="w/e" inline CSS) if the user is determined to have the plague, errr IE.
The downside, of course, is that you might find yourself writing a lot of little scripts to handle display and they may drive you insane. But i'd rather deal with them in some way that doesn't cause the CSS not to be valid.
18. August 22, 2005 09:42 AM
Shawn Posted…
Stu said: Why use li ? Why not just links
Beacuse there is no semantic information in the markup you linked to?
It seems to me a set of links is a an unordered list of items. Do you disagree with this?
Scrivs Posted…
Might be a stupid question, but why would someone wish to use two different techniques for the same effect when you could just use one?