0

I have come across a Surprising state as i never encountered this.

Details of problem:

I have an html code. if i save it and load it as file://~~/test.html it loads successfully and gives desired output However, if i put the same file in any server [ used localhost + 00webhost + infinityfree ] it doesnt give me desired output . Its however the same file without an inch of difference

What am i using:

Chrome browser -> updated to latest version

What have i tried:

i searched thoroughly but didnt find any matched problems like i have.

also tried changing various aspects of the file nothing really happened

NOTE: I included php because i think its server side problem

The html code: test.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <title>Test Html</title>
</head>
<body>
    <a href="Home" class="btn">Home</a>
    <a href="Blog" class="btn">Blog</a>
    <a href="Help" class="btn">Help</a>
    <a href="About" class="btn">About Me!</a>
</body>
</html>

The css file : style.css

.btn{
    text-decoration: none;
    background-color: #ff0000;
}

EDIT: I am 100% sure about the files having in same directory and the files having no difference in their codes

Pear
  • 351
  • 2
  • 12
  • 1
    You don't say **how** it is different between the two. Is the CSS missing? If so, then the issue may be because you're using a relative link to your css instead of the full URL path, or you haven't uploaded the CSS where it expects it – aynber Sep 28 '21 at 13:44
  • @aynber The two files have no inch difference in text BUT in chrome if i use the local file://~~/test.html the text has red background and no decoration but if i use in server no background color appears – Pear Sep 28 '21 at 13:47
  • Did you try it another browser or clear the cache of browser – Noman Shaikh Sep 28 '21 at 13:49
  • 1
    What have you tried to resolve the prlbme? How is this related to PHP? – Nico Haase Sep 28 '21 at 13:50
  • 1
    Then it sounds like your CSS isn't loading. Open up your browser's developer tools and check the Network tab to see if the CSS is loading properly or giving an error. – aynber Sep 28 '21 at 13:51
  • @aynber this is the error i get : Unchecked runtime.lastError: The message port closed before a response was received. <- I have no idea what this is – Pear Sep 28 '21 at 13:52
  • Looks like it's a [chrome extension issue](https://stackoverflow.com/questions/54126343/how-to-fix-unchecked-runtime-lasterror-the-message-port-closed-before-a-respon). Try another browser, or disable your extensions. – aynber Sep 28 '21 at 13:56
  • And do you see the CSS file being requested in the network tab? – Nico Haase Sep 28 '21 at 14:07
  • @aynber fixed it it was extension issue somehow thnx – Pear Sep 29 '21 at 12:01

1 Answers1

0

Most probably your css is not loading as you do not specify parent paths etc. <link rel="stylesheet" type="text/css" href="style.css">

In your web console most probably you will see how the url converts to something that the webserver cannot specify as a file.

Depending on your assets directory you can put ./../ on your link element in order to make this work

For example:

<link rel="stylesheet" type="text/css" href="../style.css">
Agamemnon Katradis
  • 135
  • 1
  • 12