Eliminate any hyperlink mentions from the Media Print Screen

I'm experiencing a small issue where I am unable to remove the link reference from the print view.

Below is the HTML code snippet:

<table style="width: 436px; height: 374px;" border="0" cellpadding="5">
    <tbody>
        <tr style="background-color: #edfbef;">
            <td><span style="color: #3366ff;"><a title="Electricity Tariffs and Rates" href="http://newfea.oceanic.net.fj/your-home/electricity-tariffs-and-rates/"><span style="color: #3366ff;"><strong>Electricity Tariff &amp; Rates</strong></span></a></span></td>
            <td>Find out how you are being charged for the power you use at home</td>
        </tr>
    </tbody>
</table>

This is what I have in my header.php file for media queries:

<link href="<?php echo get_template_directory_uri(); ?>/resources/css/print.css" rel="stylesheet" media="print">

Here is a snapshot of how it looks in normal HTML View:

And here is the Media Print Vision:

In the print view, there are visible link references. Is there a way to remove this using CSS?

I have attempted using display: none and visibility: hidden, but that hides the entire link text as well.

htmlcss

Answer №1

@media screen {
  a[href]:after {
    display: none !important;
  }
}

Attempt to negate the effects of your print media with the given CSS.

Answer №2

Website Link: Click Here

<span class="printonly"><strong>Electricity Tariff &amp; Rates</strong></span>

Include this new span above the TD element.

[PLEASE NOTE: ASSIGN THE CLASS "printonly" TO THE NEW <td> FOR PRINTING PURPOSES ONLY.]

We will conceal the following TD during printing using the provided CSS:

[PLEASE NOTE: APPLY THE CLASS "withoutprint" TO YOUR <td>]

<span class="withoutprint" style="color: #3366ff;">
     .....
       .....

CSS Styling

.printonly{
    display:none;
}
    @media print {
    .withoutprint{
        display: none;
    }
    .printonly{
        display:block;
        color: red;
    }
}

Answer №3

It appears that these hyperlinks have been inserted by the CSS of your website. It seems likely that you are using a pre-designed theme or boilerplate.

I recommend reviewing the print styling within these CSS files.

You may need to search for code similar to this:

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

If you find it, consider removing that particular piece of code.

Answer №4

Check out this alternative method:

CSS Solution:

@media only print {
    a { text-decoration: none; color: black; cursor: default; }
}

@media only screen {
    a { cursor: pointer; }
}

SEE DEMO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unleash the power of jQuery by incorporating the Ajax functionality with a hover option to enhance user interactivity. Utilize the .ajax

On my website, I have a calendar displayed with dates like "11/29/2014" stored in an attribute called "data-date". The goal is to check the server for a log file corresponding to that date and change the CSS of the div on mouse hover. Here is the current ...

javascriptjquerycssajax

A more concise validation function for mandatory fields

When working on an HTML application with TypeScript, I encountered a situation where I needed to build an error message for a form that had several required fields. In my TypeScript file, I created a function called hasErrors() which checks each field and ...

javascripthtmlvalidationtypescript

Have you ever created a CSS class that you've had to reuse multiple times?

They always told me to consolidate repeated properties in CSS into one rule, like the example below (please forgive the poor example). I typically see this: .button, .list, .items { color: #444; } Having multiple rules like this can create a lot of clut ...

css

Challenges arise with the safari navigation bar within a PWA platform

Struggling with the formatting and spacing issues of a PWA application on IOS devices due to notches and navbar heights. One specific problem is that a chat input with absolute positioning and bottom: 0 does not display properly in Safari because of the n ...

htmlcssprogressive-web-apps

Utilizing Javascript to Open a New Tab from Drupal

I'm attempting to trigger the opening of a new tab when a specific menu link is clicked within a Drupal website. My initial approach was to incorporate JavaScript directly into the content of the page, but unfortunately this method has not been succes ...

javascriptjqueryhtmldrupaldrupal-7

Utilizing AJAX and PHP for dynamic changes based on listbox selection

Is there a way to make the query run whenever a selection is made from the listbox? if(isset($_POST['select'])){ $newselection=$_POST['select']; $query = "SELECT count(*) FROM listings where description=" . $newselection. ""; $r ...

phphtmlajaxforms

I'm currently facing difficulties trying to implement AJAX with JavaScript and PHP as the desired output is not being

My query is quite straightforward - why isn't the code functioning properly? I am attempting to have the text echoed in PHP displayed inside a div with the ID of "show". Interestingly, this works with a txt file but not with PHP or any other type of f ...

javascriptpythonphphtmlajax

Is there a way to eliminate this from the footer section?

Check out my website: If the text is not visible, try using a larger monitor or zooming out in your browser. I've added an image to help explain: I only want to remove that element + title on the first page This is the HTML code: <div id="to ...

htmlcss

Experience the advanced NgPrime p-dropdown template with templating, filtering, and a clear icon that collapses when wrapped within a form element

Check out this link for a demo Whenever I enclose the code below in a </form> element, the drop-down menu collapses. <h5>Advanced with Templating, Filtering and Clear Icon</h5> <p-dropdown [options]="countries" [(ngModel)]=& ...

javascripthtmlangularprimeng-dropdowns

What is the best way to get rid of a tooltip from a disabled button

I am facing an issue with my button that is disabled using ng-disabled. The problem is that the button still shows a tooltip even when it is disabled. I need to find a way to remove the tooltip when the button is disabled. Check out my Button ...

angularjshtmlcss

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

javascripthtmlcssangularjsvideogular

Understanding the relationship between CSS height and line-height can help developers create more

Is there a way to use CSS to set the height of a box based on its own line-height or its parent's line-height? This feature would make it much simpler to create text areas that are a specific multiple of lines, for example, displaying exactly three l ...

css

Adjust the Font Size of Bootstrap 3 across different breakpoints

I am currently using Bootstrap 3 and I have a requirement to adjust the font-size at different breakpoints across my website. My goal is to easily modify the font size in one place and have it automatically apply to all Bootstrap components. The desired b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

I would like to have the div completely fill the page on my website

How can I make a div fill the entire height of my website using Bootstrap? I want to ensure that the div extends all the way down Please provide guidance on how to accomplish this. ...

htmltwitter-bootstrap

How can I turn off autocomplete in MUI textfields?

Currently, I am working with the latest version of mui. Within my user contact info form, there is a zip code field that I do not want to be auto completed if the value is null. However, despite my efforts, it continues to autocomplete with the email saved ...

javascripthtmlreactjsmaterial-ui

Issue observed with the functionality of checkAll and uncheckAll after a user interacts with a single checkbox

After completing an Angular course on Udemy, I decided to implement a custom checkbox in my Angular app. However, I encountered an issue where the UI was not updating properly when using checkAll and uncheckAll functions after the user interacted with an i ...

cssangular

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...

javascriptjqueryhtmlcss

How can I stack two appbar components from Material Ui on top of each other without the vertical line separating them?

I am facing a challenge while trying to incorporate two AppBar components in Material-UI, stacked one on top of the other. The problem arises when a line appears at the end of the first AppBar, overlapping with the second one. Click here to view an image ...

cssreactjsmaterial-uicomponentsstyling

Ways to identify when a React child element is overflowing

tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...

javascripthtmlcssreactjs

Switching the body's background image dynamically using javascript

I'm attempting to switch up the background image using JavaScript. Here's how I've defined the background: body { background: black; overflow-x: hidden; overflow-y: hidden; } body:before { overflow-x: hidden; overflow ...

javascripthtmlcss