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.


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

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

    CSS Howto..

    How to Prevent An Inline Embed From Pushing Text Down (CSS)

    How to overlap items in an unordered list using CSS?

    How to use a CSS animation within a JavaScript plugin?

    How to make TD behaving like TR(row) with CSS?

    how to vertical align div elements using CSS?

    How do you add 'box-sizing: border-box' to Normalize.css file?

    How to load CSS on PC and Mobile by jQuery?

    How do I select an element in the dom with an attribute of ct:value?

    How to add fade in and fade out effect in CSS animations no javascript?

    Does anyone know how Pinterest.com's layout works?

    How to use Javascript to check and load CSS if not loaded?

    How to get angled corner like this in CSS, it's not round?

    Bootstrap: navbar showing a line

    How to select “label for=list[]” in CSS?

    How to make entire div clickable with css only

    how i can fit text to an image with css

    How can I push the primefaces DefaultMenuModel before an accordion panel?

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How do I make this Javascript checkbox trigger action work like my CSS only example

    cannot figure out how to make text appear inside div after hover animation

    CSS: how to set width to children's width?

    How to make only background image transparent in responsive square grid?

    Any ideas about how to use CSS to emulate a messy stamp?

    How can I split this image into pieces so when I write a long text, it doesn't go outside of the div?

    How to remove/replace cached css and js file from client Browser?

    Not sure how to use css selectors

    How can I have a table with a set height but auto height cells

    how do i change button/image onclick to active state?

    How to change header font and nav link color when slideshow image changes

    How to make div expand width 100% responsively?