开发者

Tweet Button and Facebook Like Button appearing below menu bar in FF

开发者 https://www.devze.com 2023-01-15 00:56 出处:网络
My problem is that I have a menu bar with z-index 100, and two elements of that bar with z-index 1000 (Sorry, in the code, the z-indexes are actually higher numbers butt different by a factor of 10...

My problem is that I have a menu bar with z-index 100, and two elements of that bar with z-index 1000 (Sorry, in the code, the z-indexes are actually higher numbers butt different by a factor of 10... i realize this is bad practice, but i havent changed it yet because there are a few pieces connected). In firefox, the tweet button and facebook button always appear underneath the menu bar. it works perfectly in all other browsers. The live example is at my Los Angeles Food Truck Map. Here is some of the relevant code:

        #tweet_button{
            position:relative;
            left:6px;
            bottom:10px;
            z-index:100000000;
            }
...

    <div id="smoothmenu1">

<b id="tweet_button"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none" da开发者_Go百科ta-via="truxmap">Tweet </a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></b>
            <span id="facebook_buton" style="color:white;"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fla.truxmap.com&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="position:relative; left:10px;top:4px;border:none; overflow:hidden; height:35px; color:white;width:90px;overflow:hidden;z-index:100000000;" allowTransparency="true"></iframe></span>
    </div>

It may be important to note that I'm using GWT. I noticed that sometimes, the frame of the tweet button has one of the google ad sense ads superimposed upon it... i'm not quite sure why this is happening, but i figure its probably related to the solution.

Thanks a lot!!


<b> is an inline element and cannot receive position or z-index, therefore either you need to declare display: block; or change the <b> to a <div>. I changed it to a div in Firebug and it worked fine, you just need to change the postioning a little with top and left.

EDIT: You already have bottom and left, so tweak these :)

0

精彩评论

暂无评论...
验证码 换一张
取 消