You know the horizontal nav that often goes in the footer, the duplicate of the main nav? Whenever I’ve used a footer nav I’ve always tried to figure out some kind of clean separator to put between the list items. Usually it would look something like this:
Home | Products | Contact Us | About Us | Other
The problem was, if I put a border or background on each list item or link there would always be one extra either at the beginning or the end so it would look like this:
Home | Products | Contact Us | About Us | Other |
So, to try to fix the problem, I’d put a class of “last” on the last link and omit the style from that class. I’m sure some of you have done this too, right? I figured it was the only way.
Today I found a way that works much better, particularly when you can’t add a last class to your markup. It uses the ](after](http://www.w3.org/TR/REC-CSS2/generate.html#before-after-content pseudo class so it won’t work in IE but I’m sure there are a few brilliant people out there who can take this idea and come up with something for IE, no?
bc.. #footer_nav li + li:after { display:block; content: “.”; text-indent:-999em; overflow:hidden; margin-top: -12px; height: 12px; border-left: 1px solid #ccc; }
p. Lines 01/03 create a block element after any list item that comes after a list item in the footer nav. So, it won’t create a block element after the first list item because it doesn’t come after another li. Capiche?
Then, Lines 04-06 place some content in the block so it will appear on the page but we hide the content because we don’t actually want the viewer to see it, just the browser.
Finally, we style the block to get a separating line. Since the block comes after each list item, we have to raise the block up, in this case 12 pixels, to be in line with the floating list items. Line 08 tells the browser how tall the block will be and line 09 is the separator line itself. Make this any width or color you like.
You can even make a square between list items if you like. Try playing with a thicker border and a shorter height/margin to get a square.
Rick Beckman left a comment on July 12, 2007 at 10:19 pm | #
Why would you need to add content to it? Couldn’t you just do something like this:
#footer_nav li + li:after { border-left: 1px solid #ccc; }
So that any list item which comes after another will have a left border?
I’m confused as to why the block level styling is necessary.
Yannick left a comment on July 12, 2007 at 10:55 pm | #
Looks like a pretty decent solution Natalie, but the question I have is, does it work in IE6? I thought IE6 didn’t have pseudo-element support other than ‘:hover’ on links.
Natalie left a comment on July 12, 2007 at 11:41 pm | #
@Rick, try it! :) Yes, it seems logical, but it didn’t work when I did it because the placement with the floating li’s made the lines appear about 10 px south of the nav.
@Yannick, I briefly mentioned in the post that no, it will not work in IE at all, but I’m sure someone can come up with some other trick. This is all I could come up with in the few minutes I was working on it this afternoon.
Micah left a comment on July 13, 2007 at 8:52 am | #
@Natalie: Great find! I never knew about this psuedo-element. I’ll be sure to use it.
@Yannick: Chalk it up to another reason why we all hate IE. Golly Microsoft! Throw us a bone, here!
Tudor left a comment on July 13, 2007 at 10:30 am | #
It’s not the most accessible solution, but some folks make judicious use of DOM scripting to fill some of IE’s holes in CSS support. I remember on Snook’s old site, he had one section that was supposed to be ‘fixed’ while the rest of the page scrolled, and he ended up having to use JS to get it to work in IE.
Natalie left a comment on July 13, 2007 at 10:47 am | #
@Tudor, that’s why I need a JS guru on hand! :) I can tweak it when I have to but it’s really not my area of expertise. I’d love to see someone come up with something for this though because it’s something I’d use a lot.
Damian Karlson left a comment on July 13, 2007 at 12:07 pm | #
Natalie,
I’m working on a site that uses suckerfish dropdowns and hover states on things like li. For lte IE 6 support, JS just loops thru a DOM id and assigns a class based on mouseover/mouseout. Would it be possible just to grab the last element for a DOM id and assign a class to it that way? You’d have to add another class to your CSS.
Tanny O'Haley left a comment on July 13, 2007 at 12:46 pm | #
IE 7 supports the first-child pseudo class. While not perfect at least you get IE 7 as well as other more complient browsers. You could change your rule to: #footer_nav li { border-left: 1px solid #ccc; }
#footer_nav li.first_child, #footer_nav li:first-child { border-left-width: 0; }
On load or DOMContentLoaded you can use JS to add the class if you don’t have access to the markup.
// Get footer var el = document.getElementById(“footer_nav”); if(el) { // get array of list elements
var els = el.getElementsByTagName(“li”); if(els.length > 0) { // add class of first_child to first element
} }
I tried using pre. to format the code but it didn’t work.
Yannick left a comment on July 13, 2007 at 1:59 pm | #
@Natalie: So sorry about that, I missed that little snippet just above the code. LOL, I guess I was so interested in seeing the code and the explanation afterwards that I missed what you said about IE. :) Apologies.
Natalie left a comment on July 13, 2007 at 2:21 pm | #
Damian & Tanny, those are great ideas. I didn’t think of using :first-child. I’ll have to give that a try. At least ie7 would pick it up and hopefully more and more people are upgrading to 7 so maybe we won’t have to cater to 6 a whole lot longer. I know, wishful thinking. :)
About pre. I’m not sure why but it doesn’t work in comments. The only things allowed are basic strong, em, etc. I can’t even use @ for code. I’ve looked for info on beefing up comment formatting to include code but haven’t seen anything.
RE: the DOM, I love that we’re able to swap out classes and put them places where it’s not originally in the markup, but I also love being able to make things happen purely with CSS. I’d like to avoid using a class at all if possible. The first-child idea looks to be a good solution which allows this to be done with CSS and no extra markup.
@Yannick: love ya! :)
Michael Montgomery left a comment on July 13, 2007 at 2:50 pm | #
Since the release of IE7, I’ve used :first-child and don’t worry about IE6.
Also, isn’t there an IE7 script from Dean Edwards, that makes IE6 render like IE7 ?
Henning Riebe left a comment on July 16, 2007 at 2:53 pm | #
About pre.: I’ve noticed that Txp 4.0.5 has an option “comments_use_fat_textile” under advanced preferences. This enables at least pre. and @code@.
Natalie left a comment on July 16, 2007 at 3:48 pm | #
Henning, that’s awesome, thanks so much for that tip!
Attn: You may now use
pre.,@, andbc.formatting