A List Apart: Comments on: CSS Design: Taming Lists

Posted by: davon

2012-01-31T13:00:49+00:00

> (the other character, \0022, is a space) Should be \0020. \0022 is the quotation mark.

Posted by: Tanya

2012-01-31T13:00:49+00:00

Corrected. Thanks!

Posted by: David Eisenberg

2012-01-31T13:00:49+00:00

I will probably use this article as a reference when I talk about "advanced styles" in my XHTML class. Although I'm not going to and re-author all my breadcrumbs in my existing pages.

Posted by: Erik

2012-01-31T13:00:49+00:00

Perfect! I was just wrestling with how to handle a list of links yesterday! Not only does this answer every question for my personal site, it solves a thorny issue for a menu on a site for my job. Thanks so much.

Posted by: Scott Allison

2012-01-31T13:00:49+00:00

I'm just saying somthing... this was okay. it's not like you need a big long article about it, but, it's cool. I'll probably end up using something in here sometime or another. Thanks ALA

Posted by: nurb

2012-01-31T13:00:49+00:00

Ala has been needing a good article like this for a while now.

Posted by: John Colby

2012-01-31T13:00:49+00:00

Thanks - I will also be including this on my reference list.

Posted by: Randi A.

2012-01-31T13:00:49+00:00

Can anyone explain why Mozilla (v.1.2a) only shows every other horizontal line in the real world example? Dump here: [img]http://tippetevling.net/ala/realworld.png[/img]

Posted by: Lach

2012-01-31T13:00:49+00:00

One thing I think this article lacked was a reference when using the class="first" and class="last" examples for specifically styling the first and last elements of lists. Instead of having to embed this in your HTML with an ugly class, you can use the CSS2 and CSS 3 selectors :first-child and :last-child respectively. Hence li.first becomes li:first-child (li element which is the first child of its parent element), and li.last becomes (li element which is the last child of its parent element). As far as I'm aware, it's only supported in Mozilla at the moment, but if you're talking about examples which only work in Mozilla and Opera, you might as well include those examples too. Apart from that, a great article Mark!

Posted by: Lach

2012-01-31T13:00:49+00:00

Oops, that should have read "li.last becomes li:last-child" yada yada.

Posted by: apartness

2012-01-31T13:00:49+00:00

Thanks, Lach. Maybe the reason Mark excluded those CSS2/3 selectors from his article is that they are poorly supported in many popular mainstream browsers and he wanted to offer only practical advice.

Posted by: Joe

2012-01-31T13:00:49+00:00

Nice article, it will come in handy in our work. One thing though, when viewing the article using IE6 the real world navbar jumps to the left on the page when the mouse enters. It then remains there without problem unless the page is refreshed and then it jumps again to the left on mouse over. I did follow the link to the Asset Surveillance site and here the menu stays in place. Why would this happen?

Posted by: Ray

2012-01-31T13:00:49+00:00

Yes, sweet article, I too noticed the jumping IE6 phenom, for what it's worth, it is IE6 on a WinXP box for me. No movement noted in NN6.2.3. And there appears to be no movement in IE5.5 on a cranky old Win98SE powered P166 either. Go figure.

Posted by: Ricky

2012-01-31T13:00:49+00:00

What are the differences between XHTML 2.0's NL and the good ole UL/OL?

Posted by: Ray

2012-01-31T13:00:49+00:00

While we're doing a forsenic exam, I also noticed in your first positioning example, where you set margin and padding to zero, and suggest - "Note that the markers lie outside of the DIV. If the containing box were the BODY of the HTML document, the markers might be rendered outside of the browser window, in effect vanishing." I noticed immediately, they vanish in both IE6 and IE5.5 anyway.

Posted by: Michael Efford

2012-01-31T13:00:49+00:00

The menu system doesn't jump when taken out of the ALA code framework, so maybe there is some conflicting styles somewhere that are causing the problem. Furthemore, the rollover effect seems sluggish on IE6 PC when viewed within the article, it's much faster when by itself.

Posted by: Liorean

2012-01-31T13:00:49+00:00

1. Why throw things into a div#button? You could move that part of the styling to the ul, maybe adding .menu so that you can have one or several lists of that type in the page along with regular uls. 2. One thing I found missing here is the definition lists. With definition lists you are from the beginning rid of the bullets, and can throw in a description of the link in the definition data tag. Then you can supply the user with two alternate stylesheets, one with definition data displayed, the other with it hidden. (Using a style switcher such as the one Paul Sowden presented in an earlier ALA article, or the one I created for my page. Or serverside. Or the mechanism built into mozilla.)

