LI vertical seperators

Following places an image among <li>'s but how can the first gif be omitted, since these are vertical separators that should only appear between the links.

#foot ul li {
vertical-align: middle; 
background: url(images/separator.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 3px; 
display:inline;
list-style:none;
}
#foot ul li a {
position:relative;
vertical-align: middle; 
color:#000000; 
text-decoration: none;  
padding-left: 9px; 
padding-right: 9px; 
font-size: 12px; 
font-weight: 500;  
font-family: Arial, Helvetica, sans-serif;
    }
#foot ul li a:hover {
text-decoration: underline;  
    }
#foot ul li a.active,
#foot ul li a.active:hover {
text-decoration: underline;  
}    

Which is declared as a <div> id:

Put a id on the first li and give it background none.

At the expense of laboring the answer, what gives here?

#foot ul li.nosep a {
background: none;
}

  <div id="foot"><ul>
  <li id="nosep"><a href="address-here">Home</a></li>
</ul>
</div>

This seems to remove the image/dot only when it is NOT inline (and declared in ul). These are:

display:inline;
list-style:none;

Well yes, that’s a solution.

I find it more graceful to use adjacent siblings tho.


#foot ul li {remove the bg image and left padding from here}
#foot ul li + li {
background: url(images/separator.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 3px; 
}


hope that helps ==:)

Actually what I posted doesn’t work.

Not sure how your solution would be placed within the li

Dresden’s solution (of li + li) is just saying “place the separator in any li that follows another li”, which is very elegant, as it leaves out the first li.

Thanks Dresden

(tested IE7 and Firefox 3.6.17, don’t know about others)

Should work in everything except IE6.

IE6 looks to be approaching 2% which is tolerable. According to this, IE total is around 25%, Internet Explorer Browser

IE 8/9 (14%/3%) I haven’t given much concern, though maybe they deserve it. Isn’t IE7 (5%) the stickler? Are there any “few things to look out for” with these recent versions? Rather than searching by property.

I never hear much about Chrome (26%), but considering its source – get the sense it’s very flexible when it comes to compatibility. Eh?

And correct me if I’m wrong, but isn’t Safari (4%) the major mobile browser?

With Firefox comprising the bulk now (around 42%) for those interested, again according to this source approximated. I remember the time FF was the one to contend with, now it seems to have switched to IE7.

<henghist>Threadjack, threadjack, threadjack… You’re all gonna die… die…</henghist>

Those numbers are for just W3Schools, a site for web developers – as such those numbers are NOWHERE NEAR what a mainstream website would expect to see as web developers tend to be a bit smarter than Joe Sixpack… that they even have IE traffic speaks to the site being web-rot nube bait, responsible at this point for as much bad code as Adobe or Microsoft… that has been preying upon the ignorance of nubes for years – many people who should know better STILL thinking they have something to do with the W3C (which they don’t!)

As a rule of thumb, the more business oriented your site is, the higher your percentage of IE tends to be – you’d think many businesses were still tied to in-house crapplets that only work in IE6 – the same businesses who won’t even upgrade to XP SP1 because it breaks their in-house stuff. (no joke, see the phone support centers for AT&T)

You’ll find that if you go for truthiness (that at least quotes sources)
Usage share of web browsers - Wikipedia, the free encyclopedia

The numbers are just a WEE bit different. It’s why W3Schools has that disclaimer on their stats?

Safari and chrome are the new kids in the mobile arena, and while their numbers have been impressive it’s been entirely from growth into new users barely making a dent in the actual user counts for other systems. But of course EVERYONE only talks percentages, ignoring the question “yeah, but a percentage of what”. When the size of the pool grows you can lose share and still grow in userbase.

See IE, which according to the average of multiple stats sits at 43.5%… out of 2.1 BILLION Internet users… If you bother to look at when IE had it’s whopping 95% of the market in 2004, there were only 800 million people online… Do the math – 95% of 800 million is 760 million. 43.5% of 2.1 billion is 913.5 million… meaning that while IE has ‘lost’ over 50% “share”, they’ve GAINED 153 million users. Don’t let percentages be used to lie to you!

