I want my anchor tags to remain blue in color when I print it. Currently, when I print my webpage, the color of the anchor tag and everything (but images) changes to black. Here is the CSS I used
#media print {
a:link:after,
a:visited:after {
content: "" !important;
}
#media print {
.container {
width: auto;
}
.content{
font-style: italic;
color: #909090;
-webkit-print-color-adjust: exact;
}
#media print {
a,
a:link:after,
a:visited:after {
content: "" !important;
color: blue; /* or whatever color you want */
}
Related
I ran into this really odd problem cause I'm proficient with CSS. However, I have a CSS file that I'm trying to load in my PHP document and it's loading fine through the network tab but isn't loading it's css on the page.
Here is what I checked for:
1) filename was correctly spelled and there are no special characters, whitespace etc.
2) No errors in my console indicating the file didn't load properly.
3) I received a status of 200 on the file but when I go to preview the css file. It tells me "This request has no preview available"
4) Adblock is disabled.
5) I validated through CSS validator and no errors or warnings were returned.
I'm using PHP and JavaScript but have no redirects going anywhere in my code.
I'm trying to link this css file in my PHP document and my other css files work fine.
<link rel="stylesheet" type="text/css" href="css/responsive-table.css"> <!-- my file is indeed called "responsive-table.css" and it is located within the CSS folder.
Here is my CSS that will not load. It has 200 successful load on network tab but won't allow me to preview the file in the browser nor network tab. However, when I open the file there is code inside of it.
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #f8f8f8;
}
th {
background: #333;
color: white;
font-weight: normal;
}
td, th {
padding: 6px;
text-align: left;
}
.iconcontainer {
width:100%;
}
.smart-icon {
float:left;
padding-right:2%;
max-width:75px;
max-height:72px;}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
#media
only screen and (max-width: 768px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr:nth-of-type(odd) {
background: #ededed;
}
td {
border: none;
position: relative;
padding-left: 39% !important;
width:58% !important;
}
td:before {
position: absolute;
top: 10px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-size:11px;
font-style:italic;
opacity:0.6;
}
.SHOPPING-wrapper table tr.titlebox {
background:#fff;
border:0;
}
.SHOPPING-wrapper table tr.titlebox td {
padding-left:5px !important;
}
.SHOPPING-wrapper table tr.titlebox td::before {
display:none !important;
}
.SHOPPING-wrapper table tr.gray {
display:none !important;
}
/*
Label the data
*/
#metro td:nth-of-type(1):before { content: "Name"; }
#metro td:nth-of-type(2):before { content: "Route"; }
#metro td:nth-of-type(3):before { content: "Telephone"; }
#metro td:nth-of-type(4):before { content: "Website"; }
#taxis td:nth-of-type(1):before { content: "Service"; }
#taxis td:nth-of-type(2):before { content: "Telephone"; }
#ferries td:nth-of-type(1):before { content: "Name"; }
#ferries td:nth-of-type(2):before { content: "Location"; }
#ferries td:nth-of-type(3):before { content: "Telephone"; }
#ferries td:nth-of-type(4):before { content: "Website"; }
}
I have a text block on my website:
Specialtyreagents
<h1>Specialtyreagents</h1>
Can I somehow add a - symbol to this block within CSS, so it should looks like this:
Specialty-reagents
I can use only CSS in my case!
Thank you for your help.
Use a pseudoelement with the word you want on mobile, and use font-size to hide or show it.
example
codepen
h1:after {
content: 'Specialty-reagents';
font-size: 0;
}
#media screen and (max-width: 500px) {
h1 {
font-size: 0;
}
h1:after {
font-size: 32px;
}
}
<h1>Specialtyreagents</h1>
With just CSS you can't include that - but if you need to use it in a specific case you can write again the text like this with a pseudo-element:
h1 {
font-size: 0;
}
h1:before {
content: "Specialty-reagents";
display: block;
font-size: 1.5rem;
}
<h2>Specialtyreagents</h2>
<h1>Specialtyreagents</h1>
On the long ride you can have two html elements, one for mobile and one for desktop:
<h1 class="desktop">Specialtyreagents</h1>
and
<h1 class="mobile" >Specialty-reagents</h1>
Then, you should have some css code for handling it:
.desktop {
display: block;
}
.mobile {
display: none;
}
#media (max-width: 720px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
With media query:
#media only screen and (max-width: 500px) {
h1 > span:after {
content: "-";
}
}
<h1>Specialty<span></span>reagents</h1>
As others have said, you can use a pseudo element to achieve this.
The best way to go is to just add a new pseudo element when viewing on a small viewport (ie. a mobile phone). Here is some extra info on pseudo elements and how they can be used.
Example...
#media screen and (max-width: 768px) {
h1 {
font-size: 0px;
}
h1::after {
font-size: 30px;
display: block;
content: "Specialty-reagents";
}
}
<h1>Specialtyreagents</h1>
The only thing you may need to change if the max-width for the media query and the font size of the heading.
Try this code for the solution please:
#media only screen and (max-width: 500px) {
h1 > span:after {
content: "-";
}
}
I have this div named "container" that is supposed to be displayed when the max-width gets to 47em. This can be triggered through zooming in. It's initial display is none but in the media query i change it to display block. The problem is that even after zooming in enough to get the max-width to become 47em, it's still not displaying anything. Why is this and how can i go about fixing the problem?
Code: http://codepen.io/anon/pen/RWBJXv
html,
body {
height: 100%;
margin: 0px;
font-family: verdana, arial, helvetica, sans-serif;
}
#media (max-width: 47em) {
#container {
display: block;
}
}
div#container {
display:none;
}
div#nav {
position: relative;
width: 100%;
background: white;
box-shadow: 1px 1px 15px #888888;
}
div#logo {
border-right-style: solid;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.15);
font-family: 'Myriad Pro Regular';
font-weight: normal;
color: #1E3264;
font-size: 2em;
}
<body>
<div id="container">
<div id="nav">
<div id="logo">TEST</div>
</div>
</div>
Your code has several problems:
First of all, div#container is a css selector with a higher specificity than #container, which you are using inside your media query, so the general rule takes precedence.
Second, make sure you always put your media-queried rules after your general rules.
http://codepen.io/anon/pen/zvLLPa
Seems to be an order & specificity issue.
Try changing this
#media (max-width: 47em) {
#container {
display: block;
}
}
div#container {
display:none;
}
to this:
#container {
display:none;
}
#media (max-width: 47em) {
#container {
display: block;
}
}
Codepen Demo
If you swap around your media query with your general css, and add an important tag this sorts out your issue example:
#container {
display:none;
}
#media (max-width: 47em) {
#container {
display: block;
}
}
Check out this codepen: http://codepen.io/sshhdaniella/pen/EVppwR
We have been working on a new calendar interface which includes a printable "classic" calendar view. There was much working going into the #media print stylesheet, and while everything is looking great in Safari, the event times are overlapping the event name in Chrome. Cannot figure out why.
#media print {
body{
-webkit-print-color-adjust:exact;
}
img,
.calendar-nav button,
.calendar-date-picker,
.event .btn-group {
display: none;
}
.calendar-nav {
text-align: center;
padding-top:20px;
}
.calendar-nav .date-title {
font-size: 50px;
font-weight: normal;
}
a:link:after,
a:visited:after {
content: "";
}
#calendarTable div.event {
padding: 0;
margin-left:0;
text-indent: 0;
}
.events.active {
width: 100%
}
}
EDIT: I fixed the overlap issue by adding .event-location {float: none; margin-top: 0px;} into the print media query.
Also, in Firefox there is a huge margin to the left of the content:
It is pretty hard debugging these print style sheet to figure out what is going on. Even Chrome developer tools will show the correct print preview, but doing a real print shows it incorrect.
Any ideas on what to do to fix these issues? Is using an #media print inside of our main style sheet an issue?
http://www.puc.edu/calendar?state=full
Looks like adding a few styles to overwrite the Bootstrap defaults was all I needed:
.event-location {
float: none !important;
margin-top: 0px !important;
}
.event-time {
float: none !important;
}
body .container {
width:100% !important;
margin:0 !important;
}
I've created a html page with a header,some content and a footer. I tried to get a print of the HTML page, and there was 2 pages. I got the header in first page and the footer in the last page.
What i really need is the header and footer to show in all the pages like in a word document.
I checked and found that using the table format with the thead and tfoot,it can be done.
It worked in firefox and IE, but it's not working in chrome. Is this some webkit browser compatibility problem??
Is there any other way which is compatible with all browsers.
Update: As of April 2021, the bug is still open https://bugs.webkit.org/show_bug.cgi?id=17205. as mentioned below by SHAKU here https://stackoverflow.com/a/34884220/2776433
You can target print styles specifically with the "#print" css media style definition. This will allow you to create individual styles strictly for when the document is being printed, and in print preview.
I would start with this as a solid base.
#media print {
* {
color: #000 !important;
-webkit-text-shadow: none !important;
text-shadow: none !important;
font-family: "Times New Roman", Times, serif;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none!important;
font-weight: normal!Important;
}
header, nav, footer {
overflow:visible;
}
.body {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
a, a:link, a:visited {
&[href]:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
&[href^="javascript:"],
&[href^="#"] {
&:after {
content: "";
}
}
}
abbr[title]:after {
content: " (" attr(title) ")";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
Use fixed positioned elements that you activate with print media type:
#header, #footer {
display: none;
}
#media print
{
#header, #footer {
position: fixed;
display: block;
top: 0;
}
#footer {
bottom: 0;
}
}
(Here assuming you have div elements with id header and footer).
I had the same problem and found simple tags to work best for me.
<table>
<thead>
<tr><td>
content that should be printed as page header
</td></tr>
</thead>
<tbody>
<tr><td>
content that will be spread over all pages consecutively
</td></tr>
</tbody>
</table>
The table will look like a simple table in the browser, but in printouts the content of the <thead> tag is repeated on each page. No CSS required.
Tested in Firefox 32, IE 11 and even in MS Word 2010. Word does not translate the tag into "real" page headers, but repeats the content on top of each page. (You may have to switch to "Page View" to actually see the difference in Word).
none of the above answers are not really the answer for the question asked. From my experience there is no single clean solution right now available. Feel like chrome is purposefully avoiding this bug. https://bugs.webkit.org/show_bug.cgi?id=17205.