I have a small issue with IE. I'm working on a site nothing fancy just some static html pages (around 35), I am using bootstrap as a skeleton, font-awesome, Animate.css,responsive styles, Jvectormaps, footables, custom styling ect... I usually write and include separate css files to keep things easy to maintain, everything's working well until I decided to merge all files in a single one because I need to test if my pages load faster.After doing so IE seems not processing the whole stylesheet file because when I go the developers tool then check my merged CSS file I can see it is like cut in half. This is weird , I am sure not sure why IE is leaving out all the rest.
SO i split the main file into two separate ones, now everything is back to normal
In Chrome / Firefox I do not face this issue so I am certain it has something to do with IE(9/8). Does anyone know Why? if it is realted to file size? (450Kb) Is there a way to include all file in one or I should keep separate ones?
Thanks,
You might be hitting the limits on how many elements IE 9 and down can display. Use a site like the one below to see if you are below the count limit:
http://snippet.bevey.com/css/selectorCount.php
If you are using Grunt in your project, there are tasks that can split your css up automatically to fix this issue.
You may be encountering some of the CSS limits that are related to IE. Microsoft has changed/increased/removed these limits in more recent versions, but you may still encounter these limits.
There are many possibilities such as which IE version is being used, and what document compatibility mode is specified.
If your pages have an older document compatibility mode specified, you will encounter some of the lower limits that limited older versions of IE.
See: http://msdn.microsoft.com/en-us/library/ie/hh781508.aspx for more details.
Related
I have the same page open in two different browsers on the same computer. On one, the styles are completely broken and all over the place. On the other, they are fine. I am dealing with a big project but, in this case, a very simple HTML file and a very simple assets folder with three stylesheets and 20ish images - these are all in the same folder.
**
Notable info:
**
I have invalidated every possible related cache. This seems to work sometimes.
This issue seems to occur randomly and frequently - 50% of the time it looks fine, the rest it does not.
I have uploaded fresh versions of CSS assets (with -v2 tags on the filenames) as well as changed the names of the HTML files and it has helped, but apparently only temporarily.
In devtools, under sources, I can see the CSS files in both the working and broken browsers. They look different, but completely at random. Lines appear to be missing or added in one or the other.
This was initially a Figma-exported page with a LOT of absolute positioning (I'm rebuilding it but it's not done).
I've built a website in HTML, CSS, Bootstrap 4 etc. etc. through Atom. Every time I make changes and upload the new version to the hosting platform (HostPresto in my case) browsers load the previous (presumably cached) version. I know browsers use the cached data for loading and data efficiency etc. However, my aim is to force any browser to reload from scratch, ONLY if some part of the website has changed. How do I do this?
I've seen some answers on stackoverflow to similar queries over the years, where people have suggested using code in the website header to effectively wipe the cookies and cached data each time it is loaded. I don't want to do this all the time, since more often than not, no changes will be made and my website will be less efficient.
My hosting provider has said that it would help if I upload ALL website files each time only a bit has changed. I tried this today and it doesn't work - I still have to clear the cache for it to load properly.
Can anyone help me work out what to do, to get any browser to identify when changes have been made to my site, so that it will load them automatically? Thanks!
I've cracked my own issue, so to speak, so I thought I'd post the answer here, in-case it helps others.
Basically, I noticed that the HTML files would always reflect the latest changes. However, it was the CSS files that wouldn't. The CSS files were the culprits for loading from the browser cache.
To correct this, I have started adding versioning to my CSS files to force the browser to load the new CSS file, ONLY when the CSS is updated. it works like this:
The name of the CSS file isn't changed. That is, and always was styles.css. You might call it something else.
The old call I would make for my CSS file, in the head of the HTML file, was: <link rel="stylesheet" href="css/styles.css">.
The new call is: <link rel="stylesheet" href="css/styles.css?version=1.0">
All I have done is add ?version=1.0 to the end of the CSS file name in the HTML header. If the version number changes, the browser will load the newest version. If the version number is the same, it won't load the newest one.
I imagine this would be quite straightforward for some but since I have managed to sort it myself, I thought it might be useful to share with others. There's now no need for adding hard code into the HTML header that causes efficiency-losing reloads from scratch unnecessarily!
I am not able to run the script using WebDriver across different Browsers.For IE its working fine.
Firstly I automated an application for IE.then I tried to run the same script in Chrome or FireFox.
Now on Chrome and FireFox some of the elements are not getting recognized by the WebDriver.
1. How can this be resoled?
2. Is there any solution for this so that I can run the same script on different browsers irrespective of the Browsers?
Please suggest.
Without seeing the page it would be hard to tell, it depends on your situation, normally there is one selector that will work across your browsers but its technically possible for your development team to be using completely different element names ids etc etc depending on browser (or even completely different pages), it would be crazy for them to be doing it on purpose but it is possible so you will find people may be unable to help without more information.
Typically css selectors are the most robust selector across browsers while xpath is the most flakey. post some code both of your test and pages and can probably help further
Sometimes, the locator you are using will work in one browser , but not in other browsers. Try using different locators such that it gets executed in all the three browsers.
Starting this afternoon, with the introduction of Chrome 31.0.1650.48, many web pages are displaying with random formatting errors. I've confirmed this on both Mac and Windows machines running the most recent auto-updated Chrome release (31.0.1650.48).
This problem is affecting thousands of pages, and to immediately rule out our server generating different information, you can try this to reproduce the problem:
Visit this Google cache page with Chrome version specified above: http://webcache.googleusercontent.com/search?q=cache:nt70v_rn5BwJ:alaskanmalamute.rescueme.org/Idaho+&cd=61&hl=en&ct=clnk&gl=us
Notice what dogs are displayed and where they are.
Reload the page several times and observer closely.
You will randomly see one dog listing in the middle of the page, then two dog listings, the dogs move around, the menus around the dogs move around. Each time the page is reloaded Google is corrupting the source code in different ways, resulting in major formatting issues. (NONE of this code is generated outside of Google's cache.) All the pages on the www.RescueMe.Org have this problem, I'm using a cached page on Google's server in this article for an example since it proves it is not a server issue.
This sample page should remain the same every time, and be formatted correctly. It isn't.
Google Chrome (when viewing source) seems to be making random changes to the page (Chrome is dropping < or > at random places in source code) causing major display formatting issues.
Can someone reproduce this? Hopefully the folks at Google know about this issue, or someone here can escalate it with them?
Best wishes,
Jeff
can confirm - it seems to mostly be an issue with iFrames.
VisualForce iFrames in Salesforce break the entire layout.
Version 31.0.1650.48 on Mac, all addons removed.
In case someone else runs into this issue, I've narrowed it down somewhat. Chrome/31.0.1650.48 will randomly scramble the placement of tables on a page if the following two things happen:
1) You start the page like this: and do the reverse at the end: (doesn't have to be face=arial, any font setting or even just does the same thing).
2) Include some tags within the page containing various tables.
3) Magic! (not good magic, though) Each time your tables will randomly move about the page. Here's an example to try: http://server1c.rescueme.org/testb (Reload this page several times in in Chrome/31.0.1650.48 on Windows or Mac to see the tables jump around.)
THE SOLUTION: Start the page like this instead: and do the reverse at the end: (in other words, reverse placement of the center and font tags). Here's the "fixed" version of the page above with just those tags reversed: http://server1c.rescueme.org/testbfixed
While this is a Chrome bug, I feel this is worth keeping in Stack Overflow because this bug is breaking a lot of major sites, and programmers may want to know how to reprogram their HTML so those who have affected versions of Chrome won't have a confusing experience.
FYI... There are other ways to cause and solve this problem, but I'm trying to present here just the simplest method I found.
Is there a simple way to save an HTML page that has an external stylesheet (1 or more) referenced but force all of the rules to be inserted into the page itself, inline? So basically I want to move all external rules onto the elements that they affect themselves.
For what it's worth, I'm using nearly every major browser (incase the solution is browser-specific), and I'm on Windows (incase it's OS-specific).
I'm assuming you've seen the online tools that are available like this one? This online tool (which I have not tested but looks like it works) gives you the option of providing a url or source code and shows warnings for cross-browser compatibilities with your styles.
I use a tool that does something like that, but it was written for Ruby and TextMate for Mac. It is released by Campaign Monitor as a way of preparing HTML emails. It brings all the rules from the stylesheet and makes them inline styles.
It might give you a good start. I'll keep looking.
TextMate Email Bundle
The piece that does the heavy lifting is the TamTam RubyGem which brings the CSS inline. However, it seems to only support one style element (not link elements). If you could work with those restrictions, you could get it to work on Windows using Ruby and a ruby script file. Not quite drag and drop I'm afraid.
i use chrome extension Save Page WE