I've tried everything I know to get our responsive site http://www.usalight.com to print. I've tried adding #media queries to our stylesheets like below:
#media print {
* {
text-shadow: none !important;
color: #000 !important;
background: transparent !important;
box-shadow: none !important;
}
}
I've tried adding a separate print.css stylesheet linked in our header like below:
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print">
I've also added media="print,screen" to all our stylesheets to no avail. I don't get why I can't get anything to show up in print preview. Ideas?
It seems to have something to do with the fact that almost all your page is inside the .navbar-default div. Adding ending div tag before your #main-body id allows most of the page to print.
Related
I am not able to figure out why my button styles/colors are getting removed when I try to print my webpage. I am using bootstrap for some of my styles.
.button.primary {
font-size: 15px;
font-size: 1.5rem;
line-height: 18px;
line-height: 1.8rem;
background-color: #EEB111;
color: #FFF;
font-weight: 600;
text-decoration: none;
outline: 0;
}
It has to do with bootstrap. If your bootstrap includes print media styles, because it might be not customized in a way it excludes them, some styles will get changed.
(Hintergrundgrafiken = background graphics)
Also this is important, as you already did correctly in your screenshot:
To print the page with colors and stuff, e.g. in Firefox you have to tell the browser by clicking on File > Page Setup... > Print background or Print (icon in the top right menu) > Page Setup... > Print background.
Are you using #media print for printing those styles e.g.
#media print {
body { font-size: 10pt }
}
If not then follow here
https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Media
https://www.w3.org/TR/CSS2/media.html#at-media-rule
Hope this will help you in some way (y).
It is getting removed because css-stylesheets have attribute known as media it defines in which media this css file will work.
try to put this on your style sheet media="all" or media="print"
<link rel="stylesheet" type="text/css" media="print" href="print.css">
I'm working on styling an e-commerce Gekosale. Unfortunately I cannot alter the existing css files (they are overwritten when user saves some settings in the admin area). Those existing css files contain IE specific styles ie.
progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
I don't know how to alter them from my own file. I know how to alter every "normal" style
.class123
{
color: red;
}
can be easily altered with:
.class123
{
color: blue !important;
}
Can anyone tell me how to turn off IE gradients and others alike from CSS?
progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
should do the trick. You can also try :
filter: none;
write this in your CSS -
*{ filter: none !important; }
You can do something like that in your head tag:
<!--[if lt IE 9]>
<style type="text/css">
.your-class {
filter: none;
}
</style>
I'm trying to remove the 8px margin from the body tag.
I've tried (not all at once)
* { padding:0; margin:0; }
and
html, body { padding:0; margin:0 !important; }
and
body { margin:-8px; }
and even
<body style="margin:0">
The last one works, but only if I add the style attrib using Firebug; if it's in the original HTML, it gets ignored.
I'm at my wit's end.
Edit: facepalm I figured it out; I'd changed it to a cfm so I could easily call browser-specific styles. Thank you all for your help.
Include a reset stylesheet instead, this way you will reset all of the default values equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/
All you need is:
body { margin: 0; padding: 0; }
The padding is not needed for Firefox, but for Opera, which uses padding instead of margin for the default.
Demo: http://jsfiddle.net/k3j8Y/
body{ margin: 0;}
works ok for me :P
Include your stylesheet correctly
As your style is not appearing in FireBug's CSS rule stack, your CSS is probably not linked correctly. Ensure the stylesheet is in your head tag like so:
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
Ok, I am currently directing my style sheets as listed below:
<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>
On the Site.css I have a certain ID with a background-image:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
background: url('../images/topbackground.gif') no-repeat;
}
On the mobile.css I thought I could simply change it to "none" or another image, somewhat similar to this (I've tried several variations at this point):
#container {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #ffffff none;
z-index: 30;
}
However, it doesn't seem to be working. The background still shows on the mobile version of the site. I've been looking at it in both Opera Mini and the Android SDK Emulator. The mobile version of the site is picking up all other properties from mobile.css, just not background-image changes.
I know it's got to be something obvious at this point that I am just oblivious to. Any help would be appreciated.
this is because you load mobile.css before you load Site.css. (in the example you have made).
I thinks its working if you juste insert site first then mobile.css ..
If you need to keep it that way for some reason you gonna need to use !important afters the statement.
Here you can find a working example:
http://jsfiddle.net/2EaQb/
Hopefully my title isn't too confusing. Anyways, I'm still learning CSS and right now I'm in the process of creating a mobile version of my company's site. I currently want to modify our navigation bar and the CSS for the navigation is a bit lengthy. So right now in the CSS file there is
.nav { /*styles*/ }
.nav ul { /*more styles*/ }
.nav li { /*more <s>beer</s> styles*/}
/*and so on*/
Is there anyway to have it so the mobile version of the site ignores all #nav selectors from the original file regardless if I made a new selector in the mobile css? Or do I have to override each selector in the original css with new ones in the mobile css?
You can create your stylesheets with media attributes, like so:
<link rel="stylesheet" media="screen" ... etc./>
The fragment above references a normal browser window.
Here's where you can find out about those: http://www.w3.org/TR/CSS21/media.html
I would suggest separating the contents of your regular and mobile styles into separate stylesheets, like this:
Base: Styles common to both.
Regular: Styles only for the main site.
Mobile: Styles only for the mobile site.
Base is always included. Only regular or mobile is then included depending on the device viewing. That way you don't have to worry about overriding styles in one just to "reset" styles from another.
You can use the media property in your stylesheet link elements to determine when a stylesheet gets loaded.
You have to provide two different style sheet files and import them specifying a media type
<link rel="stylesheet" href="/all.css">
<link rel="stylesheet" media="screen" href="/computers.css">
<link rel="stylesheet" media="handheld" href="/mobile.css">
Alternatively you can use just one css file, in this way
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 13px }
}
#media screen, print {
body { line-height: 1.2 }
}
In your specific problem, you could just add #media screen at the beginning of the .nav definitions.
#media screen {
.nav { /*styles*/ }
.nav ul { /*more styles*/ }}
.nav li { /*more <s>beer</s> styles*/}
}