What is the best way to target CSS for print depending on the browser and operating system?

I need to print a page that includes a header image and text. When I try to print the page from a Windows computer using Firefox, IE or Chrome, it prints correctly. However, when I use Print Preview in Firefox on a Mac, it shows that the print scale is at 60% and the text on the sides gets cropped because the page seems to be printing at 100% scale.

Is there a way to target CSS specifically for Mac-based Firefox so that I can set the width of the container to 700 pixels? This way, even if it's scaled to 100% in Mac Firefox, it will still print without cropping part of the text.

Can I target CSS for the Mac OS version of Firefox only, or do I need to do this through code-behind using C#?

I have already attempted the following CSS, but it targets Firefox on all operating systems:

@-moz-document url-prefix() {
    .header {width: 700px;}
    .content {width: 700px;}
}
htmlcssasp.net

Answer №1

Implement the media rule specifically for firefox within the media-print section

    @media print {
      @-moz-document url-prefix() {/*only for firefox*/
        h1 {
          color: red;
        }
      }
      h1{color:blue;}/*other brwoser*/
    }
<h1>I am title</h1>
<button onclick="window.print();">print</button>

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

Troubleshooting image alignment problem within a flexbox display

Is there a way to align the two images so that the bottom right of the first image meets the top left of the second image? I'm struggling to figure out a solution, especially considering different browser sizes. Any advice or suggestions? .flexbox ...

htmlcssflexbox

clearing the input field without affecting the selection tag

I have a container that contains multiple input tags and one select tag, all with the className "contact". In jQuery, I am accessing them using the class name. There is also a checkbox that disables the inputs when checked, and when unchecked, it clears th ...

javascriptjqueryhtmlwebjquery-plugins

What could be the reason for FindControl failing to locate elements within a FormView placed in a UserControl?

In my ASP.NET UserControl, I am using a FormView. Within the EditItemTemplate, there are various controls that need to have specific values set based on certain conditions. I want to run server-side code whenever these controls are created. It seems like ...

asp.net

Position <p> at the center using Bootstrap 5

Having trouble centering a paragraph inside a div. Any assistance would be greatly appreciated! Below is the code I am working with: <div class="navbar d-flex flex-grow-1 justify-content-end align-items-end mb-3 d-none d-sm-flex"> <d ...

htmlbootstrap-5

In JavaScript, you can verify if a specific <input> element is an input-field

With the introduction of HTML5, a variety of new input types have been added: <input /> Is there a way to detect whether an input field is a text field (such as date, time, email, text, etc.) without explicitly specifying each type? I would like t ...

javascripthtml

Troubleshooting spacing and padding problems in Bootstrap 5.2.3's Scrollspy feature

Hello, I'm currently working on developing a new portfolio template that features a list on the left side to guide users through different sections of the page. Utilizing Scrollspy in Bootstrap 5.2.3 has been helpful so far, but I've noticed that ...

htmlcsstwitter-bootstrapbootstrap-5scrollspy

Reveal or conceal interactive material using data attributes

I am having difficulty in achieving a certain functionality on my website. Here is the HTML code I am using: <div id="menu"></div> <ul class="countries"> <li data-country="country-1" data-countryname="France">Category France</ ...

jqueryhtml

Creating a Product Box design with CSS and incorporating visual elements

I have created a simple box design in Photoshop that I want to use to display product information. The box consists of a Header, Body, and Button, each as separate images. How can I assemble these elements using CSS/HTML? I only need the header text at th ...

htmlcss

Upon selecting the hamburger menu, the menu pops up; however, the homepage text is visible overlapping the menu

I'm in the process of developing a responsive portfolio page using ReactJS and Tailwind CSS. When the screen size is smaller than the medium breakpoint, a hamburger menu icon appears. However, when I click on the hamburger icon to view the menu items, ...

cssreactjstailwind-css

Is it possible to modify the CSS styling in React using the following demonstration?

I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overl ...

javascriptcssreactjstypescript

At what point is the Visible attribute of child controls in asp.net automatically determined?

Example 1: <asp:Panel Visible="false" runat="server"> <asp:TextBox ID="textbox" runat="server" /> </asp:Panel> In this scenario, the code textbox.Visible will return false (even though TextBox.Visible was not explicitly set; it seem ...

asp.netdatagridtextboxviewstate

Using .get methods with jQuery's .on

I need to retrieve the tag name of the element that is clicked inside an li when the user interacts with it. The li element gets dynamically added to the HTML code. I have implemented the following code, but unfortunately, it does not seem to be functionin ...

javascriptjqueryhtml

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Seeking Advice I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of so ...

javascriptjqueryhtmlcss

Altering the hue within text/typography

While I may not be a professional web developer, I've successfully created an HTML5 and CSS3 website by piecing together information from various tutorials and conducting Google searches to hack code. My website aims to showcase environmental data in ...

javascriptphphtmlcssweb

Sliding multiple divs up and down with jQuery

Here is the code that I am working with: JavaScript: $(".Head").click(function () { if ($(".Body").is(":hidden")) { $(".Body").slideDown('fast'); } else { $(".Body").slideUp('fast'); } }); HTML: ...

javascriptjqueryhtml

Where do you see the Sys.require, ASP.NET AJAX loader script heading in the future?

Is the future of this script uncertain, or is it on its way out to be replaced by a different component? I rely heavily on its functionality and am curious if there is a superior alternative or what lies ahead for it... Just to clarify, I am referring to ...

asp.netajaxloader

Is there an image overlapping another image?

Currently, I am working on developing a website for a Food Cart project in my class. One of the key features I want to incorporate is the ability for users to click on an image of a plate and have a different image representing the food appear on top of it ...

javascriptjqueryhtmlcssmouseclick-event

What is the best way to incorporate an exception for the printThis() element?

Is there a way to exclude a specific div from being printed when using the printThis() function? For example: <div id="print-it"> <div>hello</div> <div id="no-print-this"> <button>must be show on page but not print</but ...

javascriptjqueryhtmlpluginsprintthis

Creating an interactive HTML form that updates in real-time based on user input can be achieved using vanilla JavaScript. This allows for a

I am working on a form that dynamically generates more form fields based on a user input value. <form> <input type="Number" name="delivery"> </form> For example, if the user enters '3', it should automat ...

javascripthtmlnode.jsformsinput

Encountering issues while attempting to add vertical scroll to a div

Trying to add horizontal scrolling to a div that contains two separate divs, each with a width of approximately 4080px. One of the divs holds a table with headers, while the other div has <td> elements in <tr>. I need to enable vertical scrolli ...

htmlcss