Posted by: James A Payne

2012-01-31T13:00:49+00:00

Heh, I noticed this article on ALA just after I was looking at part of w3c's XHMTL2 working draft... more particularly, the part about the nl tag. Great work :-)

Posted by: Dave Anderson

2012-01-31T13:00:49+00:00

The real-world example looks fine in Mozilla 1.2a Linux. Perhaps it is a Mozilla 1.2a Windows bug. You can always report a mozilla bug at http://bugzilla.mozilla.org/

Posted by: zachariah

2012-01-31T13:00:49+00:00

I have been using lists and css to make my menus for a while now, and it took a while to see how to make them do exactly what I wanted. The inline list is especially nice because it works in text-only as well as visual browsers. Most importantly it means we are using the proper markup for the data. Eventually if all the data on the web is marked-up properly, then search engines can do stuff like searching for lists with class "grocery" and qutoes with class "famous" or "thomas-jefferson" -- wouldn't that be nice?

Posted by: flounder

2012-01-31T13:00:49+00:00

I too, just yesterday, was again looking for a better solution for my menu lists. Thanks for the great article!

Posted by:

2012-01-31T13:00:49+00:00

Great article. I've been trying to implement ul for the menu on a design I've been working on. I'm having trouble creating a verticle navigation bar with a ul. Is it possible to have the list items to take up a percentage of the container div (say 14%) and display inline.

Posted by: Mark

2012-01-31T13:00:49+00:00

I'm glad the article is being of help to some of you - that's why I wrote it. As apartness noted, I'm pretty much into practical stuff, so I didn't go into CSS2/3 beyond the generated content (and that only because 2 of the 3 standards compliant browsers support it). I also didn't mention the proposed NL (which, from what I've read about it) will be quite nice once implemented by the browsers. As for DLs - they could take up a whole 'nother article them selves, and this one was already getting long. Maybe I'll write something up on Real World Style. Thanks again for all the kind words - glad you are liking it!

Posted by: Big John

2012-01-31T13:00:49+00:00

The missing button divider lines are caused bu a vertical rounding error, a problem that I covered in this demo: http://users.rraz.net/mc_on_the_rocks/testpage/mozshift.html IE has similar problems with absolute positioning.

Posted by:

2012-01-31T13:00:49+00:00

aaa

Posted by:

2012-01-31T13:00:49+00:00

remember www.w3schools.com for lots of web tutorials.

Posted by: Kevin W

2012-01-31T13:00:49+00:00

Definition lists actually do quite well with bullets (especially if you use a list-style-type such as square or circle that you don't see as much). I use definition lists everywhere on my site for changelogs, link lists, etc. and bullets really help when you've got multiple terms or definitions in one entry.

Posted by: Marek

2012-01-31T13:00:49+00:00

You talk about the power of CSS in your article. Thats nice and so but in real world simple things cannot even be put into CSS and therefore I think old good table-layouting is what will stay for 10 years, as css lacks much features, or maybe I am too ignorant to use them in which case you could post an example here or add additional paragraphs to your article covering my question... Ofcourse the navigation links are likely lists, but lets face it, I cannot do what I am told to do with CSS. Look at the http://my.tele2.ee/cadorsoft/vertcalinks.htm and say how do I suppose to have that bullet image v e r t i c a l l y centered to the LI contents, or the othe question would be - if thats impossible with lists+css, then how do I fake it with DIVs ? With Table-layouting this is a very simple task, but how the things should be done with css - I have NO IDEA!! Any feedback welcome...

Posted by: Dr. Noise

2012-01-31T13:00:49+00:00

I'm a web-design novice who is ready to learn. But, I want to learn it right, rather than just learn what I can to make it look good on my personal website. I think this article will really help me. I too, have created my menu using a table, JavaScript, and images. You can see it at http://fresco.freeyellow.com. Please be aware that all the non-compliant markup *will* make you cringe. Anyway, the rollover is really slow for me, since I have a dial-up connection, and I'd like to change it, since it rolls over fast and renders fast. My only problem is that my buttons use a freeware font called Neuropol, that I really like, and would like to keep if I can, but I know not nearly everyone who may come across my site will have it on their system. What's the solution to this? Just set the style to that font, and declare some back-up fonts for those that don't have it? I like the idea of separating style from content, but there *is* still the issue that I am presenting my artwork on the web, and I want my website to look the way I want it to look. Am I just being a web-Nazi here, and do I need to just loosen up and realize that it's not too big a deal? Please advise and thanks. ;)

Posted by: rephorm

2012-01-31T13:00:49+00:00

I had come across the idea of inlining lists to make horizontal menus a while ago, and implemented one example of such on my personal website (http://www.rephorm.com). It's good to see an article with more details and ideas. The results are very clean and managable menu source. To add an item, merely add an

Posted by: Uwe von Loh

2012-01-31T13:00:49+00:00

I´ve experimented some months ego with the matter. See http://www.hofthiergarten.de/ Shouldn't we use

and

tags instead of

or are they forgotten, deprecated or whatever? uvl 8-)

Posted by:

2012-01-31T13:00:49+00:00

I love rock & roll, put another dime on the jukebox baby. :-) http://www.porn.com :-)

