Maintain the HTML font color when printing - Issue with IE settings, not the printer

I've been struggling with this issue all day. Initially, I thought it was a problem with the print settings, but then I realized that it's actually the "Print background colors and images" option in IE causing the trouble.

Here is the last test case code I used:

<html>
<style type="text/css">body{font-family:Courier;}pre{display:inline;}</style>
<body>
<b><font color="#FFFF00">this is a test</font></b><br/>
</body>
</html>

In Internet Explorer, "this is a test" appears as a bright yellow. But when printed or previewed for printing, it looks more like a muddy yellow. The same issue occurs if I try to export to PDF using a virtual PDF printer. Enabling "Print background colors and images" results in the correct yellow shade, although programmatically setting this option seems impossible based on my research.

It's not just yellow; other similar colors also end up looking alike in the print preview. Since I need to differentiate colors based on error margins, I can't simply use hues that are too similar.

So how can I work around this issue? It's puzzling why a setting for background colors would affect foreground text like this (unless there's a way to force foreground styling?). My HTML skills are quite basic and haven't been utilized for some time...

Thanks in advance for any assistance!

Answer №1

Give this CSS media query a shot:

@media print {
  body {
    /*insert your styles here*/
  }
}

As for Internet Explorer compatibility, I can't guarantee it will work across all versions. It may vary depending on which version you are working with.

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

Guide on stacking a transformed 3D div on top of a masked layer with higher Z-index without success

I am attempting to stack a green div on top of a blue div using CSS transformations. The blue div acts as a masked layer, while the green div is a dialog that should appear on top. I have tried adjusting the z-index property, but the blue div always ends ...

The Jquery script seems to be malfunctioning on one specific page while working perfectly fine on

I received a jQuery script from a foreign web page that I'm trying to implement on my own site. $(function () { var $txt = $('input[id$=TextBoxFiltroProv]'); var $ddl = $('select[id$=DropDownListProv]'); var $items = $ ...

Ways to expand logo space within the header of the Twentysixteen Theme on WordPress

I am facing an issue with my logo being resized to a much smaller size of 200px even though it is originally over 2000px wide. In the style.css file, I found the following code: .custom-logo { max-width: 180px; } Despite changing the max-width value t ...

What's the best way to customize the color of the text "labels" in the Form components of a basic React JS module?

I have a React component named "Login.js" that utilizes forms and renders the following:- return ( <div className="form-container"> <Form onSubmit={onSubmit} noValidate className={loading ? 'loading' : ''}&g ...

Issues with SVG Image Mask in Firefox and IE: How to Fix Them

Creating a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) has been easy for browsers like Chrome. However, I've been encountering significant difficulties in getting the mask to display properl ...

Issue with PHP and HTML Character Interactions

My variable looks like this: $name=' 18 " LCD TV '; When attempting to use it in an HTML input, the characters after the " do not display. Any suggestions on how to fix this issue? ...

What is the best way to place a header in a specific location on a

As I continue working on my project, I am facing a challenge in positioning the headings in specific places. My ultimate goal is to achieve a look similar to Figure 1 for my headings. [Figure 1][1] However, as of now, my layout resembles Figure 2. I find ...

Using my function to iterate through all 'li class' elements on an eBay Scraper page

Just getting started with Python and BeautifulSoup. I'm facing an issue with implementing my function on all the list items (li class) on a specific eBay page that shows sold items. Each sold listing appears as an li class. Here is the URL for refer ...

What is the best way to start tiny-slider automatically once the video has ended?

I am currently using the tns-slider plugin and have a setup with 3 slides (2 photos and 1 video). <div class='tiny-slider'> <div class='slide slide1'> <div class='video-slide'> <video id=&qu ...

The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

Is there a way to control the image size within an <img> tag placed inside an html5 video element? Currently, it keeps defaulting back to 0 x 0 pixels. The reason behind using this img is to serve as a fallback for outdated browsers where the video ...

Placing an object to the right side

I'm currently developing an app using React Native and I need to position something on the right side of the screen. <View style={searchDrop}> <TextInput style={textInput} placeholder="Search Coin ...

Navigating a Bootstrap modal using arrow keys for scrolling - up and down

I attempted to address this issue by using the following code: // here, 'this' represents the modal $(this).focus(); Despite trying the above solution and even attempting to trigger a click event on it, I was unable to get it to work! UPDATE ...

It appears that the box-shadow feature is malfunctioning on Internet Explorer 8

Hey there, I'm having an issue with the box shadow not displaying correctly in IE 8. Here's my CSS code: .lt-ie9 .imageonHover:hover { box-shadow:1px 1px 5px 5px #E7E0E7; border-radius:3px; zoom: 1; filter: progid:DX ...

The CSS specificity of a nested HTML element with no explicitly defined styles

Seeking clarification on this specific CSS cascading/inheritance rule. In the given example, I would have expected the text inside the em tag to be colored #000000, but I was informed that it would actually be colored #ff0000. I am familiar with CSS speci ...

Creating a table in VueJs and populating it with values retrieved from an MSSQL database in a .NET Core web application

I am developing a table within a .NET Core Web Application that includes multiple rows and columns filled with data retrieved from a MSSQL server through a WEB API Given the need for numerous rows and columns, I am considering using a for loop inside my & ...

Creating a perfect design with Font Awesome 5 SVG icons and vertically aligned text at the top

Check out my code example on CodePen, view source. I'm looking for a way to align an icon and text vertically without using JavaScript. I want to maintain the li element's line-height and other styles. Any suggestions? ...

Alignment of UI Divs with CSS Bootstrap and HTML

I am facing an issue with two divs in my UI. One div has a label, and the other contains a file selector. Currently, they are stacked vertically instead of being side by side. https://i.stack.imgur.com/fIz03.png How can I align these divs horizontally wit ...

The Enigmatic Gap Amidst Flex Elements

I have a situation where two divs are placed within a flex container. However, the second div is incorrectly aligning to the right side of the page rather than next to the first div. Despite the default values for flex-flow being row and justify-content b ...

Issue with AngularJS pagination: unable to detect the current page number

I am currently developing a compact application that showcases a JSON object of "users" in an HTML5 table. The application is built using Bootstrap 3 and AngularJS, and I have the intention to implement pagination for this table. Instead of having an arra ...

Obtain the state name after selecting it from the drop-down menu and clicking the submit button (part 3)

Read more about passing city names from PHP to JS in the second part of this discussion on Stack Overflow. This is the JSON data for states ($stateJsonObject): Array ( [0] => stdClass Object ( [stateId] => s1 [stateName] => Kuala Lumpur) ...