When this page begins loading www.newedenfaces.com everything looks good. But as soon as two big thumbnails in the center are finished rendering, the footer is being pushed down. Well not the footer itself, but the footer's contents, the footer background still remains where it should.
If this issue was consistent across all browsers I'd have easier time tracking down the problem, but since that's not the case I just don't know where to start.
My first instinct was the use ofthis.$el.append instead of this.$el.html. Nope. Ok, it must be the "sticky footer" then where I use the trick similar to Bootstrap's Sticky Footer. Nope. I am out of ideas.
Screenshot of the problem (does not happen in Chrome): Footer content is pushed down when page is fully loaded.
Related
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I'm only noticing this in safari 5, but on most page refreshes, the second and third floated divs in the middle page content don't render correctly. The image gets cut off, sometimes the google font text doesn't display, sometimes the button gets doubled. It's very inconsistent, but a few refreshes and the issue comes up at least once.
site is at dev.axiomllc.com. I can't for the life of me figure out what is going on. It even works in IE7.
What it should look like:
What it does look like:
turned out to be an issue with the way safari renders font-face within floated content. Switched from floated to inline-block and problems were solved.
I'm developing a website in hebrew, and everything is fine in Chrome and Firefox (as expected), but I have an issue with IE.
When I place
direction:RTL;
unicode-bidi:embed;
the whole page gets shifted to the right, and a horizontal scrollbar appears.
On initial load of the page, IE loads it scrolled to the right side, so it looks good (no need for manual scrolling), but the horizontal scrollbar is there.
All the other elements are placed correctly and I can't find the issue. There is no element that would overflow outside the main wrapper, and the scrollbar is there only if direction:RTL is placed.
I can notice that the scrollbar appears near the end of the loading, but I don't know if there is some way to step through the loading of the page (something like breakpoint/debug/step).
I tested it on 3 different computers (IE8/XP, IE8/Win7, IE9/Win7, and also with http://netrenderer.com )
Some help/guidance would be greatly appreciated.
You can check it at:
http://southbeachsmoke.co.il/
http://southbeachsmoke.co.il/products/category/1
So my problem has to do with a Sticky footer that works, but a rounded corner script pushes the footer up a bit in IE7. (example: Games Page) If you load the page in IE7, the footer is in the wrong place, but if you do the following:
1. Open a new tab
2. Go to google.ca in the new tab (or do something)
3. Close the tab
The footer problem is fixed. I cannot wrap my head around why this is.
After writing this I found this article on stack overflow: IE CSS Bug - How do I maintain a position:absolute when dynamic javascript content on the page changes And this seems to address the same problem.