Posted by: Noah Mittman

2012-01-31T13:00:49+00:00

Man, I'd been trying to solicit an article on this from ALA for months... glad to see the subject finally hitting the site. I recently got to design out semantic markup, XHTML and CSS into the recent redesign of [url="http://www.res.com"]RES.com[/url] -- We were in an incredible rush to match the re-launch of the magazine, so the templates are not as far along and I'd hoped them to be by launch, but we're continuing to update and refine them on a daily basis, pretty much. I think we hit the criticals: using styles on sematic markup like h1 and ul as much as possible, using absolute positioning and ordering main content at the top of the code for text and spoken browsers and slow connections, etc. There were some realistic compromises like using tables when certain table layout was needed and keeping the embed tag for flash (alt navigation is coming shortly). I would have liked to tap into pseudo-classes, multiple classes, and advanced selectors but they're not quite there yet. But there's enough in the browsers now that moving beyond Netscape 4 for our audience was a reality, and I'm hoping that it will help others either as inspiration, or at least a working example in a commercial site. :) Anyone know of any other commericals sites doing the same? I'm very curious.

Posted by: Bob E

2012-01-31T13:00:49+00:00

How about taking that real world example on more step? The next step is showing secondary menu items that are indented, and which are members of a list within a list. Home Hidden Cameras Wide angle Telephoto CCTV Cameras Employee Theft

Posted by: Dayn Riegel

2012-01-31T13:00:49+00:00

I noticed the IE6 "jump" as well -- and on top of that it causes the right-side menu on ALA to flop down to the bottom of the entire page, thus destroying the layout, in effect. To be honest, I've noticed this so-called "jump" effect on my own pages and just thought I was a sorry-a coder of CSS. So I guess now I'm a bit happy it isn't just me. Now, of course, I'm also worried that we've discovered an IE6/Win bug for CSS. In fact, just last night I was coding something, marked/coded an "a href" tag when added to a similar ALA-ish nav on my own quickly thrown together Web site and when I hovered over the mailto: the page jumped and bashed the nav all to bloody heck! Any thoughts? Do I experiment more, post what I got somewhere so we can iron this out? Suggestions? Of course, we could keep this off the list and via email for anyone that has suggestions, etc. since I don't know if my post here is totally on topic. Thanks! -_- D.

Posted by: Filipe Miguel Tavares

2012-01-31T13:00:49+00:00

Hi everyone! I'd like to know if one can move the strike line in relation to a character. I.e, with certain font familys, if you strike a 0 (zero), it will seem like an 8 (eight). Is there any way to prevent it? Thanks in advace, best regards, Filipe

Posted by: Dave Anderson

2012-01-31T13:00:49+00:00

Track the bug-fixin' action at http://bugzilla.mozilla.org/show_bug.cgi?id=171571

Posted by: Dave Anderson

2012-01-31T13:00:49+00:00

Check out the bug-fix'n action at http://bugzilla.mozilla.org/show_bug.cgi?id=171571

Posted by: Jason

2012-01-31T13:00:49+00:00

Isnt this extension already available? See: http://www.meyerweb.com/eric/css/edge/menus/demo.html

Posted by: Martijn ten Napel

2012-01-31T13:00:49+00:00

