I'm trying to apply my CSS-file to my webpage.
When I load my website, I shortly see the site rendered correctly (with my CSS-styles applied), while the page is still loaded. When the page finished loading some of the styles I defined with CSS dissappear, for example the background-color or the alignment of some texts. Sometimes when I reload the page the site is rendered normally without me changing the browser or the code. I allready tried deleting the browser cache but nothing changed. I use Google Chrome. I can see that the CSS-file must be loaded correctly, as some of the styles are applied, and the page reneders correctly while the loading processes.
This is an image of my site while loading:
This is an image of my site after loading:
Thanks for your help.
It seems like some other css or js file is loaded after your css file. please provide a link to your page or post the html.
If you use the development tools (F12) you could interspect the Network tab. here you can see whitch files are loaded and in witch order they are
Related
I'm developing a basic web page with css file on my local machine and testing by opening the html file in the browser straight from the filesystem.
This works, but now since using the Chrome developer tools to play around with different styles by editing the css file under the Sources tab, whenever I refresh the page none of the CSS loads until I again edit it in the sources tab - just adding a return to the end is enough to load all the CSS.
Also, occasionally when refreshing the page, the Sources tab shows the contents of the css file as corrupt (a load of random characters)
I've run the css through a validator and that says it is all fine and there is no javascript on the page
I'm not a web developer so probably missing something obvious...
This is happening because you are editing css inside the Inspect Element (Chrome developer tools).
This is because the css literally lives on a webpage and it is pulled from your actual css file on your desktop (css file from the folder of your website).
Because of this, you are never actually changing an actual css on your computer, just in the browser, and that is temporary, because the same old css from your computer will load everytime you reload the page (untill you modify the css on your computer).
You should edit your changes in your actual css file on your computer inside your text editor (notepad++, visual studio code, atom, sublime text, etc ...).
That way, it is going to work as you want ! Hope you understood what I meant, if not, just tell me, so I can clarify again :)
Add this to the nginx configuration:
http {
include /etc/nginx/mime.types;
....
}
this solved it for me.
Thanks
My page's CSS is not loaded properly until refresh it, as shown in the following pictures. I've been surfing on the internet to solve this issue but couldn't find a solution, and source of the problem.
First enter the page,
After refreshing the page
If you include your styles and script by wp_enque.... functions you need update versions your files than all browsers clear this cached files.
Can you save an edited HTML in the inspect element, to the browser? After I hit refresh, the web page goes looking back to normal and I want to keep it edited on my browser only for life.
You could press CTRL+S to save the page itself. But I suppose that is not what you want?
If it's a html from a page on the web you cannot. The only other solution (and I use it sometimes) is to create a local Chrome / Firefox extension that alters the DOM via Javascript.
If it's a html present on your disk you can do it with DevTools on Chrome.
you can do something like save un html code on notepad and save it as html or edit html code from inspect but those solutions will make static web page and there is no way to make it dynamic only if you change the source code of web page
I'm getting flicker on page load or postback of a coloured page body in IE11, on externally hosted site (ie. not from local disk).
The odd thing is it goes away if I either:
Open F12 developer tools
Add the site to trusted sites
Add the site to restricted sites
I've got a VM with IE9 which works fine. Works fine on Chrome.
I obviously cannot use any of the above as a solution!!!
This sample code has one link that switches between two pages. I've removed everything else, javascript, css files etc.
--- page1.html ---
<html>
<body style="background-color:#000000">
Page 2
</body>
</html>
And then an identical page2.html that refs back to page 1.
Clicking on the link flickers the background from white to black each time, unless using any of the "fixes" above!
I have found another way to temporary fix this bug by adding an empty event handler through JS.
link such .js file to you html
fix_ie.js:
if(window.addEventListener){
window.addEventListener('beforeunload', function(){});
}
We're using the customer's default browser to display locally generated HTML files in a preview mode. The files are between 0.5M and 2.5M in size. These files do not progressively render in any of the top 5 Windows browsers (Chrome, FireFox, IE, Opera, and Safari). In other words, when we try to load these files, the browser window displays a blank white page until the page is fully loaded.
The HTML files we generate have no tables or script and have all CSS references in the head section of the HTML file. Our pages include about 10 unique 16x16 png images (with image height and width explicitly included on each img tag) that are referenced several hundred times. Our output validates 100% compliant with XHTML 1.0 Strict using the W3C validation service.
Any tips on how we can enable progressive rendering of LOCALLY loaded HTML files or is progressive rendering a feature that is disabled for locally loaded files?
As an alternative, I'm looking for any tips that would allow us to display a GIF busy indicator graphic while the rest of the file loads and is rendered. We tried doing this by placing a GIF image at the top of our HTML file (immediately following the open body tag) followed by a div with display:none styling that included the full content of the HTML we want rendered. Unfortunately, the GIF file does not display until the full HTML file is loaded.
Thank you,
Malcolm
I can suggest that you confirm that the content is being interpreted properly by the browser. Despite the W3C checks, things could still be handled in 'quirks mode' .. In my experience, 'xhtml-transitional' has proved to be the most likely to provide cross-browser zen. Also, confirm that major tags like 'div' and 'p' are being closed quickly. It's hard for the browser to know what to do if the whole page is always in one layer of 'div' ..
Good luck!
Tim