it's my today's work... that css :nth-child(odd){background-color:red;} doesn't work in lte ie8
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style/selectivizr.css" type="text/css" />
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<noscript>
<style> p.odd {background-color:red;}</style>
</noscript>
<![endif]-->
</head>
<body>
<div id="container">
<h1> title </h1>
<p> 단락 요소입니다. 홀</p>
<p class="odd"> 단락 요소입니다. 짝</p>
<p> 단락 요소입니다. 홀</p>
<p class="odd"> 단락 요소입니다. 짝</p>
</div>
</body>
Related
I have added bootstrap using nuget package . Added link to the bootstrap stylesheet but glyphicons are not loading .Please help.
`
<!DOCTYPE html> <html> <head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-route.js"></script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<script src="../scripts/jquery-3.3.1.js"></script>
<script src="../scripts/bootstrap.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" /> <meta charset="utf-8" /> </head> <body ng-app="moviesList">
<h1>Movie List Application</h1>
<span class="glyphicon glyphicon-star"></span>
<div ng-view>
</div> </body> </html>
`
Try to load your css in header and js in footer section
And use maxcdn links for bootstrap
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset="utf-8" />
</head>
<body ng-app="moviesList">
<h1>Movie List Application</h1>
<span class="glyphicon glyphicon-star"></span>
<div ng-view></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-route.js"></script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
I have the newest Foundation complete version and I am following this tutorial. https://www.youtube.com/watch?v=RK_k__4Y4TU
I am trying to get a menu but there is nothing on my website at all. It is just blank.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<ul class="menu vertical">
<li>Links</li>
<li>Links</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content></div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I tried your code and only mistake is you have written off-canvas insted of off-canvas-wrap.
No class exist with name off-canvas.
<div class="off-canvas-wrap position-left" id="offCanvas" data-off-canvas>
I am new to Twitter Bootstrap. I am working on a webpage. It works fine when I use Bootstrap CDN. When I remove the Bootstrap CDN and try to use Twitter Bootstrap plugin, it seems unable to access the Bootstrap plugin. The webpage becomes a blank page where only words are displayed.
I have two questions here:
How to check if I have installed the Twitter Bootstrap plugin successfully. Here is the link I have followed to install it. I also follow the instructions in the documentation provided on the webpage.
How to check if the Twitter Bootstrap plugin is loaded successfully?
Here is the HTML code in my sample.
It works partially (some parts are working) when i remove the comment for meta name="layout"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment Home</title>
<!--meta name="layout" content="main"/-->
<!--meta name="viewport" content="width=device-width, initial-scale=1"-->
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<h3 class="text-muted">Online Library System</h3>
</div>
<div class="jumbotron">
<h1>Kowledge is everything!</h1>
<p class="lead">For the new member please sign up today to get the privilledge.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Top book</h4>
<div class="col-lg-6">
<table class="table">
<tr>
<td>
<g:img dir="images" file="index.jpeg" width="110" height="140px"/>
</td>
<td>
<g:img dir="images" file="index2.jpeg" width="110" height="140px"/>
</td>
<td>
<g:img dir="images" file="index3.jpeg" width="110" height="140px"/>
</td>
</tr>
</table>
</div>
<div class="col-lg-6">
</div>
</div>
<div class="col-lg-6">
<h4>Regulation & Rules</h4>
<p>Penalty charges will be required upon any overdue. </p>
<p><i> *Charges will be diffence based on the book access level.</i></p>
<hr>
<h4>Operating Day</h4>
<p>Monday - Sunday : 8:00AM to 10:00PM</p>
<hr>
<h4>Address</h4>
<p>Perpustakaan Negara Malaysia (Ibu Pejabat)</p>
<p>232, Jalan Tun Razak,</p>
<p>50572 Kuala Lumpur, Malaysia.</p>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
Here is my main.gsp
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="Grails"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="${assetPath(src: 'favicon.ico')}" type="image/x-icon">
<link rel="apple-touch-icon" href="${assetPath(src: 'apple-touch-icon.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="${assetPath(src: 'apple-touch-icon-retina.png')}">
<asset:stylesheet src="application.css"/>
<asset:javascript src="application.js"/>
<g:layoutHead/>
</head>
<body>
<div id="grailsLogo" role="banner"><asset:image src="grails_logo.png" alt="Grails"/></div>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
</body>
</html>
Can anyone help me please? There is some white space between top of my page and div container and I have no clue why: http://iwokolasinski.com/wtfq/
#optimus203 I can see that my HTML is messed up when look at it in browser. But this is my header.php file, it seems to be ok. I'm quite a newbie and I'm trying to create wordpress + bootstrap theme. I have no idea what am I doing wrong... :(
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php wp_title('|',1,'right'); ?> <?php bloginfo('name'); ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lobster|Khula&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="container-fluid kol">
That is the default settings of current browsers.
You can override this by setting your CSS like this:
html, body {
margin: 0;
padding: 0;
}
Your HTML is all messed up. You had your head content in the body tag, and other issues.
<html lang="en">
<head>
<meta charset="utf-8">
<title> WTF Design</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Styles -->
<link href="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/style.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lobster|Khula&subset=latin,latin-ext,cyrillic" rel="stylesheet" type="text/css">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="WTF Design » główna Kanał z komentarzami" href="http://iwokolasinski.com/wtfq/?feed=rss2&page_id=5">
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/bootstrap/js/bootstrap.js?ver=4.1.1"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://iwokolasinski.com/wtfq/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://iwokolasinski.com/wtfq/wp-includes/wlwmanifest.xml">
<meta name="generator" content="WordPress 4.1.1">
<link rel="canonical" href="http://iwokolasinski.com/wtfq/">
<link rel="shortlink" href="http://iwokolasinski.com/wtfq/">
</head>
<body>
<div class="container-fluid kol"> <h1>główna</h1>
<h1 style="text-align: center;">Heading 1</h1>
<h2 style="text-align: center;">Heading 2</h2>
<h3 style="text-align: center;">Content</h3>
<p style="text-align: center;">Paragraph</p>
<footer>
<p>footer</p>
</footer>
</div> <!-- /container -->
</body>
</html>
I added this to the end of your <head> section and it worked:
<style>
body {
margin-top:-25px;
}
</style>
I have a cakePHP admin with theme on it.
When I navigate and then press the browser back button in Chrome, the page breaks and looks like that:
and the first few lines of HTML are as follows:
<header>
<section class="container_12">
<div class="upper clearfix">
There is no HTML defined, no header closing tag, no css defined...
When I hit refresh, the page loads normally:
And the HTML includes the <!doctype html>, the header, all the meta tags and so on.
What is the problem?
<!doctype html>
<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>johns | Admin</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/backend/css/style.css" /> <link rel="stylesheet" type="text/css" href="/backend/css/colors/color4/color.css" /> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/backend/css/grid.css" /> <link rel="stylesheet" type="text/css" href="/backend/css/fixed.css" />
<link rel="stylesheet" type="text/css" href="/backend/css/print.css" media="print" />
<!--[if (lt IE 9) & (!IEMobile)]>
<script type="text/javascript" src="/backend/js/libs/selectivizr-min.js"></script> <![endif]-->
<script type="text/javascript" src="/backend/js/libs/modernizr-2.0.6.min.js"></script>
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/backend/js/plugins/jquery.ui.spinner.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="/backend/js/plugins/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.collapsible.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.cookie.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.tipsy.js"></script> <script type="text/javascript" src="/backend/js/plugins/autoresize.jquery.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.autotab-1.1b.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.uniform.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/ui.multiselect.js"></script> <script type="text/javascript" src="/backend/js/plugins/fullcalendar/fullcalendar.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.jBreadCrumb.1.1.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.dataTables.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="/backend/js/plugins/excanvas.js"></script> </script><![endif]-->
<script type="text/javascript" src="/backend/js/plugins/jquery.flot.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.flot.pie.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jflot.scripts.js"></script>
<script type="text/javascript" src="/backend/js/plugins/validation/languages/jquery.validationEngine-en.js"></script> <script type="text/javascript" src="/backend/js/plugins/validation/jquery.validationEngine.js"></script>
<script type="text/javascript" src="/backend/blueimp/tmpl.min.js"></script> <script type="text/javascript" src="/backend/blueimp/load-image.min.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.iframe-transport.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.fileupload.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.fileupload-ui.js"></script> <script type="text/javascript" src="/backend/blueimp/application.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.xdr-transport.js"></script>
<script type="text/javascript" src="/backend/js/plugins/jquery.wysiwyg.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.table.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.image.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.link.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.cssWrap.js"></script>
<script type="text/javascript" src="/backend/js/plugins/hoverIntent.js"></script> <script type="text/javascript" src="/backend/js/plugins/superfish.js"></script> <script type="text/javascript" src="/backend/js/plugins.js"></script> <script type="text/javascript" src="/backend/js/script.js"></script> <script type="text/javascript" src="/backend/js/mylibs/helper.js"></script>
<!--[if (lt IE 9) & (!IEMobile)]>
<script type="text/javascript" src="/backend/js/libs/imgsizer.js"></script> <![endif]-->
<script type="text/javascript" src="js/init.js"></script>
<script>
MBP.scaleFix();
</script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script><script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->
</head>
<body class="clearfix">
<header class="mobile">
<section class="container_12">
<div class="upper clearfix">
<img src="/backend/img/johns_logo.png" title="Dashboard" alt="" /> <div class="clear"> </div>
<div class="r usermenu">
<ul class="sf_menu clearfix">
<li>
<div class="sf-with-ul" style="width:160px;">
kjhgfd
Log out
<nav class="mainnav l">
<ul id="mainnav" class="sf_menu clearfix">
<li><img src="/backend/img/icons/helloadmin/dashboard.png" alt="Sessions" /><span>Sessions</span> <ul>
<li class="last">Add</li>
<li class="last">View</li>
</ul>
</li>
</ul>
</nav>
</div>
</section>
</header>
<script>
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
});
</script>
<div id="main" class="container_12 clearfix" role="main">
<div class="box twothirds">
<div class="boxheading clearfix"><h3><img src="/backend/img/icons/fatcow-hosting-icons/32x32/page_copy.png" title="Schools" alt="" />Sessions</h3><a class="move"></a></div>
<section>
<table class="display" id="tabled">
<thead>
<tr>
<th>Name</th>
<th>Starts</th>
<th>Track</th>
<th class="tview" style="padding-left:10px;">View</th>
<th class="tedit">Edit</th>
<th class="tdelete">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Something</strong> </td>
<td style="padding-left:10px;">8:00 am </td>
<td style="padding-left:10px;">MC </td>
<td style="padding-left:15px;"><img src="/backend/authake/img/icons/information.png" title="View" alt="" /></td>
<td><img src="/backend/authake/img/icons/pencil.png" title="Edit" alt="" /></td>
<td><img src="/backend/authake/img/icons/cross.png" title="Delete" alt="" /></td>
</tr>
</tbody>
</table>
<div class="clear"> </div>
</section>
</div>
<div class="box onethird menu">
<div class="boxheading clearfix"><h3><img src="/backend/img/icons/fatcow-hosting-icons/32x32/setting_tools.png" title="Actions" alt="" />Actions</h3><a class="move"></a></div>
<ul class="clearfix">
<li class="last"><img src="/backend/img/icons/add.png" title="Add" alt="" />Add</li>
</ul>
</div>
<div class="box onethird">
<div class="boxheading clearfix"><h3><img src="/backend/img/icons/fatcow-hosting-icons/32x32/alarm_bell.png" title="Notifications" alt="" />Notifications</h3><a class="move"></a></div>
<section class="clearfix">
<div class="login_notification_container"></div>
<div class="clear"> </div>
</section>
</div>
</div>
<footer role="contentinfo" class="clearfix">
<section class="container_12">
<div class="lower clearfix">
top
</div>
<div class="smallest">
<div class="l">
<span class="footer_copyright">© Copyright 2012 johns</span>
</div>
<div class="r">
<span class="footer_copyright">© Copyright 2012 johns</span>
</div>
</div>
</section>
</footer>
</body>
Any AJAX happening here? Sounds like something is "capturing" the back button in relation to an AJAX call and then somehow messing it up. What happens if you go back twice?
Maybe you're having a problem at your own browser. Can you link us to the website so someone can say if it's working or not? (Probably), it's a problem with your browser's settings. Posting a link would quite help anyway.