First: it's commercial software, I can't share a link to it so you can see what's happening. Ugh. Makes everything harder.
I've written a block of css for print purposes. Here were my steps:
Load page in application
copy HTML from developer tools
Paste html into jsfiddle (so, all the classes/structure is there properly)
write the css in jsfiddle--stuff looks like I want it to look
copy css from jsfiddle into my inquiryPrint.css file (the file that loads for printing)
SOME of the css works, some of it doesn't
Things I considered:
An override issue; inquiryPrint.css is the last file loaded, it should apply its overrides last
The print css file isn't invoked only on media type of print...in fact, here it is:
printWindow.document.write('<link rel="stylesheet" href="../css/InquiryPrint.css" type="text/css" />');
This is the most important, I think: the site is picking up SOME of the valid CSS selectors from the inquiryPrint.css file, but not ALL of them; e.g., it sees .row and applies it's CSS, but doesn't see .admItem and apply its CSS. And this is the stuff that works correctly in the jsfiddle--i.e. .admItem works in jsfiddle but not my app.
Things I tried:
Close/reopen
chrome hard refresh (cmd-shift-R)
it's shared code; I
pushed my changes up to our dev environment, pulled them down on a
co-worker's page, and validated it's not working on his computer
either.
Update
This isn't an override issue. We've even reduced/stripped out all other css files and the problem persists.
This isn't a specificity issue with complex selectors. Almost every selector is single-tier/level (see examples).
This isn't a browser issue. It does not work in Chrome or Firefox (although, of course, those two pages render slightly different).
I had originally cut/paste from jsfiddle, so I thought it might be a cut/paste issue. It's not--we we-wrote the classes by hand with no fix.
It's not a spelling issue, we've tested it by replacing '.admItem' with '.georgeItem' and cut/paste that into the correct place, didn't fix it.
Again, it's seeing OTHER content from the file, just not THIS content.
We stripped the whole css file empty, just left one class, it still didn't pick it up.
I put embedded CSS into the head of the HTML file, it is not picking that up either, for this one class, but it IS picking up other values we put there (e.g. body text transform: uppercase).
We can click through developer tools and see the correct css file, with the correct current changes so it shouldn't be a pointer/syntax issue--it sees the file is there, and picks SOME values from it, not others.
A few screenshots:
Chrome Developer Tools
The Embedded CSS
Here is the css file in its entirety.
.georgeItem {
text-transform:lowercase!important;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.heading {
font-weight: 700;
padding: 10px 0px;
}
h1 {
font-weight: 700;
padding: 10px 0px;
text-transform: uppercase;
font-size: 15px;
font-size: 1.5rem;
margin: 0 0 5px 0;
}
h2 {
font-weight: 700;
padding: 10px 0px;
font-size: 14px;
font-size: 1.4rem;
}
h3 {
font-weight: 700;
padding: 10px 0px;
font-size: 13px;
font-size: 1.3rem;
}
h4 {
font-weight: 700;
padding: 10px 0px;
font-size: 12px;
font-size: 1.2rem;
}
h5 {
font-weight: 700;
padding: 10px 0px;
font-size: 11px;
font-size: 1.1rem;
color: #4c7a87;
}
h6 {
font-weight: 700;
padding: 10px 0px;
font-size: 10px;
font-size: 1rem;
color: #66909c;
}
p {
font-size: 10px;
font-size: 1rem;
padding: 0 0 5px 0;
color: #515151;
}
em {
font-style: italic;
}
strong {
font-weight: 700;
}
pre em {
font-style: italic;
color: #686667;
}
.inquiryPrint {
font-family: 'Trebuchet MS',Helvetica,sans-serif;
font-size: 10px;
font-size: 1rem;
}
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important;
}
/* Black prints faster: h5bp.com/s */
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
/* Don't show links for images, or javascript/internal links */
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
table {
border-collapse: collapse;
}
thead {
display: table-header-group;
}
/* h5bp.com/t */
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 0.5cm;
size: landscape;/*does not work in some browsers like chrome */
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.inquiryPrint table {
width: 100%;
background-color: #ffffff;
}
.inquiryPrint tr,
.inquiryPrint thead tr,
.inquiryPrint tbody tr,
tr,
th,
td {
page-break-inside: avoid;
}
.inquiryPrint tr th,
.inquiryPrint thead tr th {
border-bottom: 2px solid #c0c0c0;
padding: 5px;
}
.inquiryPrint tr,
.inquiryPrint tbody tr {
border-bottom: 1px dashed #c0c0c0;
vertical-align: top;
}
.inquiryPrint tr:last-child,
.inquiryPrint tbody tr:last-child {
border-bottom: none;
}
.inquiryPrint tr td {
padding: 5px 10px 10px 2px;
text-align: center;
}
.inquiryPrint tr td,
.inquiryPrint tbody tr td {
text-align: center;
}
.inquiryPrint tr td.right,
.inquiryPrint tr th.right,
.inquiryPrint tbody tr td.right,
.inquiryPrint thead tr th.right {
text-align: right;
}
.inquiryPrint tr td.left,
.inquiryPrint tr th.left,
.inquiryPrint tbody tr td.left,
.inquiryPrint thead tr th.left {
text-align: left;
}
/*.inquiryPrint tr td.totalRow,
.inquiryPrint tbody tr td.totalRow {
text-align: right;
font-weight: 700;
font-size: 10px;
font-size: 1rem;
}*/
/* supports 15 character value with padding */
.inquiryPrint .wide15 {
width: 100px;
}
/* supports 30 character value with padding */
.inquiryPrint .wide30 {
width: 200px;
}
/* trying to insert code conversion to flexbox for printing clinical order only */
.head {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
border-bottom:1px solid black;
padding-bottom:5px;
margin-bottom:10px;
}
.value {
display:-webkit-inline-flex;
}
.row {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.head .row {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
}
.admLabel,.label,.label_left {
text-align:left;
font-family:Arial;
font-weight:700;
font-size:1em;
margin-right:3px;
}
.row.pushRight {
text-align:right;
-webkit-flex-direction:row;
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
.admPatientDetails .row {
margin-top:20px;
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:space-between;
}
.clinicalOrderLineAdministrationDetails table {
width:100%;
border-collapse:collapse;
}
.clinicalOrderLineAdministrationDetails table tbody tr {
border-bottom:1px dotted #818181;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
We found the issue last night. The way we were dynamically generating the page in javascript, there wasn't a doctype declaration at the top of the page. Once we added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt p://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Everything worked fine. Sigh.
the site is picking up SOME of the valid CSS selectors from the inquiryPrint.css file, but not ALL of them; e.g., it sees .row and applies it's CSS, but doesn't see .admItem and apply its CSS. And this is the stuff that works correctly in the jsfiddle--i.e. .admItem works in jsfiddle but not my app.
That sounds as if the other stylesheets, that are not targeted at any medium specifically, override the rules you have in your print stylesheet by using more specific selectors.
Using a tool like Firebug you'll be able to see which CSS rules are being applied and why they're overriding other styles.
As CBroe states, it's quite likely that CSS styles with more specific selectors are overriding your stylesheet. Clearly your stylesheet is being read, so that's not the issue.
Related
I have a html table with table headings in a Netsuite advanced PDF Template. For some reason one of headings has the word with extra spacing in between the letters, so instead of printing
Delivery
Address
for the header it prints
D e l i v e r y
Address
The Address part does not get the extra spaces.
The code for the header is:
<table class="itemtable" style="width: 100%;"><!-- start items --><#list record.item as item><#if item_index==0>
<thead>
<tr>
<th colspan="3">Delivery Address</th>
I have looked at css properties like word-break, letter-spacing, etc.; but I can't find anything that seem appropriate to fix this.
Anybody know why this is happening? This does not happen in an html page with the same code, so not sure why this is happening in Netsuite.
The css is:
table {
font-size: 9pt;
table-layout: fixed;
}
th {
font-weight: bold;
font-size: 8pt;
vertical-align: middle;
padding: 5px 6px 3px;
background-color: #e3e3e3;
color: #333333;
}
td {
padding: 4px 6px;
}
td p { align:left }
b {
font-weight: bold;
color: #333333;
}
table.header td {
padding: 0;
font-size: 10pt;
}
table.footer td {
padding: 0;
font-size: 8pt;
}
table.itemtable th {
padding-bottom: 10px;
padding-top: 10px;
}
table.body td {
padding-top: 2px;
}
table.total {
page-break-inside: avoid;
}
tr.totalrow {
background-color: #e3e3e3;
line-height: 200%;
}
td.totalboxtop {
font-size: 12pt;
background-color: #e3e3e3;
}
td.addressheader {
font-size: 8pt;
padding-top: 6px;
padding-bottom: 2px;
}
td.address {
padding-top: 0;
}
td.totalboxmid {
font-size: 28pt;
padding-top: 20px;
background-color: #e3e3e3;
}
td.totalboxbot {
background-color: #e3e3e3;
font-weight: bold;
}
span.title {
font-size: 28pt;
}
span.number {
font-size: 16pt;
}
span.itemname {
font-weight: bold;
line-height: 150%;
}
hr {
width: 100%;
color: #d3d3d3;
background-color: #d3d3d3;
height: 1px;
}
.synb {
font-weight: bold;
}
.synh7 {
font-size: 10pt;
line-height: 120%;
}
.synh9 {
font-size: 8pt;
line-height: 120%;
}
tr.synbordertop td {
border-top: 1pt solid black;
}
span.syntitle {
font-size: 20pt;
}
span.synnumber {
font-size: 13pt;
}
EDIT:
Netsuite uses BFO with these PDFs. See the following regarding this specific issue: https://bfo.com/support/faq/#31
How can I stop the letters in my table from being stretched out?
By default the text in tables is justified. In order to prevent this
you need to set align="left". Remember that each element has a
<p> implicitly placed around the data, so the best way to achieve
this is to use a style sheet and add:
td p { align:left }
which will cause all the table data elements to align to the left.
I've had this same issue before. It seems to be an issue exclusively with Netsuite's rendering of the PDF.
Here's the code I implemented to fix it:
Netsuite/HTML
<th><p style="align: center;">Color</p></th>
CSS:
td {
text-align: left;
padding: 2px;
}
th {
padding: 2px;
}
Here's how it looks without the center align:
Here's how it looks with the center:
I'm sure it's not the most ideal situation, but this is the only way I was able to get it to work, I'm sure I tried many of the same things you did.
I used the information in this link for further reference:
"This article is relevant if you are working with NetSuite Advanced
PDF Templates, and you are encountering an unusual HTML table
cell alignment effect in the generated PDF."
http://blog.prolecto.com/2016/03/18/netsuite-advanced-pdf-templates-how-to-fix-table-cell-alignment-justification-anomaly/
Hope this helps, it's at least the solution I implemented whenever I ran into a similar issue.
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
I have written the following code to change the fonts to 5px, while getting zoom - by 33%.
For <a> tag it works but for the rest of the elements it didn't.
Any suggestions, what can cause the reason?
#media screen and (min-width: 5000px) {
tbody:nth-of-type(1) th,
tbody:nth-of-type(1) td {
font-size: 5px;
}
tbody:nth-of-type(2) th,
tbody:nth-of-type(2) td {
font-size: 5px;
}
tbody:nth-of-type(1) a,
a:hover {
font-size: 5px;
}
tbody:nth-of-type(1) tr::before {
font-size: 5px;
}
}
CSS
.title{
margin-top: 200px; // does not work!
margin-left: 20px;
font-weight: bold;
color: $green;
font-size: 2.5em;
}
.title:hover{
background-color: transparent;
}
.title:visited{
color: $green;
}
rails / html.erb
<body>
.....
<%if current_page?(login_path) or request.path == "/signup"%>
<%= link_to "TITLE", "#", class: "title"%>
<%= yield %>
<% else %>
.....
</body>
My title CSS use to work but now it does not. Right my title is always stick to the top of the screen no matter what.I've tried margin-top and padding-top, but it refuses to move down. Margin-left, however, does work, so I am not quite sure why one aspect of margin works but the other does not.
What am I doing wrong here? And if you think the problem is not listed in the code above but rather elsewhere in my CSS, please let me know so I can maybe look into other parts of my css where the problem might be !
Just in case below is the portion where it defines the fundamental layout
/* BASIC CONFIGURATION */
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
table{
border-collapse: separate;
border-spacing: 10px 5px;
}
td{
margin-right: 10px;
}
#main-content{
font-family: 'Lato', sans-serif;
}
ul li {
list-style: none;
}
a, a:hover, a:focus {
text-decoration: none;
outline: none;
}
a:hover{
background-color: inherit;
}
::selection {
background: #68dff0;
color: #fff;
}
::-moz-selection {
background: #68dff0;
color: #fff;
}
#container {
width: 100%;
height: 100%;
}
Your problem is right here:
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
You have marked that you want all margins and padding to be 0 and made them !important. If you want to override that you have to make your .title element to be important for margins.
I would recommend avoiding !important as much as possible. Typically you don't need it unless you are overriding a provided CSS that defines some fields with !important.
You use percentage for padding-top. Use pixel value and it will work. Percentage in this case will only work if you have fixed height
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}