Mastodon

Firefox DOM Inspector

Send to Kindle

Yesterday, I raved about XAMPP in this post. In there, I made the following statement:

The other major thing that I don’t like (but which I suspect is easily fixable with a CSS tweak) is that the Sociable plugin formats the icons in a list (one per line) rather than as an inline string of icons, which other themes are doing correctly…

So, today I spent quite a bit of time playing. I enjoyed it, and it was instructive as well. I was able to easily change a bunch of things that I didn’t like about my previous theme. That said, I really like a lot of the Aspire (current) theme, other than the dark image background (which I can live with) and the note above about the sociable list not being inlined.

I decided to experiment in my new sandbox with the Aspire theme. I couldn’t find an easy way to see what css was controlling what element. A quick search said that the built-in DOM Inspector in Firefox could help resolve this. It wasn’t in my Tools menu. It turns out it isn’t installed by default on Windows. I reinstalled Firefox, selected custom, and voila, I had the DOM Inspector.

Once I inspected a page, it became obvious what the problem was. The Aspire theme defines an ID main. Then, in addition to default definitions of ul and il (unordered list, and list element), it also defines #main ul and #main il (specifically, an unordered list which appears in the main block, and the same for a list element in the main block).

The DOM Inspector showed me that the sociable.css was correctly being loaded, but that the way more specific #main selector was being applied after the sociable.css was parsed. As annoying as it is/was, there’s some logic to it. If a node can be defined ultra-specifically, and there is a css definition associated with that, then perhaps, you really want that to apply.

Unfortunately, the specific definition had display: block instead of the desired display: inline.

I’ll spare you the stupid gymnastics I performed, trying to over-ride that behavior. Suffice it to say that along the way, I tried doing something like this:

#main.sociable ul

ul#main.sociable

among other utterly useless attempts to get even more specific.

I broke down and sent a message to the current maintainer of the sociable plugin. Then, two minutes after sending him the message, while browsing formal docs for css, I stumbled on something.

In some of the attributes in the sociable.css file, he added !important to the end of the definition, in others, he didn’t. In the docs, I saw that normally, !important is used to signal to the browser that this particular attribute is important, and should be respected over a defaulted value. It’s primary use is to allow users to have stylesheets which over-ride authors stylesheets.

So, I thought, let’s experiment and add !important to the few attributes that weren’t already tagged as such (specifically, the display: inline one!). Voila! Now, even though the browser sees that #main ul comes after .sociable ul, it also knows that .sociable ul said that display: inline was !important, so it retains it!

There may be a better way to solve this problem (after all, this required me to edit the author’s version of sociable.css, which would get wiped out the next time I upgrade the plugin), but, without my sandbox (courtesy of XAMPP), I wouldn’t have found this one. In addition to XAMPP, I now also need to thank the Firefox DOM Inspector. 🙂


Posted

in

,

by

Comments

9 responses to “Firefox DOM Inspector”

  1. Comme une image Avatar

    I’m not a specialist in CSS but !important is also a common « hack » used to distinguish the buggy IE and other browsers.

    If you use FF, get that excelllllent plugin « Firebug » which allows you to dynamicly modify HTML and CSS code and see what happens in your page.
    WebDeveloper plugin is another famous and quite efficient tool.

    Then, also get IE-tab plugin to verify INSIDE firefox what your design looks like in IE.

  2. hadar Avatar

    Thanks for the tips! I have Firebug installed, and I considered using it to track down the CSS problem, but after doing the quick search, it seemed like DOM Inspector was a better choice for this limited problem.

    I will check out WebDeveloper. I know a bunch of people swear by GreaseMonkey as well, which I haven’t installed either.

    For IE, I use “view this page in IE” plugin. I know that I can use the one that you refer to in a tab, but I don’t mind launching the full real IE on rare occasions, even if I should care. 😉

    Thanks again!

  3. Free Content for your Website Avatar

    Why you do not want to use addthis.com for social network links? It saves lots of hassle and gives tons of statistics about bookmarks.

  4. air jordan 2 Avatar

    It looks good,I have learn a recruit!
    Recently,I found an excellent online store, the XX are completely various, good quality and cheap price,it’s worth buying! http://www.air-jordan-2.com/

  5. air jordan Avatar

    Stay at home and go sightseeing the world.Thank to the authors carefully describe about travel.Here are some sits about travel products.I hope you can help to recommend a tourist products for this season travel.

  6. air jordan 17 Avatar

    It looks good,I have learn a recruit!
    Recently,I found an excellent online store, the
    sall4.net
    are completely various, good quality and cheap price,it’s worth buying!

  7. mbt Avatar

    Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I m free and I find there are so much good information we can learn in this forum!
    http://www.mbt-outlet-store.com/mbt-women-shoes

  8. air jordan 5 Avatar

    Knowledge gives weight, gives glory to achievement, most people only see the glory, not to weigh the weight!
    http://www.from-sports.com

  9. air jordan 15 Avatar

    The post of content is very interesting and exciting. I learned a lot from here.The content from simple to complex, so all of you can come in . No matter you want to see what can be found.By the way ,there are some websites is also very wonderful,you can go and see.such as air jordan 16.5

Leave a Reply

Your email address will not be published. Required fields are marked *