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.
Related
I recently imported CSS Bootstrap into my website, so that I could add a toolbar to it. All went well, except that the text of my website now cuts off at the bottom. I set the overflow of the body to scroll, to no avail. The website scrolls a little bit, but then the scroll bar stops before the end of the content. If you zoom out on the browser, you can see all of the content.
The home page is a fairly long chunk of code, especially if I include the bootstrap, so I am not inclined to copy it here. Have any of you encountered this, and do you remember / can you suggest how to rectify it?
Some of you suggested a link, and you're right. Here is the page in question: http://www.zipcodeconquest.com/home.php
In your CSS, try changing your body height to "auto". Just a guess without seeing your code or a screenshot...
look for a white-space:nowrap or white-space:pre property. Your container might have one of these styles and forces your text content to be displayed in a way that overlap it.
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.
I have been trying to figure this out for a while,
I have a page with an element that has a position:fixed; It is positioned to top:0; and left:0; but when you scroll the page, it appears to scroll and dosent remain in the fixed position. If you use the "inspect element" feature on Safari or Chrome it highlights the element as if it is still in the fixed position.
I had originally thought it may be something to do with the fact that the page uses ajax to load content from a database and then uses an infinite scroll to keep loading content as you scroll.
You can view the page at: http://www.davidmcmenemy.com/bwg_shop/index.php
Any help would be great!
Thank you,
David
Your assumption about ajax is right:
Your question is maybe a duplicate of:
Position Fixed in Chrome
Answer:
chrome considers that the viewport of an element added to the DOM after the page is loaded (for instance, using jQuery.load()) is restricted to the containing div of this element.
Quote: https://stackoverflow.com/a/10849618
Try loading your site without javascript and the navigation will keep its position.
#Oleg Mikheev: Behaviour only occurs in Safari and Chrome. (should be a comment)
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
I have created a Wordpress child theme based on Thematic and I'm currently trying to debug the site in IE 6/7. My suspicion is that the problem is hasLayout, as that seems to be very common and the symptoms are congruent, however I have checked many of the broken elements and added hasLayout properties to those that did not already have them with no advancement.
I did have z-index set in several of the CSS classes, which I have now removed, and I'm wondering if any of you have some other suggestion about other debugging approaches.
The site is: http://032b4a6.netsolhost.com/WordPress/
I have posted here instead of the Wordpress forum as I believe my problem is more related to a standard CSS issue than anything specific to WP.
EDIT:
To detail the kind of errors I experience in IE6/7:
The header, which is an anchor with a css background property, pushes down on the search box, causing large gaps.
The nav displays as if it has an extra 75px of margin under it, causing another large gap.
The right sidebar is missing. It can be found just barely peeking from the left side of the container below the left sidebar.
The left sidebar appears to have an extra 15px of left margin, pushing it onto the main content div.
To check if a layout problem in IE6 / IE7 is hasLayout-related problems, I sometimes find it useful to use a rule like this for debugging - it's propably not something you want to use in your final stylesheet (as it will probably introduce new problems), but often it can reveal what elements needs to be given layout:
* {
zoom: 1 !important;
}
Welcome to the world of conditional comments and IE stylesheets: http://codex.wordpress.org/Conditional_Comment_CSS You need to tweak the CSS for IE and test with native IE, not browser shots.
Try taking the slider out for a minute to see if there is a CSS conflict.
And you have a few minor html errors, one having to do with an inline style sheet:
[Invalid] Markup Validation of 032b4a6.netsolhost.com WordPress - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.