I've recently added a facebook like button to my site and it's causing a horizontal scrollbar to appear when it's not needed. It doesn't appear in Chrome but is there in Firefox and IE.
I've checked the created code in Firebug and can't see what's going wrong.
Here's a link to the site so you can see: http://www.swiftfurniture.com/
As you can see, on Firefox and IE (possibly other browsers too), there's a horizontal scrollbar when it isn't needed. It's definitely the Facebook like button causing it, because when I comment that out, they disappear.
I've added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.
I know there's plenty of other questions similar to this, but with using PrestaShop I don't really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the "social module" I've created... i.e - just one file rather than messing around with header files etc of PrestaShop.
I've looked into your problem a bit with Firebug and can share some observations that might be helpful.
There is code that is being injected into your <div id="fb-root"></div> and within that is an iframe with an inline style width of 575px.
That is what is causing the scrollbars.
You can add to the "fb-like" attribute data-width="100px"
The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.
You can resolve this issue by placing the fb-root div as the first child of your body element
<body>
<div id="fb-root"></div>
The script tag and fb-like div can remain in their original place.
Ref: Facebook documentation and bug report
I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.
Good Luck, hope that helps.
There is a DIV just after
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">
Remove position absolute from this and that horizontal scroll will disappear
after that it will show some content saying
Given URL is not permitted by the application configuration.
so either just remove this DIV or apply
display:none; to get this working perfectly
See this screenshot
having Problem see there is a horizontal scroll
having solution see there is no horizontal scroll but unwanted
content in circle.
applying display none; to this div or by removing this div
completely from the code, will lead you to the solution
None of the answers here worked for me so I tried it myself. I found a solution:
Put following CSS in your site head:
#fb-like-wrapper iframe {
width:100px!important
}
Put following HTML where you want to show your like button:
<div id="fb-like-wrapper">
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="false"></div
</div>
There you go :)
Add this to your css
.fb-like{height:20px}
Add attributes data-width and data-height to
<div class="fb-like" data-width="124px" data-height="20px"></div>
This also prevents the vertical scrollbar from appearing if it is not needed.
Related
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
I'm new to jQuery and to mobile applications in general.
I have an annoying problem with a jQuery theme called nativeDroid.
After adding forms to my page, whenever I click on the form (regular input or textarea) the
header and footer changes their location and stretches the page width.
It seems that when clicking on the text filed, another class is added to the header div.
the class name is .ui-fixed-hidden.
I viewed an identical question here but the solution isn't working for me.
I tried changing the .ui-fixed-hidden class so that it matches the solution given but the
problem remains the same. If any one can help me I would really appreciate it since it will
be a shame to give up such a great looking theme like this one.
I can't post any images yet but the problem looks identical to the one in the post I added.
Can anyone please help me out?
I am using PrimeFaces 5.0 final release, which means I am using jQuery Mobile 1.4.2.
I added data-tap-toggle="false" as recommended here (and in many other questions here on stackoverflow), but that did not solve my issue.
<div data-role="header" data-position="fixed" data-tap-toggle="false">
So, I also added the following, and this fixes my issue.
.ui-header.ui-fixed-hidden {
position: fixed !important;
}
Add data-tap-toggle="false"
For example, i used in this header, and worked for me:
<div data-role="header" data-position="fixed" style="height:87px" data-tap-toggle="false">
Home
<h3>Contact</h3>
<img src="objetos/logo_48.jpg" class="ui-btn-right logoHeader"/>
</div>
This has to do with the tap toggle function. When you click on the page, we set position: absolute; instead of fixed for the toolbars. You will notice this behaviour on this page that has more content: http://jsbin.com/erezak/25
So removing/adding that class is on purpose. If you don't want this you can set data-tap-toggle="false".
The problem is that we pull fixed footers 1px down to fix a 1px gap issue on Android. We also set 1px padding-bottom to keep the same visual height.
This is causing the text to jump 1px when we switch to position: absolute; on a short page (no scroll)
Other issue is that the border is not visible with position: fixed;, but becomes visible with position: absolute;
Ref: https://forum.jquery.com/topic/ui-fixed-hidden-on-click-event-1-1-rc2
I am using the following html to position anchors under a fixed menu:
<a style="position: relative; top: -150px;" name="services"></a>
This works fine in Firefox but ie, chrome and safari all load the anchors to a slightly different position, obscuring the text 'under' the fixed menu.
Does anyone have any ideas of how I could go about resolving this issue.
wip site is http://mattangel.com.au
Many thanks in advance,
Matt
When I make sites like this, I like to make sure that each "page" has a similar class, but different id. When styling the class, make sure you give the following attributes.
.page {
overflow: hidden;
margin-bottom: 1000px;
}
Adding the margin-bottom will prevent you from seeing the extra pages.
I also noticed that you are using jQuery for the slide to effect, I am not sure why you are using the styling for the a name. Just do the following:
<h1 class="page_title" id="services"><a name="services">Services</a></h1>
And make sure to wrap everything up in the page DIV.
You can view the issue on:
http://www.caterinaligato.com/
We can't reproduce the issue on IE7 or any of the Firefox versions. Using the DeveloperTool on IE8 its showing that the padding is inside the <div id="bannerArea">, however, we have tried #bannerArea * { padding:0; margin:0; display:block; } and that hasn't helped.
Please note that the 'Compatibility View' is off.
If anyone has any advise that would be great!
Start by adding overflow: hidden; to your BannerArea class. I'm not convinced that the star hack is necessarily the best option either. I would suggest removing that until it's proven that you absolutely need it.
Finally, make sure your <a> tag has its content all on one line. IE has historically had a degree of difficulty with the correct layout when anchor tags have line-breaks in the markup, displaying whitespace where there shouldn't be any.
Your line of markup:
<div id="bannerArea"><span class="bannerContainer first"><a href="#" class='banner-95 bannerImage' title='' rel='nofollow'><img src="/media/pics/site/imagecache/683C6A596432B154340F913300D76915.jpg" width="958" height="346" alt=''/></a> </span></div>
...splits the tag across three lines, which may be contributing to the issue.
use float:left for "bannerArea" it will reduce the white space in IE8, But the position will move right, need to reset the position.
I'm pretty sure this is happening because of your drop-down menu. If you add overflow:hidden to you "bannerArea" div, then the white space vanishes, but the placement is ruined. When added overflow:hidden to "nv" div, the image came back to it's place. So you have take care of the drop-down menu. Perhaps you can use scrip drop-down instead of pure css?
Amazingly, the title basically explains it. We have a page that our client made which we are in the process of recreating.
The pages height just keeps going until (I am assuming this) the browser hits it's limit. I have tried firebug and W3 validator and they have both not helped.
Could this be down to unclosed tags? Or maybe the fact that this generator that she has used has stuck ID's on script tags, THE HORROR!.
Any suggestions would be great, I need to try everything here. Thanks.
In your page source at line 193 there's this:
<div id="txt_2179" style="position:absolute; left:13150228px; top:1239624px; width:-832166px; height:-1239624px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<p class="Body-P"><span class="Body-C">LINKS</span></p>
</div>
Don't know what's setting that style to that position, but this is what's causing the problem. If you look in the very bottom right of your page you'll see LINKS
Is there any reason for this div to exist? You could just remove it or remove the absolute position elements of the style.
<div style="position: absolute; left: 1.31502e+7px; top: 1239620px; -moz-box-sizing: border-box; overflow: hidden;" id="txt_2179">
<p class="Body-P"><span class="Body-C">LINKS</span></p>
</div>
This. Is insane!!
Is just like the whole rest of the Position Absolute's that are throughout the html.
Even when there's overflow hidden, the declaration says: top 1 million 239 thousand 620 pixels HEIGHT and the declaration for Left is as obscure as a Medieval Manuscript.
If you delete that sentence the html fits in the body. Hope you fix the rest of crazy declarations as well.
I don't know. Maybe it's the 3 after the </html> tag (well, probably not). Try fixing the errors reported by the W3C validator.