Bullet points may not appear when printing in IE8/9 unless you select the option to print background colors and images

I created a jsfiddle on http://jsfiddle.net/hxsy6/

The problem I'm facing is that when printing the page in IE7, the bullet points are printed with the actual bullet image. However, in IE8/9, they do not print. If I go to Print Preview -> click the settings icon and check "Print Background Colors and Images" in IE8/9, then the bullet points get printed (I haven't tested this with other browsers yet). This checkbox doesn't affect printing in IE7.

Does anyone have suggestions on how to adjust the CSS so that an IE8/9 user doesn't need to check this box, similar to IE7?

Thank you for your help.

Edit: Disregard any margin/padding issues; it was just a quick mock-up.

Answer №1

It appears to be a bug specific to IE7, especially because the images intended for printing are set as background images. One possible workaround is to create a print stylesheet that replaces these image bullets with regular CSS bullet points.

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

The vertical menu was added, but the text did not align properly

I pasted a sidebar from a different source https://i.stack.imgur.com/jkYWz.png My goal is to have the text appear at the top of the page, similar to this example https://i.stack.imgur.com/1aR5s.png After adding this line, my text is displaying at the b ...

Updating the table row by extracting data and populating it into a form

As part of my project, I am implementing a feature where I can input 'Actors' into a table using a Form. This functionality allows me to select a row in the table and retrieve the data of the chosen Actor back into the form for updating or deleti ...

What distinguishes submitting a form from within the form versus outside of it?

When the code below, you will see that when you click btnInner, it will alert 'submit', but clicking btnOuter does not trigger an alert. However, if you then click btnInner again, it will alert twice. Now, if you refresh the page: If you first ...

Navigate through the page and once you reach a specific point, scroll the element

I'm feeling a bit stuck on how to achieve this particular effect. Imagine a web page where, as a user scrolls down, a specific element responds to the mouse scroll input by appearing to move along with the scrolling motion. Once that element reaches ...

What is the best way to adjust the value within a span element using plus and minus buttons located near an input field?

Is there a way to implement input addition using + and - buttons, even though it has been working without buttons so far? How can I achieve this functionality with the help of javascript or jquery? // To calculate the sum of three input values in a spa ...

TranslateY animation glitching

I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...

Utilizing the classList property with elements that are hidden from view

How can I use JavaScript to toggle between classes? I can't seem to understand why an element that is set to display: none; is unable to receive a class using classList. In simpler terms, if I define #div1{ width: 25%; background-color: #000000; ...

Creating a drop-down layout with multiple columns can improve the organization and aesthetics of your webpage

Looking to achieve a column layout for child <li> elements within nested <ul> elements? Currently, I have the traditional dropdown structure with multiple <ul> items inside <li> tags. My goal is to display these child list items in ...

Adjust the height of column divs to equal the height of their parent container

Looking for a solution: I have multiple divs in a column layout and I want them to expand to match the original height of the parent. The parent's height is not fixed as it is part of a flex-based page design. Can this be done? In the example provid ...

Troubleshooting problem with CSS alignment within Bootstrap framework

Having trouble with the alignment when using bootstrap CSS. My desired layout is as follows: Place name: dropdownbox Gender (radio-button)Male (radio-button)Female Amount Max: textbox Min: textbox Any advice on how to achieve this? ...

Angular 7 compile error NG8002: Unable to bind object as it is not recognized as a valid property

Currently working on an Angular 7/8 test App. Encountering a compile error Can't bind 'discounter' since it isn't a known property of 'paDiscountEditor' The HTML where the error is occurring is simple... Below are all the nec ...

Customize the color of the horizontal line in React using dynamic properties

Is there a way to customize the color of an <hr /> element in a React application? If we were to use a functional component to accomplish this, how would we go about it? ...

html issue with the footer

Just starting out with HTML and encountering some difficulties with adding a footer. The main issue is that when I add the footer, the 'form' element gets stretched all the way down until it reaches the footer - you can see an example of this her ...

Images of equal height without compromising the resolution

How can I create responsive images with the same height inside a DIV tag, with a specified height of 200px? Any assistance would be greatly appreciated. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="desc ...

Different parameters in an Angular filter pipe

Currently, I am facing a challenge in implementing multiple filters on a pipe for a search result page that retrieves data from an API. How can I integrate different parameters into this filter pipe successfully? Access the application here: https://stack ...

What is the best way to modify a CSS property using logical operators in JQuery?

If an element with the class ".has_padding" does not have any text content, it should be set to "display:none;". However, those elements with text inside should remain visible. Below is some code where I have styled the elements to demonstrate the issue. ...

Angular fails to function properly post rendering the body using ajax

I recently created a HTML page using AJAX, and here is the code snippet: <div class="contents" id="subContents" ng-app=""> @RenderBody() @RenderSection("scripts", required: false) </div> <script src="http://ajax.googleapis.com/ajax/ ...

Problem with a JQuery Slide Show Plugin

My JQuery-created image rotator is generating a Microsoft JScript runtime error: Object Expected message when it runs. Here's the code I'm using. Thank you in advance! <!doctype html> <html> <head> <title>JQuery Test< ...

The HTML and script tags are failing to connect

I recently started learning angularjs by watching the Egghead.io videos. However, I encountered an issue where I couldn't link my JavaScript page to my HTML page. my-index.html <!DOCTYPE html> <html> <head> <title>Angular ...

Tips for collapsing or expanding a single button in Angular 6

I want to create rows of collapsible buttons in my code, but every time I visit the page, all the buttons are already expanded. Additionally, when I click on any button, they all expand or collapse simultaneously. HTML <div id="accordion" *ngFor="let ...