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
Related
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.
My stylesheet page is not working in IE 8.Styles are showing in css page.But it doesn't works well. Its works well in firefox.Here I added my code.Anybody can explain me?
<html class="no-js no-touch"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Tasmanian Self-Drive Tour – eBook guides</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="robots" content="noindex,nofollow">
<meta name="description" content="Imagine arriving in Tasmania and being able to start sightseeing immediately, with absolutely no effort. With either of these eBooks, you’ll have the easiest holiday you’ve ever had."><meta name="keywords" content="Tasmania, Tasmanian, selfdrive tour, self-drive tour, touring Tasmania, driving around Tasmania, Tasmania by car, sightseeing Tasmania, travelling around Tasmania, travelling with kids, tassie, tassie tour, tasmania with kids">
<!--BEGIN-STYLESHEETS-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- google font css link -->
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic|Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- additional styles -->
<link href="css/main.css" rel="stylesheet" media="all">
<link href="css/component.css" rel="stylesheet" media="all">
<link href="css/responsive.css" rel="stylesheet" media="all">
<style type="text/css"></style>
<!-- Enable this css if you want to override styles-->
<!--<link href="css/override.css" rel="stylesheet" media="screen">-->
<!--END-OF-STYLESHEETS-->
<!-- Favicon and Apple Icons -->
<link rel="shortcut icon" href="img/icons/favicon.ico">
<link rel="apple-touch-icon" href="img/icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/icons/apple-touch-icon-144x144.png">
<script type="text/javascript" src="js/modernizr.custom.js"></script>
IE8 is kinda a nightmare browser, a bit less than IE7 and quite a bit more than IE9. IE has been that way ever since Microsoft "won" the browser wars (against Netscape) and put on the brakes.
What you can do for IE8: build a set of CSS rules it is happy with and add conditional comments to only make IE8 see them.
What I do usually: add rules in a file for IE8 only to work around the browser's lack of abilities and outright bugs.
e.g.:
<!--[if IE 8]><link rel="stylesheet" href="IE8.css"><![endif]-->
(add that after the normal link to you stylesheet so it can overrule with the same specificity)
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?
Some of my CSS elements don't work in IE8. So I am using a conditional style sheet to set display:none for them; however, this affects everyone using IE browsers no matter the version. I'm using the following code:
<!DOCTYPE html>
<html>
<head>
<title>website title</title>
<meta name="description" content="web description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
</head>
Where am I going wrong?
My understanding is you want to target all the old IEs including IE8, so lte IE 8 (lower/equal) would work. You can also merge that lt IE 9 into the above one actually, like this:
<!--[if lte IE 8]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->
For debugging, you can try to add something like body {10px solid red !important;} into your ie8.css and to see if that applies to the correct browsers.
[if lte IE 8] means that the stylesheet is added if version of IE is less than 8. You need the [if IE 8] conditional.
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