First of all, I want to say I'm very glad with the article and the way it shows what you can do if you push your CSS skills. Second of all, I want to say I'm 100% for seperating (semantic) markup from presentation, so please don't throw bombs at me for not agreeing on that either. but... So far I haven't read any discussion about the fact that the current state of CSS means you need to invest a lot to develop a technical skill. CSS is yet in an toddler state when it comes to user-friendliness. Let me explain: if you own a corporate website, you hire people to do the presentation (i.e. CSS knowledgeable people and/or designers), you hire people that take care of the back-end and you want a system that enables your (decentralized) content producers to add new content to your website like they would be typing a Word document, so no technical skills required. right? But the web is not a coporate place. Let's say you are an enthusiastic amateur historian and you know everything that happened to the place you live in since 1426. So want to share your enthusiasm and knowledge and you make a website on which you publish your latest discoveries. Our amateur historian is probably not a web-techniques-savvy person, so he or she does use, let's say MS Frontpage, to produce and maintain the website. Goodbye seperation of structure and presentation, unless they push the right buttons by accident. From an information point of view, that particular website could do very well with a good structured markup, so the likelihood that everyone in the world looking for the history of that particular place would end up on that website will be more likely. Am I right? Sadly, if CSS gets more developed and more and more professional web producers start to make all those wonderful pages where markup and presentation is perfectly seperated, the information sources like our amateur historian will be pushed further and further into the dark corners of the WWW. While the website itself could be a unique and high valued source of specific information. Unless Microsoft Frontpage will become so smart it produces the correct code. But my guess is that CSS (or any next generation language) needs to be developed into a more userfriendly tool first to be able to achieve that. Any opinions about this? And the implications for the WWW as a little less unstructered information source?

Posted by: apartness

2012-01-31T13:00:49+00:00

It's a bit off-topic, but what you're saying really comes down to a more basic fear that professionally designed and developed websites may marginalize less professionally designed and developed sites. In the case of your amateur historian, Google is the ultimate arbiter. If your hypothetical historian has written text and meta data with half an eye on the way search engines work, his or her site will get plenty of traffic from Google and AllTheWeb and other well-made search engines. If the content has merit it will retain many of its visitors, though if it's badly designed or has poor usability some percentage of those visitors will leave. Likewise if it's badly written many visitors will leave. But none of that has much of anything to do with the comprehensibility of CSS1 and CSS2.

Posted by: Robin

2012-01-31T13:00:49+00:00

Strange effects in IE6 seem to me to be common - I have an unordered list forming the menu down the left hand side at www.elandigitalsystems.com. I used CSS to make it change colors on roll-over and do other pretty stuff which is just great. However I did find that IE6 (and I think only IE6) knocks the top item in any list sideways. Unable to find any solution I followed a kind suggestion from the CSS-discuss list to include a dummy list item at the top of each list and set display:none for this item in my CSS. That seems to look OK but I wish I knew what causes the problem...

Posted by: Mike Combs

2012-01-31T13:00:49+00:00

Thanks for the article -- it's a very useful compilation and distillation of some valuable techniques. I want to disagree on your proposed HTML markup for breadcrumbs. Each breadcrumb should be a list item, not a nested list. If I give you directions to my house, it's a list of landmarks, not a hierachy of every street in the city. I think, though, that it should be an ordered list, since it's from top to bottom. Changing the order of the breadcrumb list would make a difference in the way it's interpreted. CSS would hide the numbers and use symbols, as you've shown. Just my 2 cents worth. I really appreciated the article because it so neatly traversed from theory to practical examples.

Posted by: Louis St-Amour

2012-01-31T13:00:49+00:00

In reality, however, you cannot compare breadcrumbs to real-world directions, since your "list of landmarks" is only going to ONE area--your house. Whereas online, a website will have many more destinations, and would therefore use a nested navigational style to sort them. Breadcrumbs are usually used in a directories, your suggestion would probably be more appropriate as a navigation bar--or for giving directions. ;)

Posted by: Spencer Fry

2012-01-31T13:00:49+00:00

I was thinking that ALA was slipping in content lately, but this was a fine article. Good work, ALA.

Posted by: Martijn ten Napel

2012-01-31T13:00:49+00:00

apartness responded at http://www.alistapart.com/stories/taminglists/discuss/2/#ala-1013 I agree it is a bit off topic, but you refer to the search engines. That was exactly what was on my mind. Is well structured (X)HTML not one of the best ways to climb the rankings of the search engines? And all of the other remarks about engaging writing - I totaly agree, but I had it taken as 'ceteris paribus' for the moment.

Posted by: Simon

2012-01-31T13:00:49+00:00

Mark's article is excellent. It will prove to be a useful reference for me in the future. I've always had to wrestle with lists a bit and now Mark has given me some good pointers to make things easier. I am looking forward to seeing what can also be done with the new element, to be introduced in XHTML 2.0: http://www.w3.org/TR/xhtml2/mod-list.html#s_listmodule Perhaps we will be able to enjoy JavaScript-free, drop-down menus sometime in the future.

Posted by: Simon

2012-01-31T13:00:49+00:00

