I'm trying to use the Twitter "Tweet" button on a site. It works great in all browsers, but in IE 7, it doesn't show the full width. There's no additional CSS in place, other than a little padding-left on the LinkedIn button for spacing.
Twitter have said that they fixed this issue a few months ago here, but I'm using the latest code from their developers site with no luck.
I've also tried the solution from StackOverflow suggesting to use .twitter-follow-button {width: 150px !important;}, but this also didn't solve the issue. The image below shows how it looks in IE7, with the text incorrectly cut short.
Any advice or suggestions of where to go next would be very much appreciated.
It looks like you are using the Twitter Share button instead of the Twitter Follow button. Therefore the used class as suggested by the quoted stackoverflow thread will not work. You should be using:
.twitter-share-button {width: 150px !important;}
The issue was a surrounding for the Twitter button that was being placed in-line, hence there wasn't a sign of it in the CSS. Thanks for your responses.
Related
My social icons are showing up as squares in the top right hand corner of my website. They are part of my menu. However, I have FA icons on other parts of my site and they are showing up perfectly. Any ideas how to fix this, simply? I don't have a lot of tech knowhow. My site is self hosted on Wordpress and I use IOS.
Please verify this two stuff:
1. Check if font-awesome is properly integrated on your website. You can view this by looking over page source and find if there is a link related to font awesome.It may look something like this but by different as well.
yourwebsite-directory-uri/font-awesome.min.css
Reference Link: http://fontawesome.io/get-started/
See if you have added font awesome properly using css.
.test-class {
font-family: 'FontAwesome';
content: "\f005";
}
Hope this will give you some hints.
Thanks
I am doing a very simple website, it's a private admin panel, it's also responsive and built around HTML5.
The login page has the standard Username and Password form fields that I have styled to appear just the way I want. I have tested this page in all 5 of the major browsers on my Windows 7 Ultimate PC (even though Safari for Windows is no more I still tested with the older version I have) and the page looks fine.
So then I grab my iPhone 4S and check the page...and the two input fields and their labels are not where I want them, rather it appears that it's just the Password label and input field. It's off in either rotation of the phone.
I have been scouring the internet for hours and am out of ideas how to reword my search query to get something of use. I have had no luck, so I copied the relevant bits of the site and made a sample website that can be found HERE.
If you resize the browser window, the inputs and labels stay where I want them. Only when viewed on the iPhone do they move from where I want them.
UPDATE
The page on which I'm having the problem has a center div that is only 300px wide, due to the fact there is so little on this page and thus no real need for the responsive action. The pages within the site will need responsive treatment, however. I mentioned responsive at the beginning of this post to be thorough. If I remove the viewport meta tag, the form fields are still out of whack, so there has to be something buggy with the iPhone version of Safari, right?
Any, and I mean ANY help will be supremely appreciated. I'm stonewalled.
Thanks!
You need media tags http://stephen.io/mediaqueries/ to resize the page for different screen sizes.
SOLVED
Well...after some experimenting, I found out that the float: left; I was using on the ``labels for Username and Password was the culprit. I changed float: left; to display: inline-block; and now the iPhone screen matches the desktop browser screen layout. Ye Gods, what a bit of headbanging. I hope this helps someone else!
I'm French web developer, i have 2 bugs to fix for my website, i hope you can help...
I have like button, send button, and comment on my website.
The two problems are :
in IE7 the facebook like ans send buttons are not displayed correctly, it's buttons of 15px width.
On IPad, when I click on the button, the button disappears.
I tried all the codes you propose but nothing is working.
Thank you for your attention and help,
The given example code works for me. As long as you add // becore connect.facebook
Test page:
http://jsbin.com/igikap/1/edit
Result in IE7:
http://www.webpagetest.org/result/120920_11_JAR/
Just installed sIFR into the site I am building (a personal portfolio site). When using it on pages with slimbox popups, sIFR overlaps the slimbox and makes it dificult to see the image. I tried applying a high z-index to the items I didn't want overlapped, but that didn't solve anything. Here is a screenshot of what it looks like (since my site is not online yet):
http://users.sephiroth.ws/DemonicGoblin/sifr.png
Is there a way to hide the sIFR when a slimbox link is clicked, or a way to adjust the z-index for a way to it not to be always on top? This happens on the latest version of all major browsers (I couldn't test Safari or Chrome though, even though I doubt it will differ)
I ahvent been able to find any information regarding this subject, so if it has been fixed in the sIFR beta it would be nice to know. Thanks.
In sIFR 2 you need to set the sWmode parameter to "opaque". This should allow HTML elements to be displayed on top of the Flash movie.
In sIFR 3, the parameter is wmode, though you can also use opaque: true.
Thank you so much - just saved my day.
I saw that lightbox break - so did I nearly:)!!!
But what a straight forward answer and solution thanks!! again
The file in mention is:
sifr.js
and put a code like:
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc: "http://localhost/ddddddd/templates/template/i_font_swf/carbon_std_swf.swf", sCase: "upper", sColor: "#86ca29", sWmode:"opaque", sBgColor:"#fff"}));
I just write it cause took me some time to remember where this setting initially was - when I did the sIFR long ago.
I've noticed this issue in previous versions of Firefox whereby after scrolling sIFR links become inactive and need to be clicked in order to become links again. The fix for this was fairly straightforward and just required you to add 'fixFocus: true' in the sIFR config.
Unfortunately when I upgraded to Firefox 3.6 this fix no longer works. I'm just wondering if anyone else has come across this and know if there's a workaround. We use sIFR links in loads of our sites so this is a pretty bad bug!
Thanks in advance if anyone can help
*update - it seems like it's the addition of using the wmode: 'transparent' - if i take this out the fix focus works again. Still a problem though as most of our links need to be transparent
Yea, it's a browser issue, and a rather old one by now. There's no better workaround available in sIFR.
A trick to make the sIFR links work fine in firefox when having the wmode set to transparent, is to add that CSS code to the class that is being replaced :
.fontname:hover {background-position:0% 100%;}
In this example, fontname is the CSS class that determines which tags are replaced.