I have recently started learning and developing my HTML skillset, but I am running into an error of which I cannot find a solution.
For work, I am trying to set up a simple HTML document for my department to use. In creating the HTML, CSS, and JS files, I used a folder on my desktop. When copying this folder, and moving it to our public shared network folder, the page is not displaying the same, and the functionality is not present.
The sheet is basically a series of paragraphs, similar to a database or dictionary. Each section includes a descriptive sentence, and a section of SQL code that the sentence describes. Below each code section is a "Copy Query" button, which I used clipboard.js to create.
On the desktop version, opening in IE, this file works fine and the intended selection is copied when hitting the button. However, on the network version of this HTML file, the copy button does not work, and the CSS styling looks slightly different.
Any help understanding the difference between local hosting and public drive hosting of this file would be greatly appreciated! Or if I am moving in the wrong direction asking for advice, that would also be appreciated.
Files can be provided if necessary.
Did you use relative URLs to external CSS and JS files and is the file structure the same on the server as on your desktop?
If you link to the page we may be able to offer better advice.
Looks alright to me. Are the file named style.css and script.js, i.e. all lower case?
Yes they are, adding a couple more screenshots to help. I am just wondering if there are certain rules that apply to the public drive folders that may be affecting this?
In the local file, you can see my border-radius CSS style is showing up, but on the network file, it isn't.
The transfer of the folder from local (Desktop) to the network drive was literally a copy and paste, so the markups should be the same. Correct?
Here is the CSS
style.css ( 394bytes ) Number of downloads: 508
One reason could be the files aren't served with the right content type. That could stop them from being read. But some of the CSS is actually working, right?
If this is a public website you can use for example this tool to check what content type is used. Feed it the URL to the CSS and JS files, not the HTML file.
If the server isn't configured to send any special content type it will default to text. Should be text/css and text/javscript. If it's something else someone has made a mistake.
You find it under "Receiving Header". Here's the output for http://htmlhelpl.com/style.css .
I think something like that may be the issue.
To test, I placed the whole SQL folder on the public drive, and logged on to a separate machine. I opened the file on the network drive, and it still did not do the border-radius CSS, but it had the other CSS elements (just like the attached picture). The Copy button did not work either.
However, I right-click Copied the SQL folder to the desktop of that computer, and opened the SQL html page. It had all the CSS elements and the copy button worked!
So does this sound like a setting of the network drive? or a specific folder on the drive?
Maybe I've misunderstood you. Do you view this over a server at all? If not content-type isn't used. And if it is on a server none of the style sheet would work if the wrong content-type was used.
Sorry, I can't think of anything else.
That's ok, Im doing my best to explain this because I am stuck at a block until I can figure it out, and I know you are the experts : )
If I move this to our shared network drive and open it, the HTML document displays with some CSS elements missing, and the Copy button does not work (which comes from clipboard.min.js in the JS/ folder).
Are there settings for drives / folders which can affect how the HTML document interacts with JS and CSS?
Wow so I think I just solved the issue in research
<!-- saved from url=(0014)about:internet -->
above <!DOCTYPE html> in the document.
Anyone know exactly why this would work?
Mark of the Web. An IE issue. So I take it no server is involved then.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)