Martijn ten Napel responded at http://www.alistapart.com/stories/taminglists/discuss/2/#ala-1019 Just to continue briefly with this "branch topic", Martijn says "Is well structured (X)HTML not one of the best ways to climb the rankings of the search engines? " I agree completely with this. A well structured document that is free of the bloat of presentational markup will probably get a higher ranking than documents that mix content and presentation because the information that is being sought will be more accessible to the search engine, as well as the user. I believe that using list markup for creating navigation menus is good move, but it is also probably a good idea to move this markup to the end of a document and then use CSS-P to pull it back up to the top, if at all possible. That means that users with screen readers (and the like) need not be constantly wading through a navigation list everytime they click to a new page.

Posted by: Randal Rust

2012-01-31T13:00:49+00:00

Mark mentioned that I started the thread at CSS-Discuss. I've been working with ULs for quite some time now to create menus. Mostly due to accessibility reasons. And one day, driving to work, listening to Ryan Adams, I thought to myself, "Why couldn't you make tabs with a UL and some CSS?" So I whipped something up, posted it to my site, http://www.r2communications.com/cssTests/tabbedMenu.html and posted it to the list. I was quite impressed in how people took it and ran with it. Great article, Mark.

Posted by: Eugene

2012-01-31T13:00:49+00:00

Uwe von Loh wrote in http://www.alistapart.com/stories/taminglists/discuss/2/#ala-999 Definition lists are perfectly fine and not deprecated. However, I find that they're missing something semantically. You see, there no simple validating markup possible to semantically group dts with corresponding dds. you can't wrap a

around each pair of

since dls can only contain dts and dds.

Posted by: Alexander Limi

2012-01-31T13:00:49+00:00

Great article, Mark. I would just like to note that the Plone Content Management System (which I have designed the CSS for) - http://www.plone.org - has had the type of CSS-generated tabs you describe here for over one year now. I am not claiming I invented them (don't know when Randall came up with his, and the two are probably unrelated "discoveries"), but Plone has used these since July 2001. Again, thanks for a great article, I really like the real-world examples, and you even taught me some new stuff I hadn't thought of :) -- Alexander Limi http://plone.org

Posted by: Alexander Limi

2012-01-31T13:00:49+00:00

(that should of course be 'Randal', not 'Randall', sorry about that :)

Posted by: Alexander Limi

2012-01-31T13:00:49+00:00

A typical tab group in Plone looks like this: [url="http://plone.org" class="selected"] Welcome [/url] [url=" http://plone.org/news"] News [/url] [url=" http://plone.org/download"] Download [/url] and the corresponding CSS is: div.tabs { border-collapse: collapse; border-bottom-color: #8CACBB; border-bottom-style: solid; border-bottom-width: 1px; padding: 0.5em 0em 0em 2em; } div.tabs a { /* The normal, unselected tabs. They are all links */ border-color: #8CACBB; border-width: 1px; border-style: solid solid none solid; color: #436976; margin-right: 0.5em; padding: 0em 2em; } div.tabs a.selected { /* The selected tab. There's only one of this */ background-color: #DEE7EC; border: 1px solid #8CACBB; border-bottom: #DEE7EC 1px solid; color: #436976; } and it ends up looking as the page on http://plone.org I think it is a smart way of creating a tab row for section navigation, and it degrades nicely too. And look at how extremely simple and clean the HTML ends up being :)

Posted by: Alexander Limi

2012-01-31T13:00:49+00:00

I forgot the enclosing

around the above HTML, but you probably figured that out by yourselves :)

Posted by: Lee

2012-01-31T13:00:49+00:00

Hi - is it poss to get the links centered between the pipes? In the example they are set over slightly to the left. Great stuff Mark Thanks

Posted by: kliertje

2012-01-31T13:00:49+00:00

thanks Mark, you css articles rock everytime

Posted by:

2012-01-31T13:00:49+00:00

. . . or do you need to use DHTML? Just curious, and learning slowly...

Posted by: Brainjar fan

2012-01-31T13:00:49+00:00

When there's this ( http://www.brainjar.com/dhtml/menubar/ ) CSS/JS menu that's fully cross-browser compatible?

Posted by: Leah

2012-01-31T13:00:49+00:00

Near the end of the article, Mark comments, "If you give the block an explicit width of 100%, then IE/Windows plays along. But doing this creates problems with IE5/Mac and Netscape/Mozilla." This is precisely the problem I've been wrestling with in my code. I have parent div wrappers at fixed widths, and inner divs with width set to 100% of immediate parent. In IE/Win AND IE5/Mac, everything lines up beautifully. In Netscape/Moz and Opera, it, of course, does not. I was wondering if anyone might be so kind as to point me to an article discussing this issue, and possible workarounds? I'd rather not resort to specifying all widths to the pixel, but will do whatever it takes to make the layout render readably in all major browsers. Thanks for your time, Leah

