urls being shown after links when printing web page


Tags: html,css

Problem :

I have an issue with a site that I've created. When the page is printed (as in command+p) it prints out the urls of hyperlinks as part of the page content. I'm guessing this is using the :after pseudo class to add the href attribute after hyperlinks, but I can't find any instance in my stylesheets where it might be doing this.

I'm including the modernizer script in my page so it might be caused by something that script is doing.

It's difficult to debug this problem. Is there a way to spoof @media so that any stylesheets and scripts think I'm using print rather than screen?

UPDATE: I found the css that was causing this, but I could have found it faster if I had the use of firebug, which brings me back to my original question: How can I debug the print stylesheet using firebug. Do you just change the media attribute on the print stylesheet <link/> or is there a way to spoof it with the browser.



Solution :

The Web-Developer plugin allow you to do that.

http://chrispederick.com/work/web-developer/

Install it -> Look at toolbar -> CSS -> Display CSS by Media Type

Also, similar question here : How do you debug printable CSS?


    CSS Howto..

    How make a fixed element be on top of another position fixed element

    Yet another person asking how to center a navigation bar

    How to create the + button with CSS?

    How to change css background color dynamically in php using color from database

    how to change the background color of the holder of an image using jquery cycle

    How to add css 3dtransform property with jquery to a dom element?

    How to delete white space between two div element when they display as inline-block [duplicate]

    How do I stick my footer to bottom of the page with Google Chrome?

    How to style a parent element when the mouse is over a child element?

    How can I escape my application.html.erb file

    How can I implement this dual-gradient menu design?

    How to display just part of image on hover?

    css - how to remove inherited style

    How put an element more close to a html label

    How do i apply Table Header color to Table body using JQuery

    HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

    How to make string comparison exactly

    How to create multi-column data entry form using CSS in Asp.Net?

    How can i place a child div on a fixed position of a parent div that when i change place of parent then child should move automatically?

    jQuery / CSS: How to add page breaks dynamically

    div not showing above text box

    How to deselect using :not according to css property and value

    How to hide a part of a CSS borderline nicely

    How do you tell which css class to modify?[Example inside]

    Lazy loading images how

    How to place a responsive background according to content height with HTML / CSS?

    How to make a left and right panel, and be able to slide a divider between them?

    How to write bootstrap media queries

    How to change CSS according time with JavaScript

    How to use variable in CSS? [duplicate]