how do i solve issues regarding external style sheet link which is not in the same directory of the programming file,but works? - css

I programmed a page (read index.php) including front end and back end operations,and in between i included a link -<link rel="stylesheet" href="style.css" type="text/css">, but there is no effect on the front end application whether I put this css file in the same directory of index.php or delete it. But when I remove the link from the programming page then the front end page is affected. So, how do I conclude this situation? Please anybody help me. I don't understand how the css file works when it is not in the directory where programming page lies.

Based on the information given it sounds like the file is being included from a cache.
Deleting the file on the server wouldn't affect the page render since there is a locally cached version of the file but deleting the link would prevent the browser from loading the cached version.

Sometimes when working on your localhost you have to put the entire path of the CSS file, not just it's normal location as you do when on a live website. Copy your entire path in the href on the link tag and see if it works.
Normally, if the file is in the same place as your index, you put the href the same way it is written in your example above. If your CSS file is in another folder, you would put ../style.css instead. Writing like that, will move up one folder.

Related

Absolute external links bug, url of the current page added at the beginning of the url

I have a very strange external links behavior on this page:
https://dev.switchonpaper.site/en/daniel-g-andujar-the-artist-as-a-thinker-and-augur-of-what-happens/
There is a list of external links visible by clicking on "Go Deeper".
On some links, the address of the current page is added at the beginning of the external link.
E.g.: iSAMâ„¢ (1997)
E.g.: TTTP Photo Collection - 1997
All external links are absolute links.
When you look at the source code, the links are correct.
This site runs under Wordpress, the links are contained in a Gutenberg block built with the ACF plugin.
I tested the following things:
Disable all plugins.
The browser or something else continues to add the current page address on some links only.
I emptied the server cache, removed all the .htaccess rules except the wordpress part.
I made sure that the PHP file that writes these links is in UTF-8.
By recreating the links, it is always the same ones who are affected.
Does anyone have any idea what could cause this?
Thank you for your time and help!
You have the so called "hidden characters" before your link start. I suggest you to check it by yourself with some online tool like this: https://www.soscisurvey.de/tools/view-chars.php. If you try to paste there the link copied by your source code you will see you have hidden stuff before "https:..."
The solution to this issue is that you delete all the characters and you write them all over again by yourself, w/o copy/pasting them from another source or in alternative paste them inside some non-HTML text editor before pasting them to your website

Where could be inline-css in Wordpress

I am working on this webpage:http://hypoinvest.sk/ which runs on Wordpress with this theme If you check source code you can see a lot of inline-css and I want to know in which files are actually defined. Only thing what I know about it they are called by function wp_head() in header.php. I have local copy of all files on this web and I can't find any mention about some of that css rules through unix grep. Anyone suspect where these css rules could be located?
check site and let me know.
Run a search in the source code for
style-inline
As this appears to be the 'handle' designated as the first variable in the function wp_add_inline_style. The "-css" is added automatically. You'll see this on line 79 of the page source.
https://codex.wordpress.org/Function_Reference/wp_add_inline_style
You want to check your page back-end site where you put content ,
I think are you using any compose or editor to create page on edit page.
check it edit option it has some inline css.

External CSS images won't load