Of course that’s before we talk tech saavy users being counted more than once by their using different techs or the same tech in multiple places, etc, etc… since share can’t currently actually be tracked by USER.

Much less that even if IE6 was only 2%, that would still be 42 MILLION people… It’s why I warn about people who say “well, this is only 2%, and this over here is only 3%, and this over here is only 15%” – a slippery slope that before long eliminates 100% of any potential audience.

In any case, the big dog in Mobile is still Opera. Yes, Opera… ranging from 25% to 50% depending on who’s numbers you read – Most of that can be traced to Opera Mini, which can run on any java enabled phone and provides a smoother/better user experience on all the cheap non-Droid-non-iPhone devices that “normal” people spend their money on. It’s also better when you have strictly metered plans as it consumes less bandwidth as the content is downloaded first to Opera’s servers, who specially pack it to consume 30-80% less bandwidth depending on the page.

Though Droid/chrome is cutting into both the iPhone and Opera’s numbers in recent months.

EEEEHT… Wrong. 42% of people who visit W3Schools.

Other sources tend to put it around 28%, though it’s often a debated number as there are features in FF like the pre-fetching thing that artificially inflates FF’s claimed usage in many tests – I know when I changed to tracking by user cookie on a high traffic forums I maintain, FF’s usage turned out to be half what most stats packages claims and is in fact lower than my Chrome numbers. (around 14% – but my site is weird, I have more Opera users than Safari ones)

You have to be careful drawing conclusions from percentages – your own and other people’s. It’s like this guy I was talking to about a year ago who said “Look at my stats, IE 6 has been below 1% for three years. I’ve never bothered supporting them and why should I?” – When my response was “I’m seeing >15% on my sites… ever think the reason you see so few of them is you don’t support them?” (though said site of his was horribly broken in EVERY browser and had a bounce rate in excess of 95%).

AS to the topic of the discussion, I’d suck it up and use the class instead of the adjacent sibling selector… but that’s because as a rule I don’t use that type of selector. Of course I’d put the image at the BOTTOM and have the class on the last one, but that’s usually because in my PHP it’s easier to detect last than first.

I’d also have to see the whole page in question, but from the CSS and HTML snippets I’m seeing I get the feeling the whole page is likely overbaked. If nothing else some property condensing wouldn’t hurt.

Who knows, if there’s nothing else in #foot I’d consider losing the DIV.

For the same token as one must look at the content first in order to develop an efficient , minimal and graceful coding strategy, one must look at the specific site’s ( or if its an as yet non existent site… the expected target audience) visitor record to determine te best support strategy.

Shadow is right business tends to default on IE (or rather their IT departments do… you could go to S&S and find that the “official” browser was IE, but that most employee,s at all levels, had gone ahead and installed FF). So, I guess I am trying to point out that micro audiences many times are the majority of a particular sites traffic.

Still , the ACTUAL issue is not IE support by developers but how far back is support needed for? By default I tend to WANT to say ALL features, for ALL users, for ALL browsers everywhere… (but that’s my inner idealistic child). That gets paired down to basic CSS and image support ( because on at least 4 separate occasions in the past 6 years the term “Mosaic support” has passed through my desk.) Finally there is grace of code ( vs features and flex). The client DEMANDS almost above all else to see a fluid boxes/ or “customizable width” boxes with rounded corners… on all browsers… no-js… including IE6… the same way you cant make Mosaic display images, you cant make IE6 understand modern (2.1) CSS… and this is not even beginning to talk about any IE BUGS. CSS techniques, like the one i mentioned in answer to the OP begin to fail. other useful low-tech selectors ( >, + , ~) are still reduced to hack tools. So it’s offen necessary to use classes and IDs and sometimes wrappers or semantically neutral tags. Anyway, what I am saying is you can either do that by default, skimp on the client requests OR learn about you specific audience.