Navbar Links are not working in Internet explorer 11 - html

The following navbar is not clickable in Internet Explorer. I have been using Bootstrap 3.
<!DOCTYPE HTML>
<head>
<!-- force IE8+ into standards mode -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>XYZ Management Pvt Ltd.</title>
<!-- Custom CSS -->
<link href="css/management.css" rel="stylesheet">
<!-- Custom Fonts -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.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="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
At the end I have also put this
<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</body>
Nav link is not clickable at all in Internet Explorer.

You need to have <!DOCTYPE HTML> on the first line of your html.

Related

why my shtml file is no getting called in plesk panel?

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Start Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Beorx - Creative Agency HTML5 Template" />
<meta name="author" content="ThemeOri">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title of Site -->
<title>Protonix</title>
<!-- Favicons -->
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- fontawesome -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Swiper -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!-- Magnific -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Nice Select -->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!-- Mean menu -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<!-- Flaticon -->
<link rel="stylesheet" href="assets/fonts/flaticon.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/sass/style.css">
<!--#include file="header.shtml"-->
</head>
above is the code of my html plesk panel file I copied data of header.shtml from the same file and then removed that data from source file while keeping those in header.shtml without making any change but issue is the file header.shtml is not getting called any solution for it?

Modals switching between mobile and desktop

my app is working well in all browsers but not on ie, exactly in IE 11.
When I open a modal, sometimes it open on desktop css version and others in mobile css version. It only happens in IE.
Is there a IE config problem that or some meta tags problem?
<head>
<link rel="icon" href="images/favicon.png">
<!-- <link rel="icon" href="life-drainuse/images/favicon.png"> -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
One workaround will be trigger resize event in javascript, but it is not very good solution. I cannot give you better feedback but try workaround as hotfix. But if you will reproduce it in jsfiddle will be better

Clearing the browser cache not solving site issue

I developed a site using simple HTML, CSS, javascript and PHP as backend language. Lately there has been an issue, the site seemed to be not loading any stylesheets, but there was no error in console that..the css files were loading normally. I tried clearing the cache and it solved the problem. But i faced the issue once again. Again i tried clearing the cache but the problem dint get fixed. I tried disabling the cache in devTools, still no solution. The site is continuously taking inputs from the cache, even if I try changing something for example the font size or anything it reflect the changes. Can somebody please give me a solution. Here is a screenshot
enter image description here
<?php ob_start(); ?>
<!doctype html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
<html lang="en">
<head>
<!-- Basic -->
<title>Margo | Home</title>
<!-- Define Charset -->
<meta charset="utf-8">
<!-- Responsive Metatag -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Page Description and Author -->
<meta name="description" content="Margo - Responsive HTML5 Template">
<meta name="author" content="GrayGrids">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">
<!-- Revolution Slider -->
<link rel="stylesheet" href="css/settings.css" type="text/css" media="screen">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
<!-- Slicknav -->
<link rel="stylesheet" type="text/css" href="css/slicknav.css" media="screen">
<!-- Margo CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/customstyles.css" media="screen">
<!-- Responsive CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
<!-- Css3 Transitions Styles -->
<link rel="stylesheet" type="text/css" href="css/animate.css" media="screen">
<!-- Color Defult -->
<link rel="stylesheet" type="text/css" href="css/colors/red.css" media="screen" />
<!-- Color CSS Styles -->
<link rel="alternate stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
</head>
Try this
<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
Taken from: http://www.php.net/manual/en/function.header.php
i don't know weather it will work or not but give a try with pressing Ctrl+f5 once on browser :)
it will refresh a page with new code.

Wrong html <meta and <link tags indentation in vim

When I do gg=G, almost everything get indented correctly, except <meta tag and <link tag when there is no / in before > like this />.
here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<br>
<meta name="keywords" content="">
<meta name="author" content="">
<title>
Site Title
</title>
<!-- CSS -->
<link href="css/main.min.css" rel="stylesheet">
<link href="css/cos.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="js/ie8.js"></script><![endif]-->
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
</script>
</head>
<body>
</body>
</html>
Here is what expected:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<br>
<meta name="keywords" content="">
<meta name="author" content="">
<title>
Site Title
</title>
<!-- CSS -->
<link href="css/main.min.css" rel="stylesheet">
<link href="css/cos.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="js/ie8.js"></script><![endif]-->
<script src="js/ie.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
</script>
</head>
<body>
</body>
</html>
I've tried everything I could find on the net, but still the same.
I'm using VIM version 7.4.873. MacVim 7.4 (77) compiled by Homebrew.
here is my .vimrc file:
filetype plugin indent on
syntax on
set bg=dark "background=dark
set ic "ignorecase
set hls "hlsearch
set is "incsearch
set scs "smartcase
set gd "gdefault
set ai "autoindent
set si "smartindent
set ci "copyindent
set pi "preserveindentd
set bs=2 "backspace=indent,eol,start
set fenc=utf-8 "fileencoding=utf-8
set enc=utf-8 "encoding=utf-8
set ts=4 "tabstop=4
set sts=0 "softtabstop=0
set sw=4 "shiftwidth=4
set noet "noexpandtab
"set sm "showmatch
set ru "ruler
set nu "number
set rnu "relativenumber
set wrap "wrap
set ch=1 "cmdheight=1
set title "title
set ls=2 "laststatus=always
set stl=%.50F%m\ "statusline=F
set stl+=\|\
set stl+=%p%%\
set stl+=\:\ %l/%L\
set stl+=\:\ %c\
set stl+=\:\ %v\
set stl+=%=
set stl+=%y
set stl+=[%{&fenc?&enc:&fenc}]
set stl+=[\#%n]
set cul "cursorline
set clipboard=unnamed
" Other settings
let g:PHP_vintage_case_default_indent = 1
No plugin or indent scripts.
Any ideas?

Element link is missing required attribute property

i am using this in HTML5
<link rel="stylesheet" type="text/css" href="css/loader.css" media="all"/>
But w3c validator giving me this error:-
Element link is missing required attribute property.
Please help i am stucked with it,
My Code is:
<!DOCTYPE html>
<html lang="en">
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><html lang="en"><![endif]-->
<!--[if !IE]><html lang="en"><![endif]-->
<head>
<!-- The title of your site -->
<title>Directus Media LTD</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Always make sure to check the robots tag -->
<meta name="robots" content="index,follow">
<meta name="description" content="Directus Media specialises in websites for small to medium businesses">​<meta name="keywords" content="southport graphic design, liverpool web design, southport social media management"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/lib/modernizr.js"></script>
<!-- Liquid Slider Master -->
<!-- Essential stylesheets -->
<link rel="stylesheet" href="css/loader.css" media="all"/>
<link rel="stylesheet" href="css/lib/essentials.css"/>
<link rel="stylesheet" href="css/lib/ytplayer.css"/>
<link rel="stylesheet" href="css/lib/font-awesome.min.css"/>
<link rel="stylesheet" href="css/lib/magnific-popup.css"/>
<link rel="stylesheet" href="css/lib/jquery.bxslider.css"/>
<!-- Main stylesheet -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/colors/black.css"/>
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
Everything is according to standards. Please have a look on the code. I don't know why validator is not passing my page.
you can add property="stylesheet" in the link tag
link tags don't need self closes. Remove that and try again.
http://www.w3schools.com/tags/tag_link.asp