CODEWITHSUNDEEP
htmlcss
Zadot
Zadot

Reputation: 3

Style problems when printing page

I have a problem when wanting to display the print preview of a page. This is how it looks in the browser.

enter image description here

And this is how it looks when I vizualize the previous image I want to print.

enter image description here

These are the styles that I use. And probe with "media = 'print'". Also adding !Important; at the end of style

<!-- Latest Bootstrap min CSS -->
    <link rel="stylesheet" href="/REDRIM/assets/bootstrap/css/bootstrap.min.css">       
    <!-- Google Font -->
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>      
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="/REDRIM/assets/fonts/font-awesome.min.css">
    <!-- magnific popup CSS --> 
    <link rel="stylesheet" href="/REDRIM/assets/css/magnific-popup.css">
    <!-- timeline CSS -->   
    <link rel="stylesheet" href="/REDRIM/assets/css/timeline.css">  
    <!-- animate CSS -->        
    <link rel="stylesheet" href="/REDRIM/assets/css/animate.css">       
    <!-- Style CSS -->
    <link rel="stylesheet" href="/REDRIM/assets/css/style.css">     
    <link rel="stylesheet" href="/REDRIM/assets/css/responsive.css">
    <link rel="stylesheet" href="/REDRIM/assets/bootstrap/css/print.css" media="print">

What I want is to remove the link that appears on the label 

 a{outline: none !important;
    color: #337ab7;
    text-decoration: none;
    background-color: transparent;}

Try the following style, but I link when generating the preview to print still appears.

Upvotes: 0

Views: 104

Answers (1)

Rachel S
Rachel S

Reputation: 3920

You probably have something in your style sheet telling it to print with the link in parentheses. Remove the code that looks like this:

a[href]:after {
    content: " (" attr(href) ")"
}

Or you can override it with this:

@media print {
  a[href]:after {
    content: none !important;
  }
}

Upvotes: 1

Related Questions