0

I have the Tumblr Esquire theme. I've added some css and html to add social media buttons, using some code I got here. It works really well to line the buttons up in a row except that bullets are showing. The list-style-type: none; (or list-style) attribute does not get rid of it either in the head or the body.

Any thoughts would be appreciated. In the head I have this:

<style>
    .social-media-container{width:600px; margin:auto; height:10px;}
    .social-media-share-list ul div{width:250px;}
    .social-media-share-list li{display:ablock; float: left; width:25%; text-align:     
    center; margin: 0 auto;}
</style>

The body is like this:

    <div class="social-media-container">
    <ul class="social-media-share-list">
      <li>
        <div class="fb-like" data-send="false" data-layout="button_count" data width-                                                                                                       =              ="450" data-show-faces="false></div>        
        <div id="fb-root"></div>
         <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
           if (d.getElementById(id)) return;
           js = d.createElement(s); js.id = id;
           js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
           fjs.parentNode.insertBefore(js, fjs);
           }(document, 'script', 'facebook-jssdk'));</script>
    </li>
    <li>
        <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>                                                                       <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.in sertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </li>
    <li> 
        <div class="g-plusone" data-size="medium"></div>
    </li>
    <li>
        <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">
        <img src="http://assets.tumblr.com/images/iframe_reblog_alpha.png?4"/></a>
    </li>
  </ul>
</div>

A few items in the fb like code and the twitter button got cut off in this picture, but otherwise it's all there and I haven't changed the standard code from their sites for these buttons.

In the head section I tried list-style-type in the ul div section, in the li section even though it's supposed to go in ul. I know the css styling that's given the highest priority is inline so I tried it in the body, but might not have the right syntax. That should override anything else, but so far no luck.

This is what it looks like: http://the-nomads-prayer-book.tumblr.com

3
  • Can you then show as the link to the site, so we can spot the problem? Mar 30, 2013 at 17:28
  • Please try to copy the code again because without it we can't help you. Mar 30, 2013 at 17:28
  • You know that you must use that property like this ul {list-style-type: none;}, right? Mar 30, 2013 at 17:31

1 Answer 1

0

You may need to write a more specific selector. Something like ul#navigation li{list-style:none} Assumming your markup is something like

<ul id="navigation">
   <li>blah</li>
</ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.