My static website has broken css and possibly js over https only. http works fine.
I know the issues of loading mixed content, however most of my style sheets are relative.
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/font-awesome/css/fontawesome-all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,500,600">
What could be the issue?
Related
I have a Bootstrap image slider in my project, I only need the bootstrap js and css file for that slider. Everything works fine till I publish my site online. Then the imageslider is nowhere, the images aren't shown, just a white space.
I included jquery and popper because I read that is necessary but still it does not work. Why is that?
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script defer src="./scripts/popper.min.js"></script>
<link href="./styles/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="./styles/reset.css" type="text/css" rel="stylesheet" />
<link href="./styles/allstyles.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="shortcut icon" href="./img/huisstijl/logo.png" type="image/x-icon">
<script src="./scripts/bootstrap.bundle.min.js"></script>
I'm a newbie in web development just started learning!
after i finished my first portfolio i tried hosting it in "www.000webhost.com" everything is working fine but the title and the favicon aren't showing at all .
but launching the index.html in my browser it works so fine!
here is the head code :
<head>
<title>E-Sabri | Welcome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/l.ico">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed" rel="stylesheet">
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://a2.muscache.com/airbnb/static/libs_jquery_2x-4c61948b1a5fa686ed70f7b9bf4a18c9.js" type="text/javascript"></script>
<script src="https://use.typekit.net/iun0wqe.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="css/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.js" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Vollkorn+SC" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
I'm looking forward to your answers thanks for your help !
The website url is : www.Esabri.tk
TLD services (like TK domains) offer two ways of shorten URL,
Redirect
iFrame
You are using the iFrame method, change it to 'Redirect' in the URL settings.
SOLVED
After trying over and over i decided to not park my domain but to POINT IT and it worked so fine ! thanks everyone for your answers have a good day
I have the following head section,
<head>
<title></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.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
and my styles -- from both Bootstrap and my local stylesheet -- don't seem to be loading when I'm trying to test locally in the browsers. This happens in both Google Chrome and Firefox.
However, when I push to my Github Pages repository, the styles are applied and working.
Side note: some of the alignment styles seem to apply but none of the padding, colours etc.
Try to load just your CSS inside the <head> tag:
<head>
<title></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.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
After, go to the final of the <body> tag and paste the other dependencies left:
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
It will improve your system because starting with the CSS, i will not stop reading any script while loading your page.
Edit:
If still not working, try to remove:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Can be a problem with external links instead.
This part of code seems to be the problem:
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
Seemingly the file structure you are using locally differs from the file structure you are using on your remote repo. stylesheets.css is in the root folder in your remote repo, but it is not there in your local environment. Probably your page and stylesheets.css are in the same folder in both occurrences but the difference between the two cases is that they are in root in one case and not in root in the other case.
I can't find the problem, my favicon is not working.
HTML
<head>
<title>SuomiFTB</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/text.css">
<link rel="shortcut icon" href="http://suomiservut.arkku.net/Finland-icon.ico">
</head>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Getting right to the point...I created this small site http://ilmseek.com But I can't for the life of me figure out how to get the CSS file to render in Firefox or IE.
I apologize for the simple minded question, but as you can tell I'm still very new to this.
Thank you in advance for any help.
But what you guys gave me fixed it in a heartbeat. Can't believe it was something that simple.
I really really appreciate all the help...and not making fun of my lack of skill (though I deserve it for something that simple.)
In your css declaration you have
type="text/stylesheet"
change it to
type="text/css"
Like somebody else mentioned, you don't need it in HTML5.
Try this
<link rel="stylesheet" type="text/css" href="css/animate.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen">
but in HTML5 you don't need to use type attribute type="text/css"
what the error is that you are using these:
<link rel="stylesheet" type="text/stylesheet" href="css/animate.css">
<link rel="stylesheet" type="text/stylesheet" href="css/grid.css">
<link rel="stylesheet" type="text/stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/stylesheet" href="css/styles.css">
<script>
Change them to:
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script>
From w3.org: http://www.w3.org/TR/REC-html40/present/styles.html. You will learn more about using and rendering and other from here! Hope this helps you out.
yes , i checked these template ..if u change the links as i given below, it will function and support IE and firefox.
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script>
It looks like you are doing it right, you have:
<link rel="stylesheet" type="text/stylesheet" href="css/animate.css">
<link rel="stylesheet" type="text/stylesheet" href="css/grid.css">
<link rel="stylesheet" type="text/stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/stylesheet" href="css/styles.css">