CSS present in the local environment, but not the server environment - html

I am having trouble with CSS showing up on my server environment. I've tried setting the href to /css/style.css and including the type="text/css" header, however nothing is working. The CSS shows up in the local environment just fine, and when I go to my website and visit the developer network tab, it shows an old version of the CSS. I am saving the document.
Header code:
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
CSS code:
body {
margin: 2vh;
margin-left: 6vh;
margin-right: 6vh;
font-family: Arial, sans-serif;
}
Any solutions are appreciated.

Related

Special characters not displaying properly in web browser

I was developing a simple website in Hungarian language, where special characters like: á, é, ű, ő etc are included in the text (head and body), and it worked perfectly in all browsers when opened from local. Once I uploaded the index.php file to the domain all special characters are displaying wrongly (like small pictures/icons). Page is done on bootstrap
I've tried changing the font-family, changed default language from en to hu, no improvement. Searched for answers already, but can't find what is wrong in my case
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Vállalati oldal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-color: #e3e7e8;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
}
I am getting no errors
I found what the root cause was. First I started with checking if my fonts were supporting special characters (although I would expect strange signs if font would not support already on local). Everything was ok there. Naturally I tried to change fonts for different ones also supporting local language but- no luck.
Then I started to think that either there needs to be sth wrong at my hosting side- so when I upload the page to domain or with the uploading process itself.
Issue came to be with the uploading process. I am using filezilla for upload of my index.php file and all other files. It came that when I am setting up a connection I needed to do two things:
1. check the option: Force UTF-8 in the charset tab while setting up the connection
2. once connection is set up and before files are uploaded right click in the connection established part of filezila and choose "enter custom command" once small window pops up I put in there a "opts utf-8 on" command, then I got the success message in the main window
After all this I have uploaded my files and everything worked perfectly. All special characters are displayed!

Windows UWP Webview with Local Relative URLs

I am developing an application that uses a webview for the primary interface. Upon startup, the program loads a page that is included in the Content directory of the project, complete with external style sheets and scripts and they all load properly. The code to load is:
webViewer.Navigate(new Uri("ms-appx-web:///Content\\landing.html"));
And the content of landing.html is as follows. It all works properly.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<base href="ms-appx-web://58377ramsays.studios.chordwriter/Content/" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<title></title>
</head>
<body>
...
</body>
</html>
A problem has arisen when I try to use NavigateToString() to load rendered content into the viewer and try to use these style sheets, and specifically FontAwesome. I am loading the file using this code:
webViewer.NavigateToString(song.RenderHtml(appSettings));
And the RenderHtml() function looks partially like this:
string content = #"<DOCTYPE html>
<html>
<head>
<base href=""ms-appx-web://58377ramsays.studios.chordwriter/Content/"" />
<link rel=""stylesheet"" type=""text/css"" href=""css/font-awesome.min.css"" />
<style type=""text/css"">
body { font-family: Tahoma, Geneva, sans-serif;
margin: 15px;
font-size: " + settings.Values["settingsFontSize"] + #"pt; }
span.flat { margin: -4px -2px;
font-family: 'Lucida Sans Unicode','Lucida Grande',sans-serif;
font-size: 1.2em;
height: 0.9em;
display: inline-block; }
h3 { font-size: 1.5em; }
th a { text-decoration: none;
font-weight: bold;
color: #127690; }
td a { text-decoration: none;
font-weight: normal;
color: #000; }
i { color: #000;
width: 1em; }
</style>
</head>
<body>";
// Rest of rendering function.
However I cannot seem to get FontAwesome to load properly. As far as I can tell the font-awesome.min.css is loading properly, because the icons' i tags are the right size (square blocks) but they are blank, meaning the font file is not being loaded. I tried using the <base> tag but that does not seem to work. Is there any way to make this work?
Edit: I edited the stylesheet and hardcoded the full url of the font file into it, and it still doesn't work.
It seems that you may need to use the BuildLocalStreamUri / NavigateToLocalStreamUri. In this case, the string-passed html can't refer the contents of css folder. You need to build the 'stream' that contains string, css, or other external files.
Following is an api reference:
BuildLocalStreamUri
You may need to refere the sample also. It's complicated to use.
XAML WebView control sample

Github GH Pages changes font for h1

I am using a font through edge fonts and am hosting the static html page through github pages. However, when I look at the link, the h1 font has changed. When I look at it in my local host, it has the correct font. Does anyone know how to correct this?
In my index.html
<script src='http://use.edgefonts.net/londrina-shadow.js'></script>
<style>
h1 {
font-family: londrina-shadow, sans-serif;
font-size: 150px;
}
</style>
<h1>TITLE</h1>
Set the H1 code in the .css page, not the HTML.
h1 {
font-family: londrina-shadow, sans-serif;
font-size: 150px;
}
Put that in the .css page and see what happens. Also eliminate the h1 font-family preset from the Github theme.

Font in h1 different when offline and online

Hello I am fairly new to HTML and CSS. I've just began hosting my site and since installing an SSL certificate to it (whether relevant or not) my header's font has reverted to the default font. When I open the html file offline the header is the appropriate 'Damion' font however when I go to domain that is not the case.
The website is eliasmalik.com, the text in question being "Under development"
Below is the index.html and main.css files for the website:
<!DOCTYPE html>
<html>
<head>
<title>Elias Malik</title>
<link rel="stylesheet" href="main.css">
<link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<link rel="shortcut icon" href="diamond.ico">
</head>
<body>
<div class="bc">
<h1>Under development</h1>
</div>
<div id= "footer">
<div>
<ul class ="social">
<li class="facebook"></li>
<li class="instagram"></li>
<li class="linkedin"></li>
</ul>
</div>
</body>
</html>
and
html
{
background: url(devbc.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
.bc h1
{
font-family: 'Damion', cursive;
top: 40%;
left: 49%;
position:absolute;
transform: translateX(-40%) translateY(-49%);
color: white;
font-size: 62px;
}
#footer{
width: 105%;
}
ul
{
list-style-type: none;
}
ul.social
{
width: 202px;
margin: 555px auto 0;
height: 52px;
}
ul.social li{
float: left;
position: relative;
height: 52px;
margin-right: 12px;
}
ul.social li a{
display: block;
width: 52px;
height: 52px;
}
ul.social li.facebook
{
background-image: url(facebook.png);
}
ul.social li.instagram
{
background-image: url(instagram.png);
}
ul.social li.linkedin
{
background-image: url(linkedin.png);
}
This is a screenshot of how the page is supposed to display:
http://imgur.com/Xngv2Me
And yes the version in my file client is the same as the one offline
The font is http: not https:, so it will block it as being insecure.
Using Chrome, I went to your site, opened the dev tools (F12) and reloaded the page. The following error is displayed in the console.
Mixed Content: The page at 'https://eliasmalik.com/' was loaded over
HTTPS, but requested an insecure stylesheet
'http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion'.
This request has been blocked; the content must be served over HTTPS.
Change your link to the font from google to https and it should work.
Or, take the very sound advice (that I am remiss in forgetting) from hair raisin below:
better yet, skip the http/https and just use //fonts.googleapis.com to request the resource using the same protocol as the page
Change
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
to remove the http protocol so that it reads: //fonts.googleapis.com
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
Removing the protocol allows your files to request http when needed and automatically changes to https when secure files are needed.
Because you have a SSL you need to have all your references be secure. It was blocking non secure sources (your font) because you specified the font to be served over http and not https.
You might try changing this line:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
To:
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
I suspect that your browser might be blocking the loading of that style because your page is https (secure), but you're requesting the CSS from an insecure source (http).
By leaving the http: off, you'll allow your page to request the CSS securely when your page is secure, and use plain http if the page uses http.
Your web browser is blocking the loading of mixed content - loading http resources on an https site.
https://developer.mozilla.org/en-US/docs/Security/MixedContent
an easy way to fix it is to change
http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion
to
https://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion
You can download the font and use css to "set" it, you'll be able to use it as a normal font after that.
#font-face {
font-family: yourfontname;
src: url(Yourfonturl.woff2);
}
And then to use it :
#yourid {font-family: yourfontname}

CSS I have a styling.css file but ignores my CSS code...But creating a new one makes it work

So I was having this trouble that my background image was not working at all...
I had the .css file correctly added with element in html. However I never got it to work. The only way it started to show me the background image was when I decided to create a NEW .css file which i called bodystyle.css and it finally did show me the background image.
The code used was the one below... I just pasted it to the new .css file and included the new file and it worked like a charm... why would this happen? Has anybody encounter this?
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333;
background: url('http://wilco/includes/img/body-bg.jpg');
padding-top: 0px;
}
a {
color: #4681da;
text-decoration: none;
}
This is modify version of your program
Directory Structure: in windows
D:\MYPROG\wilco\includes\img
in this folder your image body-bg.jpg exist
D:\MYPROG\styles
Your css file NEW .css exist
AND last
D:\MYPROG
your prog.html file exist
Code is as follow
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="styles/NEW .css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<p> This is my Background</p>
</div>
</body>
</html>
AND THIS IS YOUR CSS FILE
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333; width:970px;height:;background-position: center top;
margin:auto;
background-image: url("../wilco/includes/img/body-bg.jpg");
background-repeat: repeat;
padding-top: 10px;
}
a {
color: #4681da;
text-decoration: none;
}
I tried in my computer its working. you try with your image and tell me if any queries
bye
What I do to "fix" this, is F12 to open the developer console (in most modern browsers), navigate to the head element, then the link element, and open the link to the css file in a new window.
Once it is there, press Ctrl+F5 (or Cmd+R on OSX).
Then go back and refresh your page...
All your files (.html,.css and background image) should be in the same folder.
try checking that..