I have uploaded a page to a webserver. When I go there with IE and switch browser mode to IE 8 or IE 7 to see if html5shiv and respond.js are downloaded I see that they are not. Anybody knows why ? I use bootstrap's recommended template with a bit added code in a . Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<section>
<h2>how are you doing ?</h2>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
and my uploaded page is there http://toto3000.byethost24.com/bootstrap/basic%20ii.html
Correct your first link by adding prefix (http://).
FROM: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
TO : http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
Your browser is trying to use a file protocole (file://)
It works. I was switching "browser mode" in IE rather than "document mode" that's why I couldn't see these files. My bad.
Related
I'm currently working on my own website. So i coded some HTML with a style.css . Testing it offline - everything works as expected but when I upload it to my webhoster and get a preview of my website, there is only the raw html visible without anything from the style.css
I already checked the path and overwrote it with the for me correct path (from the root of the webserver) - it changed a little bit but still is far away from the right appearance.
The head of my index.html (The only page I have)
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> test </title>
<link rel="icon" href="img/fav.png" type="image/x-icon">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="ionicons/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- main css -->
<link href="httpdocs/css/style.css" rel="stylesheet">
<!-- modernizr -->
<script src="js/modernizr.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
as well as my path:
https://i.imgur.com/0YNkUrJ.png
The result is a described aboth only some html text but not how it would looks like with style.css
You should use relative paths from the httpdocs.
So change httpdocs/css/style.css to ./css/style.css.
I have a node js project and added a template for the admin are. on my local server it show everything is ok but when i push it to my web server on vultr it does not load the admin page and show several errors in the console. these errors are not shown in the dev systems web browser console.
The errors are:
Refused to apply style from 'http://www.skillbuild.pro/admin/assets/node_modules/morrisjs/morris.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
it also shows several js files are not fount (404 error) whereas these files exist in the relevant folder.
Following is my head section:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1"> {{!--
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> --}}
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Elite Admin Template - The Ultimate Multipurpose admin template</title>
<!-- This page CSS -->
<!-- chartist CSS -->
<link href="/admin/assets/node_modules/morrisjs/morris.css" rel="stylesheet" type="text/css">
<!--Toaster Popup message CSS -->
<link href="/admin/assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet" type="text/css">
<!-- Morris CSS -->
<link href="/admin/assets/node_modules/morrisjs/morris.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="/admin/dist/css/style.min.css" rel="stylesheet" type="text/css">
<!-- Dashboard 1 Page CSS -->
<link href="/admin/dist/css/pages/dashboard1.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
and these are my footer section where the js files are called:
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="/admin/assets/node_modules/jquery/jquery-3.2.1.min.js" type="application/javascript"></script>
<!-- Bootstrap popper Core JavaScript -->
<script src="/admin/assets/node_modules/popper/popper.min.js" type="application/javascript"></script>
<script src="/admin/assets/node_modules/bootstrap/dist/js/bootstrap.min.js" type="application/javascript"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="/admin/dist/js/perfect-scrollbar.jquery.min.js" type="application/javascript"></script>
<!--Wave Effects -->
<script src="/admin/dist/js/waves.js" type="application/javascript"></script>
<!--Menu sidebar -->
<script src="/admin/dist/js/sidebarmenu.js" type="application/javascript"></script>
<!--Custom JavaScript -->
<script src="/admin/dist/js/custom.min.js" type="application/javascript"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--morris JavaScript -->
<script src="/admin/assets/node_modules/raphael/raphael-min.js" type="application/javascript"></script>
<script src="/admin/assets/node_modules/morrisjs/morris.min.js" type="application/javascript"></script>
<script src="/admin/assets/node_modules/jquery-sparkline/jquery.sparkline.min.js" type="application/javascript"></script>
<!-- Popup message jquery -->
<script src="/admin/assets/node_modules/toast-master/js/jquery.toast.js" type="application/javascript"></script>
<!-- Chart JS -->
<script src="/admin/dist/js/dashboard1.js" type="application/javascript"></script>
in my server.js file I have defined the path:
// Use path
app.use(express.static(path.join(__dirname, 'public')));
for some reason on the local server it shows everything and there are no errors, but when I push it to my web server which is a vps and I am using pm2 for node process manager, it shows the errors in the browser and does not load the admin page.
Please help, this is driving me crazy!!!
Iam experiencing some weird issue with HTML 5, currently i'm retrieving information from a Database on MySQL, the database is encoded using UTF-8, and when i retrieve information without using any HTML markup everything is working fine, but in pages with HTML markup things are not properly working.
Here is a page that uses HTML markup
Here is a page without any HTML Markup ( Things working well )
The query's are the exact same.
Here is the HEAD information:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quizu - Testes de personalidade</title>
<!-- Bootstrap -->
<link href="css/normalize.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<script src="js/jquery-1.11.2.js"></script>
<script src="js/meu.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="css/quizu.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Thanks in advance, any help will be appreciated.
The problem was in my MySQL query, although my Database was encoded in UTF-8, the query was not being made using UTF-8. All i had to do "SET NAMES UTF-8" to my query.
$dbHandle = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8", $dbUser, $dbPass,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
So I've downloaded a font from Fontsquirrel which has all the letters used in Estonian language. It works fine in the browser when I use all the common letters, but as soon as I use the letter "ž", it's not displaying the correct font.
This is how my HTML looks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>8 Delfiini | Massaažiga argipäevast kõrgemale</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"> <!--page wrapper-->
<section id="avaleht">
<h1>Massaažiga argipäevast kõrgemale</h1>
</section>
...
And the CSS:
h1 {
font-family: 'alluraregular';
font-size: 6em;
text-align: center;
}
I changed the "lang=en" to "lang=et", but it didn't work.
This is the result:
Is there a way to make this work properly? Thank you!
The FontSquirrel webfont generator by default uses “Basic subsetting” for “Western languages”, which effectively means ISO Latin 1, designed for languages of Western and Northern Europe, lacking e.g. ž, z with caron. To overcome this, select “Expert” in the user interface, then either “No subsetting” or “Custom subsetting” with suitable options (either “Latin Extended-A” or “Estonian” should handle the issue). Since the font is small, “No subsetting” is the best option.
I am new to Bootstrap and ran into a strange problem. I am trying to include a cool hover effect for a facebook png image.
Everything works fine when I put the CSS in the as an internal style rule. It won't work when I put it in an external style sheet.
All the paths are working because I have been successfully overriding the default bootstrap CSS rules.
With an external style sheet the image link is there but the image does not display. Kind of hard to explain. Not sure what to do?
http://jsbin.com/UFoRIYex/394/edit?html,css
Here is a link to the website where I got the html/css from. http://bradsknutson.com/blog/css3-ro...l-media-icons/
Like I said. Everything works internally. Just not externally....
Try the bootstrap cdn (code copied direct from Bootstrap).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Problem solved. I changed the path to ../img/facebook-hover.png and it worked.Thanks!