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)
1 comment:
One method they do that 온라인 카지노 is by studying your betting patterns to allow them to} modify their very own betting strategies accordingly. Different games even have different guidelines, so essential to|it may be very important|you will want to} learn up in regards to the recreation before half in}. This will provide you with|provides you with} an concept as to how a lot you can to|you probably can} win and what might be} eligible to do with your winnings.
Post a Comment