Posted by: Adrian Appleyard

2012-01-31T13:00:49+00:00

I'm sad to say that just about every example was broken in some way in IE 6 on Win2K. Good article, but ahead of its time. Or behind the times. Who knows?

Posted by: Munchkin

2012-01-31T13:00:49+00:00

This aarticle was great - Ive been trying to find a decent way to display my links and yet still make them accessible - thanks for this! - I too noticed the whole shifting thing in IE6 - good job that i use netscape at home (6/7) its alot faster :D

Posted by: shinya

2012-01-31T13:00:49+00:00

great article! got a problem though... when presenting a nested list as a vertical navigation menu for example:

[url="fruits"][/url]

[url="apple"][/url]

the nesting level indentation can be achieved by padding-left on li; however, with these paddings, is it still possible to changing the entire row background color on hover of the menu item li link?

Posted by: Louis St-Amour

2012-01-31T13:00:49+00:00

Re: http://www.alistapart.com/stories/taminglists/discuss/2/#ala-1003 It did it on my machine with WinXP and IE6, but on Windows .net 2003 beta it doesn't--I think it has to do with WinXP themes support, actually.

Posted by: amanda

2012-01-31T13:00:49+00:00

A very nicely-written tutorial. Often it's hard to just find a tutorial on the subject that you want let alone find one that is so clear. Thanks, Mark! You did an excellent job.

Posted by: Slime

2012-01-31T13:00:49+00:00

Shinya, I believe the example code you posted isn't valid HTML. UL's are not allowed directly within UL's; they must be within LI's. The only element allowed in a UL is an LI. UL's within UL's appear to be deprecated. http://www.w3.org/TR/html4/struct/lists.html#h-10.2

Posted by: macg

2012-01-31T13:00:49+00:00

This was a good article, but unfortunately seemed to miss the one point I haven't been able to solve. Image bullets don't seem to align *horizontally* to the lists. Even in the 2 examples, you gave the images are too high (on OS X, IE5). Unfortunately, the behaviour seems to differ between IE and N (not sure about Windows). Any ideas?

Posted by: Kevin W

2012-01-31T13:00:49+00:00

IMO, the inline lists one is unneccessary and the UL was not supposed to be used in this way. Why? Well look at the list without the stylesheet. It doesn't look like as it was intended because now you have two paragraphs and a block list in between. Structually, it is a single paragraph, the list is contained inside (which is invalid HTML), and structually, it is an inline list (for which there is no HTML markup), not a block list like UL. So I say it's best to leave the list unmarked. Also, by looking at the other lists without the stylesheet, you can form a clearer opinion about what's right and what's wrong. eg. For the breadcrumbs, the nested option is more "correct" than a single list IMO. When you look at it without styles, each item is indented more than the last, and looks well... right.

Posted by: Dylan

2012-01-31T13:00:49+00:00

I love working with CSS and would gladly throw out tables for everything except tabular data (which this article even gives alternatives).. but in the end I can't. I panic. I seize up. I create the page, it looks great in the three browsers I have access to, but I can't trust that it will look good in all browsers. What can I do? Do all you guys have a set of machines with different browser/OS/version combinations? How realistic is this for the average joe-blow? I would love a service where I could provide my URL, select an environment and receive a screenshot in my email. Anyone know of something like this? Any help appreciated.

Posted by: JIm

2012-01-31T13:00:49+00:00

I liked this article, good job. JimS.

Posted by: dave

2012-01-31T13:00:49+00:00

I resolved the problem of the intermitent line rendering in mozilla by moving the line border-bottom: 1px solid #90bade; from #button li to #button li a I did some other edits too that may have affected it, and I may have broken something else in attemting to fix it. But it does what I requre of it.

Posted by: Jobeleca

2012-01-31T13:00:49+00:00

With regards to the horizontal lines only appearing every other button in Mozilla. I copied the code and pasted it into a demo page, everything works properly there. I suspect that the code is in conflict with something on the ALA site.

Posted by: Jobeleca

2012-01-31T13:00:49+00:00

I am curious as to whether or not the margins and padding of a box can be colored. If so, that would dramatically cut down on the number of nested div boxes needed for some simple effects.

Posted by: Wolverine

2012-01-31T13:00:49+00:00

Here's another good CSS tutorial I found on the Internet: http://www.digital-web.com/tutorials/tutorial_2002-06.shtml It's interesting in that it uses an H1 tag for the name of the site (like a classic old style page) but refines h1 to include an image rather than text... Sounds wonderful to me. Alistapart folks - can you write a new tutorial based on the concept, you know, advantages and disadvantages, how to go around them. I like the h1 because it should help with the search engines... :)

Posted by: Alex Morales

2012-01-31T13:00:49+00:00

Ok, I've set up an inline list (unordered) as a menu across the top of my site. I placed it in a table cell (using XHTML transitional), and gave it a background color. The list shows up right in the middle of the cell in Moz 1.1, but it floats to the top in IE6. I changed the cell's valign to bottom but it doesn't do anything. Has anybody else noticed this?

Posted by: loki

2012-01-31T13:00:49+00:00

Excellent article, it certainly cleared up some design issues for me. One more question: How does one control the huge gap between the preceding text and the first list item in a basic page? ei: random text

item 1
item 2
item 3

any ideas? Thanks again!

Posted by: Kevin W

2012-01-31T13:00:49+00:00

RE: loki, http://www.alistapart.com/stories/taminglists/discuss/3/#ala-1051 Loki, just use: ul { margin-top: 0;} You might also want to do margin-bottom: 0 as well.

Posted by: Alex Morales

2012-01-31T13:00:49+00:00

Re http://www.alistapart.com/stories/taminglists/discuss/3/#ala-1050 Just figured it out, thanks anyways!

Posted by: Wolverine

2012-01-31T13:00:49+00:00

Can we have some article about Content Management Systems (like phpnuke, postnuke, etc) and CSS? These systems tend to be heavily tables based and it's a pain to get them to be pure CSS. Any hints and tips?

Posted by: John Pitcairn

2012-01-31T13:00:49+00:00

So ... how to handle nested lists - is there an HTML-compliant way of doing this? A

- ...

nested inside

isn't legal, is it? Advice appreciated...

Posted by: John Pitcairn

2012-01-31T13:00:49+00:00

My mistake ...

- ...

is OK.

isn't. Which is what I was trying to validate. Doh!

Posted by: katie

2012-01-31T13:00:49+00:00

I'm a CSS newbie and I'm confused by the example's use of the ">" character in the html>body selector. When I check that CSS code through Web Design Group's [url="http://www.htmlhelp.com/cgi-bin/csscheck.cgi"]CSSCheck[/url], I get this error: [blockquote]Selectors may contain only the characters A-Z, a-z, 0-9, Unicode 161-255, hyphens, or escaped Unicode characters as numeric codes.[/blockquote]

Posted by: Amarnath Santhanam

2012-01-31T13:00:49+00:00

Katie, The checker you used probably works with only CSS1 selectors. Compare CSS1 selectors at with CSS2 selectors at . You might also find this page useful: . It translates CSS selectors into plain English (or Spanish). Amarnath

Posted by: Amarnath Santhanam

2012-01-31T13:00:49+00:00

Links messed up in previous post, sorry. http://www.w3.org/TR/REC-CSS1#contextual-selectors http://www.w3.org/TR/REC-CSS2/selector.html http://gallery.theopalgroup.com/selectoracle/ Amarnath

Posted by: Fletch

2012-01-31T13:00:49+00:00

After 100s of failed experiments I have given in a am looking for help. Is it possible to use create something like this using UL and CSS. http://adamfletcher.com/ul/

Posted by: Alex Hernandez

2012-01-31T13:00:49+00:00

This one is just to thank you for all that good stuff you always give us. .::AleX::. Dominocode.Net

Posted by: Big Gay Al

2012-01-31T13:00:49+00:00

An excellent article that was exactly what I was looking for. Very useful and simple to implement. My only bitch would be Netscape 4.5 on the PC, it can't read it at all!

Posted by: Big Gay Al

2012-01-31T13:00:49+00:00

An excellent article that was exactly what I was looking for. Very useful and simple to implement. My only bitch would be Netscape 4.5 on the PC, it can't read it at all!

Posted by: Andrej Golovachev

2012-01-31T13:00:49+00:00

I advice all developers to keep their site's support for Netscape 4.x at functionality level. E.g. you design may crash, but all functions will be accessible. That's how were do now in our studio

Posted by: Simon

2012-01-31T13:00:49+00:00

Hi I'm following on in what I think is the spirit of the articles in using lists for nested navigation. How do the panel suggest I deal with navigation nested more than one level deep? ie: - Section 1 - section 1: subsection a - section 1: subsection b - section 1: subsection c - Section 2 - section 2: subsection a ...etc Assuming that the sections should be in list format, I tried the following and would appreciate thoughts, comments and feedback... Validation chokes on this:

