• WordPress bleg

    UPDATE: The problem has been solved, thanks to the advice of a reader. The solution was to add the following to the blog’s style file:

    #TwitterCounter {
    display: inline !important;
    }

    What follows is moot, but I’m  leaving it up because … well, why not.

    ***

    I’m hoping someone out there can help me with this seemingly simple WordPress problem: If you scroll down to the bottom right of any page on this blog you’ll see this in the footer:

    I’d like these three counters to be displayed horizontally, not vertically. Yet, despite my myriad efforts to get them to appear that way, they always insist in stacking vertically. At some point I got two of them to appear horizontally, but never all three. Why? And what to do about it?

    Here’s the relevant parts of the code for the footer. Any suggestions how to modify for a horizontal display of the counters?

    <div style=”float:right;”>
    <script type=”text/javascript” src=”http://s20.sitemeter.com/js/counter.js?site=s20theincidentaleconomist”></script>
    <script type=”text/javascript” src=”http://twittercounter.com/embed/IncidentalEcon/ffffff/0100ed”></script>
    <img src=”http://feeds2.feedburner.com/~fc/TheIncidentalEconomist?bg=F5A9A9&amp;fg=444444&amp;anim=0″>
    </div>

    @afrakt

    Share
    Comments closed
     
    • I only see the reader count in the lower right.
      But then I’ve got NoScript running …
      Enabling JavaScript for just this URL (theincidentaleconmist.com) reveals the sitemeter to the left of the reader count.
      Then when I enable JavaScript for twittercounter, they get stacked as your image shows.

      My guess is that it’s something that twittercounter is doing.

      Looking at it in Firebug, it looks like their JavaScript is mucking about with the CSS but I’ve never been long on style — I live on the deadbolt end of the spectrum.

    • This is messy, but I think this should work:

      Basically setting each widget as a list item in an unordered list, then floating them to the left to make them horizontal.

    • You have three block level elements around each counter, this is the core problem. What you want to do is place one div around all of these elements, and then span elements around each counter.

      counter one
      counter two
      counter three

      This should lay them out in left-to-right order.

    • And my previous comment markup was eaten

      <div style=”float:right”>
      <span>counter one</span>
      <span>counter two</span>
      <span>counter three</span>
      </div>

    • Add this to your CSS:

      #TwitterCounter {
      display: inline;
      }

      Cheers,
      Zack