I'm working on a theme for wordpress here http://mhutchinson.me.uk/ but a scroll bar is being added to the bottom of the webpage saying that the body content is wider than the page.
But I cant figure out whats pushing the content out. Does anyone know how to solve this?
Thanks,
Megan
This should be Your problem:
<iframe scrolling="no" id="f1830c0ce6ba962" name="f323631050eb616" style="border: medium none; overflow: hidden; height: 240px; width: 575px;" class="FB_UI_Hidden" src="http://www.facebook.com/dialog/oauth?api_key=153185341443233&app_id=153185341443233&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df4145651077ece%26origin%3Dhttp%253A%252F%252Fmhutchinson.me.uk%252Ffb320d27f95db6%26domain%3Dmhutchinson.me.uk%26relation%3Dparent.parent&client_id=153185341443233&display=none&domain=mhutchinson.me.uk&locale=en_US&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df24fe177267a76a%26origin%3Dhttp%253A%252F%252Fmhutchinson.me.uk%252Ffb320d27f95db6%26domain%3Dmhutchinson.me.uk%26relation%3Dparent%26frame%3Df1830c0ce6ba962&response_type=token%2Csigned_request%2Ccode&sdk=joey"></iframe>
You need to make this iframe width smaller.
If you just care about getting rid of the scrollbar, you can hack it out by specifying the overflow or width of your html or body elements.
Well if you really can't figure it out start with this before all of the other CSS:
http://www.cssreset.com/
Related
Hi there I am having trouble with a horizontal scroll bar appearing on my site, I have no idea why it is appearing. It only showed up when I was playing around with the footer however even after removing the footer it was still there.
The site I am working on is http://tritorial.com.au any help would be appreciated thank you.
Just add this in your css
body {
overflow-x: hidden;
}
if you are using w3css, make sure the width is 100% including the margins and padding
try adding clear:both; and overflow:hidden; to some items in your css.
I have an index page that includes both a left and a right iFrame. For some reason on the second iFrame it shows a scroll bar for its iFrame and another scroll bar for the whole page.
I have been trying to remove the scroll bar for the whole page and just leave the scroll bars for the 2 iFrames only
When I go and change the css property to overflow hidden for the body,html element it also removes the scroll bar for both iFrams
I have even tried to set the iFrame element overflow-y: to auto and the body,html overflow to hidden.
That still didn't work.
The second issue I am having is that the iFrame does not extend all the way to the bottom of the page even when I specified the height to be a 100% .
I have been fiddling with the CSS but go no luck so far. I would appreciate it if anyone can try to help me out.
Below is the link to my webpage, and the css snippet. Thank you!!!
html,body{ height: 100%; margin:0;padding:0; }
iframe{
height:100%; margin:0;padding:0; border: 0;
}
http://15c04752.ngrok.com/simplemenu/menus/demo (Text might be rendered smaller in different browsers please hit ctrl+ cmd+ on your keyboard to get the scrolling to show)
To remove the scrollbar for the whole page, add this rule:
body, html {
overflow: hidden;
}
To enable scrollbars on the iframes, add this attribute:
<iframe ... scrolling="yes"></iframe>
Source
And that's how it looks like, if you add both:
There is no scrollbar for the whole page, no scrollbar for the left iframe (because the content is fully visible) and a scrollbar for the right iframe (because the content is not fully visible). If you make the windows smaller, the scrollbar for the left iframe will appear.
I had a similar issue when using an iframe. The element containing the iframe was not long enough to justify a second scrollbar; its just a youtube video taking up about 600 pixels in height so I did not need a second scrollbar. The fix for me was just
html, body { height: 100%; }
in CSS. If that doesn't help my next best guess is to use webkit to just visibly hide them if all else fails.
I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.
I have a website based Wordpress and for some strange reason when I open it through my iPhone or any other mobile device I only see the background of the site and only if I scroll a lot to the right I can see the full site.
I attached a screenshot so you can all see what I mean or just try opening http://sivantalmor.com and see by yourself.
Is there CSS I can use to fix this problem?
I'm not 100% sure what's causing this, but this seems to work:
Add the overflow-x: hidden; property to your div#main
Like so:
<div id="main" role="main" style="overflow-x: hidden;">
</div>
Edit:
The problem is here:
<div class="audio-player" style="direction: ltr;"></div>
You could remove direction: ltr; that's the one causing all this. But then you'll have to fix some margins for the element wrapping the album photo.
The exact problem is in the audioplayer part (#soundcheck_audio_player_widget-2).
Inside is the link .jp-pause, which is positioned wide outside the div to the left.
This causes the page to generate a long scrollbar to the left.
You can add overflow: hidden; to this Class: .jp-controls-wrap
.jp-controls-wrap {
overflow: hidden;
}
It does the trick!
I was working on this website when I encountered a problem. It seems that if that when you scroll on the white sidebar on the left, the whole page is scrolls somewhat.
How can I stop this? I think the problem has something to with overflow, but I'm not sure how to resolve it.
You have a wpstats image on the footer which cause that scrolling.
Add the following to your css
#wpstats {
display: none;
}
If you notice, you'll see that except for a approximately 5px section in the bottom, the rest of the page is fluid, i.e., resizes dynamically as the browser windows resizes.
This annoying space is getting caused by an ill-placed image. The exact code responsible is:
<img id="wpstats" src="..." alt="">
To fix this, just add this code to your CSS files:
#wpstats {
display: none;
}
Or add it inline as so:
<img id="wpstats" src="..." alt="" style="display:none;" />
The width of your webpage is hard-coded and in this case is more than the browser width. You can add this to your CSS files:
body {
overflow-y: hidden;
}
which will basically just hide anything that goes out of the screen.
SO really needs to get CSS highlighting...