I have way too much padding at the bottom of my page and I have no idea why it is there. I have looked at Firebug in Firefox, but can't seem to find out which element is causing the extra padding. I know it will be really stupid, but I can't for the life of me figure it out. Thanks for helping out!
The site can be found by clicking here.
EDIT:
I just realized that this is an issue specific to Firefox. It looks like I would expect when I load the page in Safari. Any idea why Firefox would render the page with an extra 200 or so pixels at the bottom of the page (which causes the browser to have scroll bars when the page doesn't require them).
Thanks for the suggestions already given!
Check line 1197 of your stylesheet (styles.css).
The height of div.bottomLineContainer is being set to 200px. Try changing the value to 100px instead.
I just looked at the site. Remove
.cf:before, .cf:after {
content: "";
display: table;
}
It's on line 1361. If you turn off either property the extra space goes away. To find it I just methodically deleted each piece of html in firebug until the culprit was found, then started turning off properties one by one.
Nice site.
I would check the extra DIV statement you have listed below the contact us banner. Try removing them and see what happens. I will check on my end in the meantime.
It's your shadowbox which is causing the extra space, i tried loading the page without it and there was no extra padding on the bottom. Check documentation for the shadowbox.
Related
I have been searching about this problem from last week...all I could found is this " overflow-x :hidden "
Here is my site : seriesratings.com
when I open it in my iphone, it shows me horizontal scrollbar.
I tried this already:
html,body{overflow-x:hidden;overflow-y:scroll}
someone has told me this "You have inline styles all over your html that will not be properly fixed by using css"
I can not change style now because site is fully developed.
does someone has any other way, like hide horizontal scrollbar with jquery or JS or any other code.
At the sg-site-header-1 I found a H1 with an A tag in it, this thing causes the horizontal scroll-bar, why should you make a color #blank? This is not working, then make is display: invisible or something like that. Hopefully this will work for you!
#dutchsociety Thanks A Lot, you saved me, If you have time can you tell me how did you find out the solution to the problem, so I can do it by myself..
I opened my element inspector in Google Chrome and deleting sections of the website. So on that moment I deleted the header and saw that there was the long sized H1.
I am creating a website at the moment where scrolling will be disabled on the entire website (it's made out of sections, all are as tall as screen height except for 1 section, because that one is too large..).
I've been looking around to see if any plug-ins exist for this yet, but haven't had any luck, yet.
Would anyone know a plug-in or how to do this?
It would help me a great deal.
if all of your site has the style overflow:hidden then you can target the one section by id or class and make it overflow-y:scroll
ps the link you posted is a 404 error
You can use css to disable or enable scroll for a containing element by setting the overflow property to none.
However, in your case, I guess there is no reason for a script, you can simply set the overflow property in the style of the offending element.
Here's the code:
http://jsfiddle.net/tqkr9vyz/2/
function setScroll(elementName, s) {
document.getElementsByName(elementName).style.overflow = s;
}
I've been working on a personal website for a class project. I've come across some bugs in it that I can't seem to get fixed. You can find the website at bnb.im or at CodePen (the codepen is mostly copy and paste; I did the best I could with it).
So, the first problem is the white space to the right of the screen. I can't tell what's causing it--when I use the Select element feature on FF, it just selects <html>. I asked on another site, and someone said that it was caused by the animation of the portfolio items sliding in--I tried the fix they suggested, adding overflow: hidden; to body, but it didn't work (the page became unscrollable). I also tried making the portfolio items smaller (45% instead of 50%), but that didn't help, either. Any ideas?
The second problem is with the portfolio items and/or the social section. Whenever I try to add margin-top or margin-bottom to put some white space between the last portfolio item and the social section, nothing happens for the most part. The only time I've gotten it to work is when I put the margin-top on the social section to 200%, but it was too much so that won't work. Any ideas with this one?
Thanks a lot--I really appreciate you taking the time to read through this and (hopefully!) look at my site.
The first problem looks fixed to me? Did you figure it out?
The second one take off height:100%;from .portfolio
I have a problem where moving the cursor and clicking in text fields causes the page to show a wait cursor and also makes the page very unresponsive.
See this video for an example of it happening.
It only happens in IE7.
I've tried checking where I think it might be sending off ajax requests (thought this could be changing the cursor).
I've checked where I think multiple events may be firing simultaneously and tried commenting it out.
Has anyone seen anything similar happen and can point me in the right direction?
What is IE7's criteria for displaying the wait cursor?
Eventually I narrowed down the issue. After eliminating code bit by bit I deduced the problem isn't caused by JavaScript at all, it's a css issue.
The exact line of css is
overflow-y: auto
I don't know exactly the circumstances to reproduce it. But for a bit of info that might help others... The container the css is applied to is positioned absolutely. It has a fixed size (which also seems to be changed in JavaScript) and width. It's parent container is a div with display:block;.
Curiously if you scroll to the bottom of the container and back up it seems to fix the flickering bug.
A simple mobile landing page located here: http://happyappe.com/mms_Mobi
Not sure why, but when the About Us and Products pages are expanded the animation jumps past a certain point. Could anyone give me an idea as to why? Not all too familiar working with javascript.
Appreciate it.
I believe this is due to a known bug and the current workaround is to specify a solid width for the animated element. I tried setting one of your collapsible divs to 280px and the animation smoothed immediately.
Edit: Found what appears to be the bug ticket related to this issue
http://bugs.jquery.com/ticket/8370
The ticket has been closed and can't be fixed, the comment at the end reads:
Unfortunately there's not really anything that we can do on our end to divine the right height. Setting the width (as previously mentioned) will achieve the correct result - I recommend doing that in your scripts.