I have a strange issue with FB Like button integration in IE 7. A picture is worth a thousand words: http://i56.tinypic.com/140ajv9.png.
As you can see, FB buttons overlap dropdown menu when it is opened, so I suppose that it is has something with z-index CSS property.
Did anyone encounter something similar, and of course, can anyone give me some advice for solving this problem?
Thanks in advance.
Its a z index issue. Facebook button puts a z index of 1000 on the button. So to fix it add a z index of your own to your own div and give it a z-index greater than 1000. That will fix the problem
Have you tried placing z-index on the elements? What was the result? Also, try adding position:relative; as well if you are not getting the results you're after.
I had same problems with my menu, on hover it was showing the menu
and overlaped my FB like button.
My solution was this:
<pre>
<!--[if IE 7]>
<script type="text/javascript">
$(function() {
$('ul.menu-list li.dir').hover(function() {
$('div.fb-like').css("z-index", -1);
},
function()
{
$('div.fb-like').css("z-index", 0);
});
});
</script>
<![endif]-->
</pre>
Add this on the page where the FB like button is.
Related
When the page loads, the featured charts that are present in the page does not take up the available width and overflows their columns. However, when the window is re-sized or I try to investigate using Inspect element, the charts immediately snap into the correct dimensions. This behavior occurs in Chrome, FF, and IE.
I have tried the following with no results :-(
<div id="container" style="width:100%;margin: 0 auto"></div>
$(window).resize();
Please Help!!
I faced a similar problem, and I "fixed" the issue by delaying the creation of the chart:
setTimeout(function () {
$(element).highcharts({...});
}, 0);
More details there: Highcharts dynamic (re-)sizing in AngularJS tabs
I have a responsive site that uses the google translate widget. The weird thing is that for some time the widget now appears twice, and this seem to be related to the responsive design because if I place the same widget code on a simple html page it only appears once. I have no idea on how to solve this. Has anyone come across this?
Update.
I have discovered that this is caused by jquery.themepunch.showbizpro.min.js, if I remove that one the widget only appears once. I have not found a way to fix this yet but there might be a way. I found this piece of code.
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'sv' },
'google_translate_element'
);
/*
To remove the "powered by google",
uncomment one of the following code blocks.
NB: This breaks Google's Attribution Requirements:
https://developers.google.com/translate/v2/attribution#attribution-and-logos
*/
// Native (but only works in browsers that support query selector)
if(typeof(document.querySelector) == 'function') {
document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
}
//If you have jQuery - works cross-browser - uncomment this
jQuery('.goog-logo-link').css('display', 'none');
jQuery('.goog-te-gadget').css('font-size', '0');
}
</script>
This code remove the logo, so I'm thinking that if I use javascript I could check and remove duplicate occurrences of <select class="goog-te-combo"> then I would only have one left, is that possible?
This happened to me using Bootstrap. I had two instances of the Google Translate code - one instance for larger screen sizes and another that was only visible for smaller screens. Both showed up regardless of screen size. Bootstrap classes like visible-xs and hidden-xs do not seem to affect the display of the Google Translate button.
You can set a global counter and make sure it's only called once.
<div id="google_translate_element"></div>
<script type="text/javascript">
var duplicate_google_translate_counter = 0;//this stops google adding button multiple times
function googleTranslateElementInit() {
if (duplicate_google_translate_counter == 0) {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
duplicate_google_translate_counter++;
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Had the same problem on RoR. Problem caused by cashing pages with turbolinks. I solved it with deprecating cashing all links in (when script loading it adds attr "data-turbolinks="false" to the body-tag)
Hello to all! I had the same issue and I KNOW is not the best practice but I fixed it with CSS just adding overflow: hidden and a right border on it.
It visually fix the problem until we get a solution and really saved time diving into JS files. Hope it works for you too. Cheers!
I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear when accessing from Google Chrome.
I'm using this:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
Which has the same results (apparently) as:
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span{
width: 100% !important;
}
Question: How can I fix this strange behavior? (Why does it happen?)
Thanks for your time. Wether you do help me or not, have a nice to-day! :)
this worked for me: Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
This is facebook comment part-
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>
Just add this CSS bellow the div-
<style>.fb_iframe_widget span[style]{width:100% !important;}</style>
Just Insert data-width="100%" in the div
<div class="fb-comments" data-width="100%"></div>
You could use data-mobile atribute
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div>
I've a 200x200 px div in which I put a background-image.
The div is resizable and keep ratio.
In recent browsers, "background-size: cover;" or "background-size: contain;" works fine but under IE7, it doesn't work.
Does anybody have a suggestion / trick to fix that ?
Thank you very much in advance.
If the image is smaller than the div could you not repeat it using the following CSS?
{
background-image:url('bg.gif');
background-repeat:repeat-y;
}
If not, could you please provide a link to the deployed code.
Try jQThumb. It was built to fix background-size issue in IE6, IE7, and IE8
I've added the required tags, but it is still not showing. I've added this in head:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'lt', parsetags:'explicit'}
</script>
and this in the body:
<g:plusone href="http://www.fanuspinta.lt/katalogas/lietuva-mar%C5%A1kin%C4%97liai-31"></g:plusone>
At first I thought it didn't show up because I was using a local server, but now it's in production, and still not showing.
URL in case: http://www.fanuspinta.lt/katalogas/lietuva-mar%C5%A1kin%C4%97liai-31
Thanks for any ideas.
I used a html5 tag like shown here without the data-href attribute, dynamically added it afterwards (when the lightbox was loaded) and explicitely loaded the div containing the plusone code at the end.