CSS loading but not working on first load - ie7,ie8 - css

I have this head
<head>
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="<?php echo FO_CSS_PATH . 'all.css'; ?>" />
<script type="text/javascript" src="<?php echo FO_JS_PATH . 'jquery-1.8.0.min.js'; ?>"></script>
</head>
FO_CSS_PATH and FO_JS_PATH is correct and fully working on all other browsers.
First of all when I click on a link and open new page, the css is fully loaded (I can see it in developer tools from ie). I don`t think I have any error in my css because if I press F5 (refresh), the page is fully loaded.
So, when I open a page, the css is loading but not working. If I press F5 it is fully working.
PS. I found the same problem on this website: http://forums.asp.net/t/1180199.aspx/1/10, but i'm not working with ASP and there I didn't find a good solution.

First, try with the actual path of the CSS file (no PHP at all) to see if the problem persists. If so, double-check if the problem occurs on another PC with the same version of IE. If the problem is still there, you will have to try another new CSS file that you just created with some random properties just to test.
If it still not work only on some specific versions of IE, I would check for the charset used to create your file (with a great text editor like notepad++). Be sure that the charset used to save the file is the same as the one declared in your php header() or html meta.
It really looks like IE isn't detecting properly the charset of your CSS file or your PHP/html page. When it refreshes, it now detects properly.

Related

My CSS file won't update on Safari Browser

I have tried refreshing and clearing the cache but it still shows the same old file with no changes. Meanwhile every other browser will show the change made in the css file. I changed the name of the css file and upload it and Safari notices the change and applies it. I don't want to have to change a name file every time. Does anyone know a better solution?
You can add to the end of the file
style.css?v=1 or style.css?v=1.1
works for me
or <link rel="stylesheet" type="text/css" href="<?php echo $filename;?>?v=<?php echo $fileModified ; ?>">
I am solving this issue by appending Last Modified Date of the CSS file as a query parameter, like this:
<link rel="stylesheet" href="/wp-content/themes/wannacat/style.css?ver=1631280487" />
With PHP, you can get it like this:
$version = filemtime(get_stylesheet_directory() . '/style.css');
When the file is updated, Safari (as well as all other browsers) will recognize that they need to fetch the latest version of the file.

CSS not loading after server change - Social Engine

Hey I am working on a Client's website that is built using Social engine , there is one weired issue I am facing.
Let me explain :
The website was working fine at original url let say www.abc.com , but as soon as I changed the url and tried to access the website from IP address associated with it, it was still working but just the home page and all other pages aren't loading some CSS/JS files .
I tried to move everything to my local server , but that couldnt help either and same issue was there at local server.
please see the image http://prntscr.com/860xmq
I am trying to fix it from last week but no luck please advice me how I can fix this issue.
Thanks
What is the problem
From the Screenshot it is clear that few of the .css and .js are not found i.e., it is not pointing to exact path.
How to fix it
Make sure that you are pointing it to correct location.
Note :
Make sure that you have used the correct path i.e.,
For CSS :
<link rel="stylesheet" type="text/css" href="css/yourcssfile.css">
and not something like
<link rel="stylesheet" type="text/css" href="localhost/yourprojectfolder/css/yourcssfile.css">
if you use PHP, then you can add this :
<?php
$base_url = "http://".$_SERVER['HTTP_HOST'].preg_replace('#/+$#','',dirname($_SERVER['SCRIPT_NAME'])=="\\"?"":dirname($_SERVER['SCRIPT_NAME']))."/";
?>
<link rel="stylesheet" type="text/css" href="<?php echo base_url; ?>css/yourcssfile.css">
so when you change your server name/domain it will adjust automatically.

CSS not working locally in my computer

I'm using Bootstrap to develop a website and recently I asked here a question because some custom simple lines in CSS weren't working. I discovered that using development sites such as jsfiddle or codepen, the code works but I can't still get it working in my computer.
Do I need to install do something or install something? I thought it could be an issue of not using a web server, but I've just installed XAMPP and nothing...
In the end, I'm using XAMPP, with proper path xampp_path/etsit/index.html --> localhost/etsit/index.html. This doesn't work, there's no error in the cosole. When I just click in index.html to open it with the browser, it doesn't work either.
For bootstrap, I just add these links to the body (JUST FOR YOU TO KNOW I HAVEN'T DOWNLOADED BOOTSTRAP BUT I'M USING CDN):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
UPDATE
Sample in codepen and jsfiddle that work.
The original (it's the same code) you can find it in these other post I made.
UPDATE 2
Please, read the post entirely before editing my question and marking it as duplicate, not noticing that same question is mine and has been referenced twice in the post....
Based on your answers in the comments section, it seems as though you are not loading your CSS file. You've stated that you do indeed have a link to it in your in your code. So either a) that link is now gone (in which case you would not see it at all in your dev tools' network tab); or b) the link is incorrect (in which case you would be getting something like a 404 error in your network tab). Make sure the path to your CSS file is indeed correct and that it exists at the location that you are defining.

Changes I make to CSS file don't reflect in browser for Wordpress

This is my first time creating a WP template. I used this tutorial: http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/
I am editing the style.css file that is in the template folder (WCCB Theme - Copy). It is on XAMPP, a local server, so there is no FTPing anything. I edit the file, and refresh my browser and nothing happens. Currently I only have one style in there, making H2s red, and the rest is blank (except for the header comment). Not sure what I'm doing wrong.
1: When I view the source, the file is listed as a stylesheet that is applied.
2: When I go directly to the URL of the file the browser can find it.
3: When I use the developer tools to inspect my H2, it says only user agent styles are being applied.
Initially it appeared as a caching issue, but I have cleared my cache (Chrome). I have no idea what is wrong. How can I get my CSS to udpate?
Go to the template folder (usually under: /var/www/html/wp-content/themes/<your theme>) and edit the file: header.php (don't forget to back it up first!)
replace the line:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />
with:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>?v=123" media="screen" />
and refresh the page.
If it wasn't refreshed and you're using WP Super Cache - delete the cache.
Still didn't refresh? run from prompt service httpd restart (it restarts the Apache) and try again.
Worked for me!
I know I had problems like that before. Try ctrl+f5 to do full reload.
Not sure how I fixed this. I deleted the template from the WP admin panel and added it again with a different name and some CSS changes already made. It worked. Now I can change my CSS file and refresh my browser and the changes appear. Not sure what happened.
What I usually do is open the page on the Incognito Mode(Ctrl + Shift + N) - if you are using Mac (cmd + shift + N).

lightbox and slimbox2 doesn't work with composite c1

I'm trying to use both lightbox and slimbox with Composite c1 v3.
Neither works.
I have installed the relevant packages and I have set correctly the parameters for both functions.
The result is that when I use lightbox both thumbnail and the picture appears on the page.
When I use slimbox2, the thumbnail is fine but the picture opens to a new page.
I have tried it both with IE 9 and firefox 9.0.1 with the same result.
As far as Composite C1 is concerned, I'm working on Omnicorp example site.
Anyone with the some kind of problem?
I just tried the Slimbox2 package and it worked for me in Chrome and IE. I had success installing the package, going to a page in Content, and inserting the function. Then I picked the Media Folder parameter, and set it to be a constant and selected a folder path. Once published, the slimbox behaved as expected. I am not working with the Omnicorp demo, however.
The behavior sounds to me like some part of the script isn't loading or is loading in the wrong order. Does the Omnicorp site, or another package have conflicting jQuery import(s) in the head section of a published page?
Looks like the packages have a bug, when site is running in sub-folder the javascripts files are not loaded.
Do you run your site in subfolder?
Try to fix this.
Go to Functions perspective -> Xslt functions -> locate function Composite.Media.ImageGallery.Slimbox2 -> edit its template and fix links to the files, add ~ at the begin:
<script id="slimbox2-js" src="~/Frontend/Composite/Media/ImageGallery/Slimbox-2.04/js/slimbox2.js" type="text/javascript"></script>
<link id="slimbox-2.04" media="screen" type="text/css" href="~/Frontend/Composite/Media/ImageGallery/Slimbox-2.04/css/slimbox2.css" rel="stylesheet" />
also locate function Composite.Web.Html.Lightbox, edit its template and fix links to the files (add ~):
<script id="html-lightbox-js" src="~/Frontend/Composite/Web/Html/Lightbox/js/jquery.html-lightbox.js" type="text/javascript"></script>
<link id="html-lightbox-css" media="screen" type="text/css" href="~/Frontend/Composite/Web/Html/Lightbox/css/html-lightbox.css" rel="stylesheet" />

Resources