Good day.
My structure is like this:
/
index.html
style/
main.css
images/
test/
test.html
/style/main.css says something like this:
body {
background-image: url('/images/SomeImage.png');
background-color: #000;
}
/index.html has a link to this CSS file, but, as the title says, no image will load. But it's connected though, cause the background is actually black, so the rest of the style (but images) does work.
Also, if I write the same style internally into /index.html the background will load.
Also, I created /test/test.html which says nothing but
<img src="/images/SomeImage.png" />
and the image is displayed on that page.
So, obviously, for some reason my /style/main.css can't reach files, that any other file from any other location reaches. Why does this happen? There's clearly nothing wrong with the syntax. I'm lost.
add ../ to the beginning of /images so it read ../images/imagename.jpg
Here's what your code should be:
body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}
Because your image is in another folder (thats a level up than your style sheet), you need to start with "../" for a level up folder in hierarchy relative to the style sheet. So you need a relative URL:
background-image: url('../images/SomeImage.png');
Try to copy webpage, css and example image in one folder temporarily. Then use only image name for url a see what happens. If it works, it will be the image path, if not something else.. possibly position.. is this complete css you are posting?
Initially, it looks like your code is fine.
So how do you know the image isn't loading? Look in your browser's developer tools to see if the image is loading, or returning an error, or not even being referenced. My guess here would be that it is loading, but not display because of something in your CSS.
if you are in /styles/style.css you need to add:
../ 2 levels back to get to the root folder.
So as Rokin answered :
background-image: url('../images/SomeImage.png');
is the way to do it.
To link your CSS within your index file use the following:
<link href="./style/style.css" rel='stylesheet' type='text/css'>
./ 1 level back within the index.html to reach the root folder.
In addition your problem might also be a file permission problem, I always face this issue when i download images from my email and use them directly.
If you are working locally on a mac:
- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**
If you are working directly on a live server:
- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image
- Right click and select file permissions
- set permissions to : **664**
Ok, so basically, I replaced the not-working /style/main.css with the copy of it (test.css - described in post comments) and now it works. Why is still the question, but the problem is kinda solved I guess.
Same with me, I guess images that used in css must be in the same folder as css file. I tried every possible solution while checking with the browser tool and the only thing that works is when I put the image and stylesheet in the same folder.
I am having the same problem. Working with Visual Studio Community.
I went inspect elements in browser and found that the file directory "automatically" (i did not set it this way) says that my image folder is nested inside my css folder. dont know why yet... so I then went and moved my image folder into my css folder seeing that this is what my browser showed me in the dev tools...
so maybe for some reason when working with css your images inside your image folder should be located in your css folder and not the complete Webpage Folder..it worked.

Embed a pdf document into asp webpage

I used the following code to embed and display a pdf document in a .asp webpage not in asp.net,the code displays the frame but not the pdf, can someone tell me where i was wrong.
<!DOCTYPE html>
<html>
<body>
<iframe height="1400" width="1000" src="C:/proof.pdf">If you see this text, your browser cannot display this document. Click this link to view it separately.</iframe>
</body>
</html>
Where you are storing that file is a big problem and something you should likely fix. What you mainly want to fix is this section
src="C:/proof.pdf"
I honestly do not care if your site does give access to the root of your C: drive it is a terrible practice to ever let that happen. Your site should not have access to any files outside your inetpub folder. What you should do immediately is move this file to a resource folder within your website. Assuming you have not changed any of the default settings this pdf would now be stored in
C:/wwwroot/inetpub/resources/proof.pdf
Once you do this though you should also change the src value to a relative path. If you followed my previous advice that path should look like this
src="../resources/proof.pdf"
That should both work fine and be much safer for your hosting computer.

CSS and image paths not working

Paths defined within master files are not working on a new server. They worked fine on production server and development machine. Here is an example of the file:
/HeadOffice/Styles/HeadOfficeCalendar.css
Unless I put full URL with the virtual name, the paths don't work.
working:
https://connect.server.co.uk/FesQA/HeadOffice/Styles/HeadOfficeCalendar.css
I can also include resolved URL within ASP>NET code tags but I don't want to change all those paths they are probably hundreds of them. so if the head office folder is in the same folder as master file it should just be able to reference like:
/HeadOffice/Styles/HeadOfficeCalendar.css
It seems the references within the master files and aspx files seems to work fine by adding ~ and runat = server. but images references within the CSS files are not working unless I include the full path.
DOESN'T WORK
url(/HeadOffice/Images/tlcorner.png)
DOES WORK
url(connect.server.co.uk/FesQA/HeadOffice/Images/tlcorner.png)
I know I've answered this before, but this has been known issue forever in VS.
Simple way to do this correctly is to drag the CSS file from Solution Explorer window to head section of master page in code view.
For other links on your site, make sure to include the runat="server" attribute and resolve your links like this (with "~" operator):
<img src="~/images/sample.jpg" runat="server" />

Resources