No content just background , why is there a scroll bar? [closed] - css
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am really stuck on a small issue im having on my website.
Whenever i add a viewport to my HTML , it creates a scroll bar even though theres no content that is overflowing.
I am using Bootstrap as the CSS framework.
body {
/* Location of the image */
background-image: url(http://www.haristechnology.com/images/footer_lodyas.png);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
.navbar-default {
font-size: 26px;
background-color: rgba(0, 0, 0, 1);
border-width: 0px;
border-radius: 0px;
}
.navbar-default .navbar-nav>li>a {
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 1);
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(12, 245, 229, 0.59);
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: rgba(20, 250, 39, 1);
background-color: rgba(0, 0, 0, 1);
}
.navbar-default .navbar-toggle {
border-color: #000000;
}
.navbar-default .navbar-toggle:hover,
#nav.navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000000;
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #000000;
}
.custom{
margin-top:15%;
}
this is the HTML
<head>
<meta charset="UTF-8">
<title> HarisTechnology</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.css">
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link href="http://haristechnology.com/wp-content/themes/html5blank-stable/img/icons/favicon.ico" rel="shortcut icon">
<link href="http://haristechnology.com/wp-content/themes/html5blank-stable/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta name="description" content="HarisTechnology – Website">
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/haristechnology.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='mcafeesecure_css-css' href='http://haristechnology.com/wp-content/plugins/mcafee-secure/assets/common.css?ver=1.0' media='' />
<link rel='stylesheet' id='normalize-css' href='http://haristechnology.com/wp-content/themes/html5blank-stable/normalize.css?ver=1.0' media='all' />
<link rel='stylesheet' id='html5blank-css' href='http://haristechnology.com/wp-content/themes/html5blank-stable/style.css?ver=1.0' media='all' />
<script type='text/javascript' src='http://haristechnology.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/mcafee-secure/assets/common.js?ver=1.0'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/themes/html5blank-stable/js/lib/conditionizr-4.3.0.min.js?ver=4.3.0'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/themes/html5blank-stable/js/lib/modernizr-2.7.1.min.js?ver=2.7.1'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/themes/html5blank-stable/js/scripts.js?ver=1.0.0'></script>
<link rel="shortcut icon" href="http://haristechnology.com/wp-content/uploads/2015/05/favicon.ico"/>
<style type="text/css">
.screen-reader-response {
display: none;
}
</style>
<script>
conditionizr.config({
assets: 'http://haristechnology.com/wp-content/themes/html5blank-stable',
tests: {}
});
</script>
</head>
<body class="home page page-id-34 page-template-default logged-in index">
<div class="container">
<div class="col-md-12">
<div class="row">
<div style="background-color:transparent;border:0px;border-radius:0;margin-top:-1%;width:100%; height:25%;"class="well">
<!--Navigation Starts -->
<div style="margin-top:1%;"id='nav'>
<img class="animated bounceInUp" src="images/banner.png" style="width:100%;" />
<br>
<br>
<nav class="navbar navbar-default animated fadeIn" role="navigation">
<div class="navbar-header">
<button type="button" style="background-color:#FF1919 !important;" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.haristechnology.com/">HarisTechnology</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul id="menu-default" class="nav navbar-nav"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-34 current_page_item menu-item-36 active"><a title="Home" href="http://haristechnology.com/">Home</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a title="Products" href="http://haristechnology.com/productspage">Products</a></li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a title="Contact" href="http://haristechnology.com/contact-2">Contact</a></li>
</ul> </div>
</div>
</nav>
<!--Navigation ENDS -->
<!--Content Starts -->
<!-- /header -->
<div class="jumbotron" style="margin-left: 0%; border-radius: 0; margin-top: 0%; width: 100%;">
<h1>Hello</h1>
</div>
<div style="background-color:#AAF200;margin-left:0%;border-radius:0;margin-top:0%;width:100%"class="jumbotron">
<center>
<h2>
Website under construction.
</h2>
</center>
</div>
<h3 class="pull-right" style="color:#cde2bd;">Developed by HarisTechnology.</h3>
<!--Footer ENDS -->
</div>
</div>
</div>
</div>
</body>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script type="text/javascript">
(function() {
var sa = document.createElement('script'); sa.type = 'text/javascript'; sa.async = true;
sa.src = ('https:' == document.location.protocol ? 'https://cdn' : 'http://cdn') + '.ywxi.net/js/1.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sa, s);
})();
</script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/haristechnology.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ..."};
/* ]]> */
</script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.1.2'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/scripts.min.js?ver=1.1.0'></script>
<!-- analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62813338-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript">
(function() {
var sa = document.createElement('script'); sa.type = 'text/javascript'; sa.async = true;
sa.src = ('https:' == document.location.protocol ? 'https://cdn' : 'http://cdn') + '.ywxi.net/js/1.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sa, s);
})();
</script>
</html>
Any help would be greatly appreciated.
NOTE: This problem is only happening in Chrome so far and not Internet Explorer?
It's your div#nav. When you animate the logo up from the bottom, Chrome isn't calculating the height properly and you're getting a ton of overflow at the bottom of the document.
In your css for div#nav, add overflow: hidden; and your problem will go away.
I believe there is no viewport for the body and that is most likely causing the issue. Typically, a cover image is set for a div. I am not 100% sure thats it, but have you tried it without the background?
It's hard to guess based on what you've said, and without a fiddle; but it sounds like an issue with overflow. Have you tried just adding overflow:hidden, or overflow:visible, to your CSS?
Related
my !important "no-animate" class isn't making an exception for my navigation bar
my web app has an ng-animate transition applied to it in the style.css:
.ng-enter, .ng-leave {
position: absolute;
top: 8em;
left: -100%;
width: 100%;
transition: left .5s;
}
.ng-enter.ng-enter-active {
left: 0%;
}
.ng-leave {
left: 0%;
}
.ng-leave-active {
transition: left .5s;
left: 100%;
}
Unfortunately, this has resulted in it being applied to my navigation bar as well, which results in it causing a weird glitch where, whenever I log in or out, the links slide across the view for a half a second before appearing in the proper place:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="mainApp" ng-cloak>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=UnifrakturMaguntia" />
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="http://tappedout.net/tappedout.js"></script>
<!-- Latest compiled and minified CSS -->
</head>
<body id="background" ng-controller="mainController">
<div class="ourNav no-animate">
<div class="logo">Deckster</div>
<div>
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
</div>
<ul id="links">
<li ng-if="loginStatus !== true">
<div>
<a class="active" ui-sref="home" ui-sref-active="active">Home</a>
</div>
</li>
<li>
<div>
<a class="active" ui-sref="cardSearch" ui-sref-active="active">Card Search</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckBuilder" ui-sref-active="active">Deck Builder</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckCollection" ui-sref-active="active">Deck Collection</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div class="logout">
<a class="active" ng-click="logout()" ui-sref-active="active">Log Out</a>
</div>
</li>
</ul>
</div>
<div ui-view class="view-container" ></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/#uirouter/angularjs/release/angular-ui-router.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="./dropDownMenu.js"></script>
<script src="./app.js"></script>
<script src="./service.js"></script>
<script src="./controller.js"></script>
<script src="./cardSearchController.js"></script>
<script src="./deckBuilderController.js"></script>
<script src="./deckCollectionController.js"></script>
<script src="./homeController.js"></script>
<script src="./loginSuccessController.js"></script>
<script src="http://tappedout.net/tappedout.js"></script>
</body>
</html>
I've tried to add the class "no-animate" in hopes of having the links not slide around, but it hasn't helped despite being important.
.no-animate {
-webkit-transition: none !important;
transition: none !important;
}
what do I need to do to make my "ourNav" class not be effected by transitions? Note that I'm using bootstrap, so I don't know if that could be causing it.
edit: I don't know if the z-index might make a difference, but the styling has the navigation bar at z-index: 1, so it can drop down as a hamburger menu when viewed on tablet or mobile:
.ourNav {
background-color: black;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 5em;
align-items: center;
z-index: 1;
}
You can use :not(.no-animate) in your css to exclude those element wich have no-animate class. Like this:
.ng-leave:not(.no-animate) {
transition: left .5s
}
In this case the .ng-leave.no-animate wont have the transition effect
Edit:
window.onclick = () => {
const elements = document.getElementsByClassName("element");
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
element.classList.add("black");
}
}
.element {
background-color: blue;
}
.element:not(.not-me) {
transition: background-color 2s;
}
.element.black {
background-color: black;
}
<div class="element" > me </div>
<div class="element not-me" > not-me </div>
<div class="element" > me </div>
Look what happens on click. The elements with the not-me class don't get a transition. There is no need to use !important, just watch for the specifity. Hope it helps
Bootstrap can change the color of navbar but can't get rid of the color?
/*This is for the overall look of the page, what font and the repeated background image*/
body {
background-image: url("../Assets/crossword.png");
font-family: Rockwell, "Courier New", Georgia, 'Times New Roman', serif;
}
/*This is just to get the main content of the page centered*/
#mainBody {
width: 80%;
margin: auto;
margin-top: 10px;
}
.navbar-custom {
background-color: none;
}
<!DOCTYPE html>
<html>
<head>
<!-- This is the title of the first page -->
<title></title>
<meta charset="utf-8" />
<!-- This is the viewport settings for bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- These are the javascript, CSS, and jquery file scripts -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/MyStyleSheet.css" rel="stylesheet" />
</head>
<body>
<div id="mainBody">
<nav class="navbar navbar-inverse navbar-custom">
</nav>
</div>
</body>
</html>
Not sure why I am having so much trouble with this nav bar. Trying bootstrap because its supposed to make things easier..
But I can change the color of navbar background to say blue. But if I give the background color none. it does nothing.
I have tried marking it important, I seen suggestions to make it navbar-default and can't get it to work. I just want to background to be transparent and not have anything in it.
none is not a color, so you can't use it as the background color. You can use transparent instead.
Another problem you have is the navbar-inverse class in your <nav> element, and it will get higher precedence.
You can use .navbar-custom.navbar-inverse to fix this:
/*This is for the overall look of the page, what font and the repeated background image*/
body {
background-image: url("../Assets/crossword.png");
font-family: Rockwell, "Courier New", Georgia, 'Times New Roman', serif;
}
/*This is just to get the main content of the page centered*/
#mainBody {
width: 80%;
margin: auto;
margin-top: 10px;
}
.navbar-custom.navbar-inverse {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="mainBody">
<nav class="navbar navbar-inverse navbar-custom">
</nav>
</div>
For transparent background you need:
.navbar-custom {
background-color: transparent;
}
Firefox breaking on collapsable list
I have a collapsable list that works perfectly fine in Chrome, but when I open up FireFox and view it, it looks all wonky. I opened up the debugger and there were no declaration errors, is there something I'm missing?
(Cant post images yet!)
How it looks in Firefox ->
(http://i.imgur.com/SbcTnGU.png)
How it looks in Chrome ->
(http://i.imgur.com/ofYp755.png)
.collapsibleList li>input+* {
display: none
}
.collapsibleList li>input:checked+* {
display: block
}
.collapsibleList li>input {
display: none
}
.collapsibleList li list-group-item>.badge {
float: right
}
.collapsibleList label {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: 0px;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer
}
Using Firefox 49 with the snippets below, the code you pasted above worked flawlessly with some minor HTML parsing tweak.
<html data-ember-extension="1" class="fa-events-icons-ready" 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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 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]-->
<link href="https://use.fontawesome.com/b703330c8c.css" media="all" rel="stylesheet"></head>
<body>
<style>
.collapsibleList li>input+* {
display: none
}
.collapsibleList li>input:checked+* {
display: block
}
.collapsibleList li>input {
display: none
}
.collapsibleList li list-group-item>.badge {
float: right
}
.collapsibleList label {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: 0px;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer
}
</style>
<h1>Hello, world!</h1>
<ul class="collapsibleList">
<li><label class="list-group-item" for="mylist-node6">Highest Win Ratio<span class="badge">Click Me!</span></label>
<input id="mylist-node6" type="checkbox">
<ul>
<li class="list-group-item">
<img src="avatar”"> #1 Name <span class="badge">61.76% </span>
</li>
<li class="list-group-item">
<img src="avatar"> #2 Name <span class="badge">50.75% </span>
</li>
<li class="list-group-item">
<img src="avatar"> #3 Name <span class="badge"> 44.59%</span>
</li>
</ul>
</li>
<li class="list-group-item ">
<i class="fa fa-gamepad"></i> ClassicHG Leaderboards
</li>
</ul>
<!-- 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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/b703330c8c.js"></script>
</body></html>
Bootstrap 3: Navbar and IE8 not respecting respond.js?
I have a navbar with a custom breakpoint of 990px in which it will collapse after that point. The navbar works fine in modern browsers, but in IE8 it does not. I do have respond.js and html5shiv polyfills in my HEAD, so I am unsure why IE8 is not respecting my NAVBAR media queries. Does anyone have any idea as to what is going on?
My demo is here.
#media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-left, .navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display:block !important;
}
}
#media (max-width: 991px) {
#desktopNav {
display: none;
}
}
#media (min-width: 992px) {
#mobileNav {
display: none;
}
}
HTML code for navbar:
<header class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="logo"><img src="http://placehold.it/222x102" width="222" height="102"></h1>
<nav id="mobileNav" class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobileNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="mobileNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div>
</nav>
<nav id="desktopNav" role="navigation">
<ul class="nav nav-pills pull-right">
<li class="active">Home</li>
<li>Products and Services</li>
<li>Showcase</li>
<!-- <li>About</li>-->
<li>Order Products</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<!--/.col-lg-12-->
</div>
<!--/.row-->
</header>
Head tag:
<!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>Test Site</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
<!-- css here -->
</style>
<!-- HTML5 Shim and Respond.js 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>
Respond.js has known issues with IE8. You can't use #import statements on IE8 and Respond.js. If your css is on CDN you need to perform additional setup steps to get Respond.js running with IE8. IE8 doesn't support the boxing model, so property box-boxing cannot be combined with max-heigth, min-height, min-width and max-width. Check of you hace one of these issues, and see the Respond.js documentation
It seems that your media query is not working in the IE8. So, Use css3-mediaqueries-js instead of respond.js. Put this code in your head tag. <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> Also, you can check this two answers as well. Answer 1 Answer 2
jquery.mobile-1.4.1 not allowing custom setting footer navbar icons
I am working on jQuery mobile on intel-xdk and trying to set navbar in footer with custom icons. I have tried so many codes and tried to change the icons. With jquery.mobile-1.4.1 i am unable to find and set custom properties for nav bar icons. Now i tried my code with different versions which are not the latest ones:
1)1.2.1 and 1.8.1 these are working and allowing custom nav bar icons. When i used latest jQuery which is 1.4.1 I find ui-icon attribute in css but I found that it is applying through 1.4.1.js. I am stuck with that and want to use jQuery also for the slider. For this I have to use jQuery1.4.1 but with that I am unable to get custom nav bar icons. Any solution?
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--First try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<!--Second try with it(its working)-->
<!-- <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script> -->
<!--third try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For 1.4.x, custom icon background is assigned to the :after css selector:
.ui-icon-taifun:after {
background-image: url("taifun.png");
}
Then to use this icon in your buttons, data-icon should be set to "taifun" or whatever text you use after ui-icon-
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
Here is a DEMO