I am trying to make an IE8 compatible print CSS, however the browser is creating a large white div in place of what should be content.
In the regular CSS I have the following on the problem div:
.content-gradient {
background: #contentbg;
background: -moz-linear-gradient(top, rgba(45,45,45,0.8) 0%, rgba(45,45,45,1) 25%, rgba(45,45,45,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,0.8)), color-stop(25%,rgba(45,45,45,1)), color-stop(100%,rgba(45,45,45,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(45,45,45,0.8) 0%,rgba(45,45,45,1) 25%,rgba(45,45,45,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(45,45,45,0.8) 0%,rgba(45,45,45,1) 25%,rgba(45,45,45,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(45,45,45,0.8) 0%,rgba(45,45,45,1) 25%,rgba(45,45,45,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(45,45,45,0.8) 0%,rgba(45,45,45,1) 25%,rgba(45,45,45,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc2d2d2d', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */
}
This is a LESS mixin that I am applying to the div, then in my print.css I am attempting to clear this by using: background: #fff !important;
When I print preview, I see a grey background with black text. When I print the file, I get a solid white div. I have zero clues as to why this is being done.
I have a bunch of global stlyes I apply to clear the usual culprits:
#media print {
* {
overflow: visible !important; // fixes Firefox print CSS overflow bug
}
// Reset the CSS
body, html * {
background: #fff !important;
color: #000 !important;
padding: 0 !important;
position: static !important;
float: none !important;
}
// continue with the rest of the print css
}
This stylesheet has already been a nightmare matching FF & Chrome. Any help is much appreciated.
Related
I can't for the life of me get this to work. My gradient and tile go together to the bottom of the page but when I scroll further they don't continue. I searched for the issue on here but couldn't find a solution and I'm not the best coder so.
The site can be seen here access code: 000 http://richlandgaming.qsandbox.com/
Thank you in advance!
body {
min-height: 100%;
color: #ffffff;
background: #242424;
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"); /* fallback */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -webkit-gradient(linear, left top, left bottom, from(#242424), to(#000000)); /* Saf4+, Chrome */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -webkit-linear-gradient(top, #242424, #000000); /* Chrome 10+, Saf5.1+ */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -moz-linear-gradient(top, #242424, #000000); /* FF3.6+ */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -ms-linear-gradient(top, #242424, #000000); /* IE10 */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -o-linear-gradient(top, #242424, #000000); /* Opera 11.10+ */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), linear-gradient(top, #242424, #000000); /* W3C */
}
Your html element has a fixed height set to 100% - removing that should fix your problem.
It's defined in your style.css at line 121.
Hi friends is there any possible to get a double color background like this as 100% width and height like this
Here is the sample image:
Sample Image http://www.mediaserveit.com/demo/vivek/resources/question.png
(sample)white in left hand side rest of them are other color.
if i did with div's means
.left{
float:left;
width:30%;
background-color:#fff;
}
.right{
float:right;
width:70%;
background-color:#B97A57;
}
which made height problem.it increases depends upon the contents on the div's.if i use min-height means it also changed on different screens.if there any hack to set like this background in html body!because i need it in full screen
Use a gradient as background.
body{
background: #fcfcfc; /* Old browsers */
background: -moz-linear-gradient(left, #fcfcfc 30%, #6b1717 30%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(30%,#fcfcfc), color-stop(30%,#6b1717)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* IE10+ */
background: linear-gradient(to right, #fcfcfc 30%,#6b1717 30%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#6b1717',GradientType=1 ); /* IE6-9 */
}
Gradient generated using: http://www.colorzilla.com/gradient-editor/
Demo: http://jsfiddle.net/guE5L/
The problem is hard do describe without a screenshot...
I've styled the column view headers of views in xpages using this css just to get an gradient in all browsers:
.xspPanelViewColumnHeader {
background: #58a8cd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU4YThjZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBjODNiMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzBmNmM5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMjdkYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #58a8cd 0%, #0c83b2 50%, #0f6c95 51%, #127daa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58a8cd), color-stop(50%,#0c83b2), color-stop(51%,#0f6c95), color-stop(100%,#127daa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* IE10+ */
background: linear-gradient(to bottom, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* W3C */
background-position: left top;
color: #FFFFFF;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
Works fine so far. But if the column view header does not have a label there's a problem with the gradient in IE9 (not in Firefox).
In IE9 the gradient does not fill the full size of the header - i can see two blocks (one horizontal and on vertical) but both only a few pixels wide. But the rest of the column header stays white.
As soon as I enter a label (and even if it is only a ".") the header will be displayed as usual (full height and full width with the gradient).
This way works:
<xp:viewColumnHeader id="viewColumnHeader1" value="."></xp:viewColumnHeader>
This doesn't:
<xp:viewColumnHeader id="viewColumnHeader1"></xp:viewColumnHeader>
So the question is (if anybody could follow my description): How can I edit the css to prevent the column header to shrink with no defined label?
Was wondering if anyone knew how to change the navbar color in bootstrap v2.0.4
I tried this solution it does not seem to work: navbar color in Twitter Bootstrap
Any other solutions? I have tried the customized bootstrap packages, but I am so far into development I can make a switch like that.
Code:
.navbar-inner {
background-color: #2c2c2c; /* fallback color, place your own */
/* Gradients for modern browsers, replace as you see fit */
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
/* IE8-9 gradient filter */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);}
The color of the navbar come from the .navbar-inner lines 3582 to 3589 in bootstrap.css (for the version 2.0.4)
The css properties are applied in a specific order
background-color (recognised by all web browser)
vendor prefixes -moz, -ms, -webkit, -o (to serve specific web browser)
the standard (but not implemented yet)
Example of background-color override in boostrap.css with Chrome:
background-color:#ffffff; has been replaced with background-color:#eab92d directly into boostrap.css (it's not recommended but it's just to illustrate the point).
background-color: #EAB92D is applied first
-moz-linear-gradient and -ms-linear-gradient are ignored
-webkit-gradient cover background: #EAB92D(back to the default gradient)
-webkit-linear-gradient overrides -webkit-gradient
-o-linear-gradient and linear-gradient are ignored
Change the color of .navbar-inner from colorzilla
You can easily create a cross browser gradient with colorzilla
Create a <style> tag in <head> after bootstrap.css is called.
Then copy the css generated by colorzilla in .navbar-inner {} inside the <style> tag.
.navbar-inner {
background: #eab92d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */
background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
}
The css generated by colorzilla overrides all the css properties from boostrap.css as you can see below
Changing '.navbar-inner' is not enough few other bits needs to be changed.
.navbar .btn-navbar (the button to open the menu when width<768px) share the same properties as .navbar-inner
.navbar-inner, .navbar .btn-navbar {
background: #eab92d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */
background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
}
.divider-vertical (the vertical separator) uses the same colors used in the gradient
.navbar .divider-vertical {
background-color: #c79810;
border-right: 1px solid #eab92d;
}
.active (the highlight on the active page) is corresponding to the dark color of the gradient
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background-color: #c79810;
}
the color of the link on the menu needs to be changed as well, in this case 75% from the fair color of the gradient to white.
.navbar .nav > li > a {
color: #f9ed9d;
}
And finally the color of the .brand , in this case 50% from the fair color of the gradient to white.
.navbar-fixed-top .brand {
color: #634c08;color: #f4dc87;
}
The :hover color of links has not been changed bu can be with:
.navbar .nav > li > a:hover {color:white;}
Same for the color of the active link
.navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;}
One simple method (with the same result that got baptme) :
I use it in rails for conditional layout, (with gem bootstrap-sass).
in your scss file, before importing bootstrap, define some variables:
$navbarBackground: #c79810 ;
$navbarBackgroundHighlight: #eab92d ;
$navbarText: #f9ed9d ;
$navbarLinkColor: #f9ed9d ;
$navbarSearchPlaceholderColor: #EEC844 ;
#import 'bootstrap' ;
And got it :)
You can also use the Twitter Bootstrap theme generator at http://stylebootstrap.info/
and easily customized your themes.
If you only want to use the previous version of Bootsrap's dark look for navbars, you can add the .navbar-inverse class to the navbar element.
<div class="navbar navbar-inverse">
Take a look using firebug. You can click on the exact navbar in question and see exactly which css styles apply to it.
Extending #Traz super concise answer for LESS for people using twitter-bootstrap-rails gem
#navbarBackground: #c79810 ;
#navbarBackgroundHighlight: #eab92d ;
#navbarText: #f9ed9d ;
#navbarLinkColor: #f9ed9d ;
#navbarSearchPlaceholderColor: #EEC844 ;
I'm trying to have an active state to show the user what page they are on. I created a div class of "nav-active" around and anchor tag as shown below.
<li><div class="nav-active">Blog</div></li>
I did this so that i could make the background dynamic in size based on how many characters the nav-link was.
.nav-active {
background: #ff4b33; /* Old browsers */
background: -moz-linear-gradient(top, #ff4b33 0%, #ca2913 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4b33), color-stop(100%,#ca2913)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* IE10+ */
background: linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4b33', endColorstr='#ca2913',GradientType=0 ); /* IE6-9 */
height:70px;
margin-top: -30px;
padding: 0 15px;
because of the padding, depending on what page i'm on the links move.
I'm sure there is a better way about doing this, the question is how?
Any help would be greatly appreciated.
Apply the background to the link style directly, like this:
<li><a class="nav-active" href="index.html">Blog</a></li>
To prevent your links from changing in size depending on what page you are on, style the positioning for all your links and only the background for .navactive:
#nav li {
position: float;
}
#nav li a {
display: block;
padding: 0 15px;
...
}
#nav li a.nav-active {
-webkit-linear-gradient(top, #ff4b33 0%,#ca2913 100%);
...
}