We Keep Coding

Website not displaying correctly in Safari and Chrome

I'm a complete newbie here. I have been trying to learn to code a site with HTML/CSS/JAVASCRIPT.
I am using brackets to code the site. The site I am practicing with renders properly with all css and javascript.
However when I open the .html file into safari or firefox it does not display correctly. I think it is probably a css issue as the html elements are all there.
I have other sites that I have made before that don't have this issue and I can not see where I have gone wrong.
jsfiddle.net/fs4g55m2/1 I'm using fullpage.js as well. If you notice the navbar works perfectly well. It seems to be the css after it that is corrupted (once you get to the body tag).

If you think it is CSS (and you are linking to external CSS file) try look into the network tabs in your browser's developer console to see if it is properly linked. Check to see if requested css file throw back 404 status (not found) - usually highlighted in red.
In chrome or Firefox (not sure in safari) right click on your web page and click inspect element - then choose network tab.
Hope that helps

how to make firefox stop downloading images once an event is performed

I have an application in backbone.js that displays thousands of images. Based on selecting a folder, the image that belongs to the folder will get displayed by hiding others. But the problem here is as soon as I open the app, the browser starts downloading every image as all images have source even though it is not displayed and thus it slows down the app. I fixed it in chrome and IE by removing the source of images that are not displayed so that the browser doesn't download it(I can add source later when it needs to be displayed by fetching the source from the backbone model). This works well in chrome and IE but not in firefox as firefox doesn't stop downloading the images even if the source is removed after loading the page.
I would really appreciate if anybody could give some suggestions on this to make this work in firefox.

Disappearing images in chrome

In a landing page for a chrome extension, after the user installs the extension I show a popup that has an explanation on how to proceed. The popup contains images (that are served from a different CDN), the popup uses css animations and transitions when it appears.
Sometimes (not sure exactly when), even though the images are loaded (and visible in the dev tools) they are not displayed in the popup. I have tried changing it from css background-images to elements, I've tried updating the images src after the extension is added, and also to remove some of the animations, but it doesn't seem to fix this issue.
http://live.rounds.com/x-factor/
has anyone encountered a similar issue and knows how to fix or bypass it?

I have deal with same issue and only that works for me was removing -webkit-backface-visibility:hidden; from animate.css body tag

JavaScript Prepended Content Not Showing On Anchor Click In Safari

I'm working on a project in WordPress that is utilizing the Theme Customizer to assist other people working on the site with me. We're dynamically loading in a lot of content and options like Google Fonts, so the loading of the Customizer takes a few seconds to fully load (lingers on the admin page, then after a few seconds progresses to the /customize.php page).
Because of this, I wanted to add a simple "Customizer Loading" message that would pop up to let users know that something was happening. Everything works fine in Chrome and Firefox, but Safari and Internet Explorer (as far as I can tell from testing in Sauce) are giving me problems.
I'm using the following bit of JavaScript to add the loading message:
$('a[href="customize.php"]').click( function() {
$('head').prepend('<style type="text/css"></style>');
$('body').prepend('<div id="loading-message"></div>');
});
Inside the <style type="text/css"> block I simply included my styles and then <div class="loading-message"></div> is where I placed my content.
What is happening in Safari (and again, IE from what I can tell) is that when ... is clicked, the styles and content are getting added to the DOM (I can see them when I inspect the page), but they don't actually become visible, whereas in Chrome and Firefox they do.
If I use e.preventDefault() on the link, the loading message shows up just fine. Other events, like alert() and console.log() register fine, and the link will continue on through as expected. It's only the new content getting added to the DOM that doesn't become visible.
I can't figure out exactly what could be causing this and would greatly appreciate any help. I tried recreating the problem in JSFiddle, but I couldn't replicate the same result I'm getting in the WordPress Admin Panel (if you change out $('a[href="customize.php"]') for any other slug in the backend like "themes.php", it has the same result though).

IE7 Animated GIF Appears as a Static Image?

After a button is clicked to start a process on my web app, I show a small loading gif (animated) that rotates to indicate to the user something is happening. I put the gif img in place of the button like this using JQuery:
$('#btn_holder').html('<img src="images/loading2.gif" style="margin-left:40px; margin-top:7px;" />');
This works great in all browsers (Firefox, IE8, Chrome) except IE7 on a windows server 2003.
In IE, the gif appears but it is not animated. What's going on with IE7? How can I test what the problem is?
Thanks all

Maybe it's a problem with your IE7, (this happened to me before)
To enable animated GIFs, select "Internet Options" from the Tools menu and then click the Advanced tab. Scroll down to the Multimedia section, check the "Play Animations" option and click OK. From now on, you should only see the first frame of each animated GIF that loads.
Remember that IE will need to be restarted for the changes to take effect.
Other than that, there's a couple of solutions here: IE7's inanimate gifs.

Does this happen for all animated gifs or only animated gifs loaded in by Javascript? Try going to the url for the gif and seeing if it is animated then. If it is then instead of loading the image into the button, why not load it in HTML, hide it with CSS visibility:hidden and then unhide it with Javascript?