I was trying to get my Twitter widget (adapted from the Twitter Fan Wiki) to show a profile icon beside my own updates.
My original code was:<style type="text/css">
.twitter_self {
background-image: url("http://www.blogblog.com/rounders3/icon_profile.gif");
}</style>
I used it like so inside the widget code:<ul id="twitter_list">
<li class="twitter_self">my update message</li>
</ul>
But what was this? The original arrow icons kept showing up!
After a little googling, I discovered Firebug, an amazing, free Firefox* plugin that, IMHO, all web developers should install. It allowed me to inspect Javascript-generated elements, among other things (like single-stepping through Javascript and live code/CSS editing), and I was able to confirm that my code was being overridden by the main skin style.
(* "Lite" version available for other browsers)
So I googled some more and found the wacky CSS: Specificity Wars page, which let me know that the spec saysID selectors have a higher specificity than attribute selectors.
Aha! So I fixed the code like so:<style type="text/css">
#twitter_list .twitter_self {
background-image: url("http://www.blogblog.com/rounders3/icon_profile.gif");
}
</style>
... and all was well. An easy problem to solve, but I learned something new.
Sunday, February 10, 2008
Firebug and CSS Specificity
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment