I was trying to use font icons in IE7+8 and ran into a problem that could easily be solved by an IE7 only stylesheet. Long story short, now both IE7 and IE9 run my IE7 only stylesheet somehow (IE8 runs perfectly fine). I can't understand why.
<head>
<!-- CSS3 in IE7+8 -->
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="js/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="css/style.css" /></noscript>
<![endif]-->
<!-- META -->
<meta charset="utf-8" />
<!-- TITLE -->
<title>title</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- Icomoon in IE7 / IE7.CSS -->
<!--[if lte IE 7]>
<script src="js/lte-ie7.js"></script>
<link rel="stylesheet" href="css/ie7.css" />
<![endif]-->
<!--FONTS-->
<link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="header" role="banner">
<img src="img/logo.png" title="title" alt="" />
</div> <!-- end #HEADER -->
<div id="main" role="main">
<div class="left content">
<h2>WHAT WE DO</h2>
</div>
<div class="center content">
<h2>OUR SPECIALTIES</h2>
<ul>
<li><a aria-hidden="true" data-icon="f">WATER</a></li>
<li><a aria-hidden="true" data-icon="$">FIRE</a></li>
<li><a aria-hidden="true" data-icon="#">LIGHTING</a></li>
<li><a aria-hidden="true" data-icon="a">AUDIO</a></li>
<li><a aria-hidden="true" data-icon="!">TECH F/X</a></li>
</ul>
</div>
<div class="left content">
<h2>CONTACT US</h2>
<div class="info">
<p>Name</p>
<p>e: <span class="brown">email</span></p>
<p>p: <span class="brown">888-888-8888</span></p>
</div>
<div class="info">
<p>Name</p>
<p>e: <span class="brown">email</span></p>
<p>p: <span class="brown">888-888-8888</span></p>
</div>
</div>
</div> <!-- end #MAIN -->
<div id="footer" role="contentinfo">
<p>©</p>
</div> <!-- end #FOOTER -->
</div> <!-- end #CONTAINER -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
CSS
#font-face {
font-family: 'icomoon';
src:url('/fonts/icomoon.eot');
src:url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('/fonts/icomoon.woff') format('woff'),
url('/fonts/icomoon.ttf') format('truetype'),
url('/fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* UNIVERSAL
=================================*/
body {
background-color: #292929;
background: url("/img/bg.png") repeat;
font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
font-size: 62.5%; /* 1em = 10px */
-webkit-font-smoothing: antialiased;
}
#container {
width: 960px;
margin: 0 auto;
}
h2 {
display: inline-block;
font-family: 'Maiden Orange', cursive;
font-size: 3.5em;
font-weight: 100;
color: #3c2811;
padding: 0 0 2px 0;
border-bottom: 1px #3c2811 solid;
}
a,
.center a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
color: #fff;
}
a,
.brown,
.center a:hover {
color: #3c2811;
}
li {
list-style: none;
margin: 0 0 20px 10px;
}
/* HEADER
=================================*/
#header {
background: url("/img/ribbon.png") no-repeat center;
height: 99px;
margin: 60px 0 0 0;
position: relative;
}
#header img {
display: inline-block;
position: absolute;
top: 13%;
left: 35%;
}
/* MAIN
=================================*/
#main {
overflow: hidden;
}
#main div:first-child h2 {
margin-left: 65px;
}
#main div:nth-child(2) h2 {
margin-left: 40px;
}
#main div:last-child h2 {
margin-left: 65px;
}
.content {
margin: 20px 0 0 0;
float: left;
height: 439px;
width: 320px;
}
.left {
background: url("/img/left-bg.png") no-repeat;
}
.left p {
font-size: 2em;
margin: 0 40px 0 20px;
line-height: 1.9;
}
/* CENTER */
.center {
background: url("/img/center-bg.png") no-repeat;
}
.center a {
color: #fff;
font-size: 3em;
-webkit-transition: color 0.15s ease-in;
-moz-transition: color 0.15s ease-in;
transition: color 0.15s ease-in;
}
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
padding: 0 30px 0 0;
}
/* CONTACT */
.info {
margin: 0 0 30px 0;
}
.info p:first-child {
padding: 0 0 10px 0;
}
.info p:nth-child(n+2) {
font-size: 1.7em;
line-height: 1.5;
}
/* FOOTER
=================================*/
#footer {
text-align: center;
font-family: 'Maiden Orange';
font-size: 2.4em;
margin: 0 0 20px 0;
}
What is before your <head> tag? Incorrect markup might trigger quirks mode or compatibility mode.
Try explicitly asking IE to render your page with the latest rendering engine available by adding this tag inside <head></head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
As #Phil mentioned, it could be quirks mode is triggering this. Too specific DOCTYPE tend to trigger it. To avoid triggering quirks mode with DOCTYPE, don't be specific. Use:
<!DOCTYPE html>
HTML5 for the win!
Related
This is the image i am a learner in html and css this is my first project and i have been battling with a particular problem about buttons on the main page i created the link and name for the buttons when it got to the button layout for designing the button the layout went sideways and i have tried everything i had known
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row {
width: 1140px;
margin: 0 auto;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size:cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
margin: 0;
color: #fff;
font-size: 200%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn {
display: inline-block;
margin: 1em 0;
padding:1em 1.5em;
background-color: #404040;
color:#fff;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box" >
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
</html>
]2
Was this something you had in mind?
I removed .row (not needed) and .hero-text-box (messed up the design with a fixed width). I placed .hero-text-box in the middle with display: flex on header instead. I also added a padding to header that changes depending on the screen width.
You can see the rest of the changes in the code below.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/*.row {
width: 1140px;
margin: 0 auto;
}*/
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.picsum.photos/id/835/300/200.jpg");
background-size:cover;
background-position: center;
height: 100vh;
/* added new code below */
display: flex;
flex-direction: column;
justify-content: center;
padding: 5vw;
}
/*.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}*/
h1 {
margin: 0;
margin-bottom: 1.5rem; /* added this line */
color: #fff;
font-size: 200%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn {
display: inline-block;
margin-right: 1rem; /* changed this line */
padding: 1em 1.5em; /* changed this line */
background-color: #404040;
color:#fff;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box" >
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
</html>
My CSS works fine but after adding Bootstrap through source files, some CSS styles were removed and were overridden by bootstrap's. I also tried using Bootstrap CDN but still, the same results. I also tried my previous projects as a reference, everything's the same but this one's not working. Here's my code:
This is my CSS and HTML File:
* {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
}
#font-face {
font-family: Minima;
src: url(font/Minima.TTF);
font-family: Arial;
src: url(font/arial.TTF);
}
/*home background image*/
#header {
background-image: url("../images/home.jpg");
min-height: 700px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
#mytitle {
color:#f2f2f2;
font-size: 60pt;
padding-top:20%;
font-family: Minima;
text-align:center;
}
#subtitle {
color:#f4f4f4;
font-size: 18pt;
float:right;
margin-right:15.5%;
font-family: Arial;
}
#subtitle2 {
color:#f4f4f4;
font-size: 18pt;
float:right;
margin-right:15.5%;
font-family: Arial;
}
/*navigation */
.div-menu .sub-menu{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
margin-right:5%;
margin-left:5%;
float:right;
font-family: Arial;
}
.div-menu .sub-menu li {
float:left;
}
.div-menu .sub-menu li a {
display: block;
text-decoration: none;
color: #FFF;
text-align:center;
padding: 14px 16px;
}
/*for ghost button*/
.ghost-button-semi-transparent {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
border-color 0.2s ease-out;
border-radius: 7px;
font-size:15pt;
}
.ghost-button-semi-transparent:hover,
.ghost-button-semi-transparent:active {
background-color: #fff; /* fallback */
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff; /* fallback */
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in,
border-color 0.3s ease-in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NAME | Web Profile</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="header">
<div class="div-menu">
<ul class="sub-menu">
<li>LOGO</li>
<li>Home</li>
<li>Profile</li>
<li>Experiences</li>
<li>Education</li>
</ul>
</div>
<div class="text">
<h1 id="mytitle">SOME CAPTION HERE</h1>
<h2 id="subtitle">CAPTION AGAIN</h2>
<br>
<br>
<h2 id="subtitle2">CAPTION AGAIN</h2>
</div>
</div>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>
Your order should be like this
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
you should change the order in which your css file is loaded ie,
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
Read more about it here: http://www.w3.org/TR/CSS2/cascade.html
Edit1:
As shown below * and body(tags) has lower precedence than class selectors, because of that your custom CSS is getting overridden by bootstrap, as bootstrap gives styles based on the classes such as container. To resolve this you can give a class to the body and apply all styles to that class.
* {
color: red;
}
.class{
color:purple;
}
span{
color: orange;
}
<p>p tag with out any class</p>
<p class="class"> Class has more precedence than * <p>
<span class="class"> Class has more precedence than tag(such as body, span, p etc) </span>
I'm making a very basic website, but can't remove the extra top space over the body element. It looks like this in both Chrome and Firefox:
I've tried most relevant solutions I found on this forum: I reset my body and HTML margin and padding to 0. Also, I made sure there are no children elements with top margins messing with my code.
body, html {
margin: 0px;
padding: 0px;
}
.navbar {
background:#312c2a;
height: 30px;
text-align:center;
}
.navbar li {
display: inline-block;
margin-right:20px;
margin-left:20px;
}
.navbar a {
color: white;
font-size:20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
This is my HTML code. I really can't find any problem. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8"/>
<link rel="icon" type="image/png" href="imgs/favicon.png"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
Many browsers give unordered lists a default top and bottom margin. You should add:
ul {
margin: 0;
padding: 0;
}
Demo Snippet:
body,
html,
ul {
margin: 0;
padding: 0;
}
.navbar {
background: #312c2a;
height: 30px;
text-align: center;
}
.navbar li {
display: inline-block;
margin-right: 20px;
margin-left: 20px;
}
.navbar a {
color: white;
font-size: 20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="imgs/favicon.png" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
try this :)
.navbar {
width: 100%;
height: 70px;
background: black;
margin-left: auto;
margin-right: auto;
position: fixed; /*fixed, relative, or absolute like you want*/
top: 0px;
z-index: 200;
}
ul {
margin: 0;
padding: 0;
}
and
.body{
margin: 0;
padding: 0;
background-color:white;
}
I am using pdfkit in order to generate pdfs from html strings, rendered by my Django's views.
For some reason, the output pdf is small.
My pdfkit option dictionary is -
options = {
'quiet': '',
'page-size': 'A4',
'margin-top': '0.75in',
'margin-right': '0.75in',
'margin-bottom': '0.75in',
'margin-left': '0.75in',
'disable-smart-shrinking': ''
}
and the output file is here
Html code is -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="pdfkit-orientation" content="Portrait"/>
<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>Dribble</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet">
<!-- Custom Font -->
<style>
body {
font-family: 'Open Sans', sans-serif;
}
p, a {
color: #002f54;
}
.nav {
background: #002f54;
color: #FFFFFF;
border-radius: 5px;
}
.ico {
padding-right: 5px;
top: 3px;
}
.nav > li p {
text-align: center;
font-size: 36px;
font-weight: 800;
}
.right-align {
float: right;
}
.pad-mar {
font-size: 18px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 30px !important;
margin-right: 30px;
}
.pad-mar-middle {
font-size: 18px;
padding-top: 78px;
padding-bottom: 25px;
margin-left: 30px !important;
margin-right: 30px;
}
.pad-mar-bottom {
font-size: 18px;
padding-top: 10px;
padding-bottom: 90px;
margin-left: 30px !important;
margin-right: 30px;
}
.pad-mar-footer {
padding-top: 20px;
margin-left: 30px !important;
margin-right: 30px;
}
.bor-bottom {
border-bottom: 2px solid #ccc;
}
.no-pad {
padding-left: 0;
}
.section {
margin-top: 20px;
margin-bottom: 20px;
}
.bold {
font-weight: 700;
color: #002f54;
}
.small {
font-size: 14px;
}
.bolder {
color: #002f54;
font-weight: 800;
font-size: 22px;
}
.normal {
color: #002f54;
font-weight: 700;
}
.smaller {
font-size: 14px;
font-weight: 700;
}
h3 .bold {
margin-top: 0;
}
.neg-mar {
margin-top: -25px;
}
.cus-img {
max-width: 85px;
margin-bottom: 10px;
}
.nav-stacked.mob > li {
font-size: 16px;
margin-left: 0px !important;
margin-right: 0px;
margin-bottom: 10px;
padding-top: 5px;
border: 1px solid #EB6C6D;
border-radius: 5px;
font-weight: 300;
text-align: center;
color: #EB6C6D;
}
.nav-stacked.mob > li p {
color: #002f54;
}
.nav.mob {
background: #FFFFFF;
}
.pad-mar-bottom.mob {
margin-left: 0px !important;
padding-bottom: 10px;
}
.pad-mar-footer.mob {
margin-left: 0px !important;
text-align: center;
padding-top: 10px;
}
.l-mar {
margin-left: 40px;
}
.titl {
color: #EB6C6D;
font-size: 16px;
}
.bot-mar {
margin-bottom: 20px;
}
.container {
max-width: 575px;
}
</style>
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="section">
<div class="container">
<div class="row bor-bottom bot-mar">
<div class="col-xs-6 ">
<img src="https://api.figo.me/assets/images/accounts/north_channel_bank_144.png"
class="img-responsive cus-img"/>
<p> Commerzbank Service-BZ</p>
<p>First line</p>
</div>
<div class="col-xs-6">
<div class="right-align neg-mar">
<h3 class="bold">First line</h3>
<p class="bold">First line</p>
<p class="bold">First line</p>
</div>
</div>
</div>
<div class="row">
<div class="">
<ul class="nav nav-stacked mob">
<li><span class="glyphicon glyphicon glyphicon-user ico"></span>From<p>Rewe GmbH</p></li>
<li><span class="glyphicon glyphicon glyphicon-credit-card ico"></span>Amount<p>$ 32,10 USD</p></li>
<li><span class="glyphicon glyphicon glyphicon-calendar ico"></span>Payment Date<p>Nov 5, 2017</p>
</li>
</ul>
</div>
</div>
<div class="row pad-mar-bottom mob bor-bottom">
<p class="titl"><span class="glyphicon glyphicon-tag ico"></span>Payment Reference</p>
<div class="l-mar">
<p class="normal">Hello Ennio,</p>
<p class="normal">You sent a payment of <span class="bolder">$20.00 USD</span> to Dribble. (paypal#dribble.com)</p>
<div class="no-pad">
<p class="smaller">It may take a few moments for this transaction to appear in your account.</p>
</div>
</div>
</div>
<footer>
<div class="row pad-mar-footer mob">
<a class="smaller" href="#">This document was automatically generated by Koryo</a>
</div>
</footer>
</div><!-- Container -->
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The problem was about setting the dpi parameter for pdfkit.
So if you encounter the same problem, just set the dpi according to your need. For me, this what I was needed
options = {
'page-size': 'A4',
'dpi': 400
}
I had this same issue. I just changed the default configuration:
PDFKit.configure do |config|
config.default_options = {
page_size: 'A4',
print_media_type: true,
dpi: 400
}
end
you can try to disable shrinking through the options as below
options = { 'disable-smart-shrinking': ''}
it's pretty simple. If referenced everything popular, and I'm the exact same code as my video I'm watching so I'm not sure what's going on. What happens if if I click my dropdown menu, it doesn't drop down.
Here's my 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 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>
<div class="container">
<div class="row">
<div class="cox-md-12">
<ul class="nav nav-pills">
<li class="active">Index</li>
<li>Push Pull</li>
<li>Nesting</li>
<li>Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
My CSS code:
html{
position: relative;
width: 100%;
min-height: 100%;
}
body{
font-family: "Roboto";
margin-bottom: 60px;
}
a{
color:#00A0F0;
}
.spacer{
height:70px;
width: 100%;
}
.spacer-1{width:100%;height:10px;}.spacer-2{width:100%;height:20px;}.spacer-3{width:100%;height:30px;}.spacer-4{width:100%;height:40px;}
.spacer-5{width:100%;height:50px;}.spacer-6{width:100%;height:60px;}.spacer-7{width:100%;height:70px;}.spacer-8{width:100%;height:80px;}
.spacer-9{width:100%;height:90px;}.spacer-10{width:100%;height:100px;}.spacer-11{width:100%;height:110px;}.spacer-12{width:100%;height:120px;}
.locationTitle{
text-align: left;
font-weight: 700;
font-size: 2em;
color:#06a;
margin-bottom: 24px;
margin-left: 24px;
margin-top: 24px;
}
.subTitle{
text-align: center;
}
.subHead{
line-height: 1em;
font-size: .6em;
}
.navbar{
border: 0px solid #white;
border-bottom: 2px solid #CCC;
box-shadow: 0 0 2px 1px grey;
height: 100px;
background-color: white;
}
.navbar>.container-fluid{
height: 100px;
padding: 0;
}
.navbar>.container-fluid>*{
height: 100px;
}
.navbar>.container-fluid img{
height: 100px;
}
.branding *{
display: block;
text-align: center;
padding: 2px 6px 6px;
color: #06a
}
.navRows{
height: 100%;
padding: 0px;
}
.navRows>div{
font-size: 1.4em;
line-height: 40px;
padding: 5px 0;
text-align: center;
}
.navRows[data-expand="false"]>div{
height: 50%;
}
.navRows[data-expand="true"]>div{
background-color: #06a;
text-align: left;
z-index: 9999;
}
.contactspacer {
margin-top: 45px;
}
.navIcon{
padding: 10px;
border-radius: 50%;
color:white;
background-color: #06a;
}
.navTopRow{
background-color: #06a;
color: white
margin-top: 50px;
}
.navTopRow a{
margin-top: 25px;
color: white;
font-size: 16px;
}
.navbar > li > a:hover{
text-shadow: 0 1px 3px #CDF;
}
.navbar li:not(.navSep):hover{
margin: 0 0 -2px 0;
border-bottom: 2px solid white;
}
.navSep{
width:2px;
height: 40px;
margin: 5px 2px 5px 2px;
background-color: #A9AFDD;
}
.imgCon{
max-height: 100%;
max-width:100%;
}
.imgCon img{
width: auto;
height: auto;
max-width:100%;
max-height: 100%;
}
.page{
width: 100%;
height: 100%;
padding-bottom:50px;
}
#media (max-width:768px){
div[aria-expanded="true"] .navSep{
display: none;
}
}
.mainTitle{
font-size: 1.5em;
font-weight: 700;
background-color: white;
}
.extraInfo{
background-color: #333;
color:white;
box-shadow: 1px 1px 2px 1px grey;
font-size: 1.2em;
}
.footer{
background-color: #06a;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
text-align: right;
}
.footer a{
text-align: center;
border-top: 1px solid grey;
height: 100%;
color: white;
}
.footer p{
text-align: center;
height: 100%;
color: white;
}
#media (min-width : 1200px) {
.col-xl-0{display:none;}
}
#media (max-width : 1200px){
.col-lg-0{display:none;}
}
#media (max-width : 992px){
.col-md-0{display:none;}
}
#media (max-width : 768px){
.col-sm-0{display:none;}
}
#media (max-width : 480px){
.col-xs-0{display:none;}
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
It is working if you pasted your CDN's correctly
As
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Then It will work perfectly as follows,
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="cox-md-12">
<ul class="nav nav-pills">
<li class="active">Index</li>
<li>Push Pull</li>
<li>Nesting</li>
<li>Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Check that you use the latest version of bootsrap
And check https://jsfiddle.net/qy59y2fs/
<div class="dropdown">