Main Administration

[url="about:blank" target="_blank"]Summary Page[/url]
[url="about:blank" target="_blank"]Change Main Password[/url]
[url="about:blank" target="_blank"]Change MySQL Password[/url]
[url="about:blank" target="_blank"]Log Out[/url]

because the nested UL is not contained within an LI tag. However this validating code:

Main Administration
- [url="about:blank" target="_blank"]Summary Page[/url]
- [url="about:blank" target="_blank"]Change Main Password[/url]
- [url="about:blank" target="_blank"]Change MySQL Password[/url]
- [url="about:blank" target="_blank"]Log Out[/url]

does not look right (when unstyled) with the floating bullet above the first list.

Posted by:

2012-01-31T13:00:49+00:00

can someone please tell me the current background and link color being used on www.zeldman.com? the faq says that the stylesheets are freely available, but where are they located? thanks

Posted by: MacOpera 6 Beta Tester

2012-01-31T13:00:49+00:00

testing... 1 2 3 4 5 6

Posted by: grayrest

2012-01-31T13:00:49+00:00

Mozilla consistently has 1px rounding errors, as noted by Big John above. His page describes the problem well, the same thing can happen horizontally, as can be seen at http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html (look for the punchout on the right, the black border sticks out 1px) and on my defunct mozilla news page at http://grayrest.com/moz when the browser width is about 1024, changing the width causes this to fluctuate so if you don't see it try changing the width of your browser.

Posted by: MyDimension

2012-01-31T13:00:49+00:00

to the person who mentioned he had trouble getting list to be 14%: i have made a list which i use for vertical navigation. the list resides in a sidebar that is 20% of the body. here is my CSS for my list: ul.menu { width: 90%; list-style: none; margin: 0px auto 0px auto; padding: 0px; border: none; text-align: center; } ul.menu li { text-align: left; margin-bottom: 2px; } ul.menu li a { display: block; padding: 0px 0px 0px 1.5em; margin: 0px; border-left: 2px solid; border-right: 2px solid; width: 100%; } ul.menu li>a { width: auto; }

Posted by: John Keller

2012-01-31T13:00:49+00:00

Ok, first, I'm really liking the list+css combo for nav. However, I am having issues with inline lists. The one that is really bugging me is that there is a space between the list items that I cannot seem to get rid of when the list is inline. For instance, I have a list I've set to inline with each item having a border. There is a space between each item, outside of the border, of a couple of pixels. Is there a standard work around for this that anyone knows of?

Posted by: Chris

2012-01-31T13:00:49+00:00

Love the article. When supplying a custom image for the bullet via list-style-image or list style, is it possible to set the vertical alignment of that bullet? Currently, the custom bullet bottom is aligned with the middle of the LI text. I would like to get them both valign=bottom. Thanks, -=Chris

Posted by: Simon

2012-01-31T13:00:49+00:00

Hooray! Dave Lindquist solves the problem (see my post a couple above) very neatly, validly and accessible at http://www.gazingus.org/dhtml/?id=109 (and again) Hooray!

Posted by:

2012-01-31T13:00:49+00:00

Good eye opener

Posted by:

2012-01-31T13:00:49+00:00

testing 1 2 3 4 5 6

Posted by: Martin

2012-01-31T13:00:49+00:00

The nested list is logically a part of the first list item of the containing list. So the code you want is:

Main Administration
- [url="about:blank" target="_blank"]Summary Page[/url]
- [url="about:blank" target="_blank"]Change Main Password[/url]
- [url="about:blank" target="_blank"]Change MySQL Password[/url]
- [url="about:blank" target="_blank"]Log Out[/url]

Posted by: Arjen Meijer

2012-01-31T13:00:49+00:00

I think the design is very smart, but has just one flaw. We all have to write pages that look good in: a. browsers without css support (e.g. ipaq) b. browsers without javascript turned on (e.g. security bugs) c. browsers without proper dom2 support (e.g. netscape 4.x) d. browsers that support everything (For example, http://www.alforto.com, will display correct on all browsers.) Well, this design brakes on browsers with javascript turned off.

elements can not be accessed because they are hidden in the css and there is no way to make these elements display. Oke, change .menu{ display: hidden into block and problem disappears. But now script is not working right the first time. A related problem is that an

has no meaning with javascript, but without it has. It will try to load a html page. Has anybody a hint how to solve this problems? Arjen