CODEWITHSUNDEEP
cssgoogle-chromeprintingstylesmedia
Vidiya Prasanth Pappannan
Vidiya Prasanth Pappannan

Reputation: 723

Print command in chrome doesn't apply css style

I need to draw a small vertical seperating line in my print document. When i apply it thro the CSS class ,it works pretty well with firefox and IE8, but the styles dont get applied for chrome. The styles are in @media print of my css file.

.verticalLine1 
{border:0.5px #B1B1B1;
border-style:solid;
border-top-width:15px;
width:1px;
}

Any pointers to solve this problem?

Upvotes: 2

Views: 3149

Answers (3)

Aalok Mishra
Aalok Mishra

Reputation: 196

Adding images for borders is never a good idea. Also, you need to keep in mind that chrome truncates the decimal values to closest lower number. Due to this 0.5px will be interpreted as 0px instead. I will suggest use 1px instead of 0.5px. This will remove so many issues.

Upvotes: 0

Vidiya Prasanth Pappannan
Vidiya Prasanth Pappannan

Reputation: 723

After 2 pathetic days, I couldn't crack up with a proper fix.But had few alternatives

Writing styles inline with the code worked Pretty perfectly. Code looks as below

<div style="border:0.5px #B1B1B1;border-style:solid;border-top-width:15px;width:1px;"></div>

Since the previous approach is not a great coding practice I was forced to create an image with the above dimensions and I added it as a part of the code.

Thanks to chrome.Atleast it adds images, if not css.

Upvotes: 0

Stichoza
Stichoza

Reputation: 4609

Try this in your CSS file:

.verticalLine1 {
    visibility: hidden;
    border: 0.5px #B1B1B1;
    border-style: solid;
    border-top-width: 15px;
    width: 1px;
}
@media print {
    .verticalLine1 {
        visibility: visible;
    }
}

and include CSS file without media="screen" attribute and without any JavaScript click event

<link href="styles/print.css" rel="stylesheet" type="text/css"/>

Upvotes: 2

Related Questions