What could be the reason for Internet Explorer pulling styles from the media=print CSS?

The HTML below incorporates a DHTML behavior into a CSS class. Unfortunately, Internet Explorer (specifically version 8 in compatibility mode) does not read the top style exclusively; instead, it also recognizes the @media print.

<!--[if IE]>
<style>
.roundCorners {
border: 1px solid #b4b4b4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #fff;
behavior: url(/css/border-radius.htc);
}

@media print {
.roundCorners {
 border: 5px solid #b4b4b4;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background: #fff;
 behavior: url(/css/border-radius_remove.htc);
}
}
</style>
<![endif]-->

Answer №1

In the case of IE8, the print CSS is being used instead of the media one because the print CSS is directly embedded in the HTML rather than being sourced from an external file. To address this issue, you can utilize the following code snippet:

<style type="text/css" rel="stylesheet" href="stylesheet_media.css" screen="media">
<style type="text/css" rel="stylesheet" href="stylesheet_print.css" screen="print">

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

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

Difficulty achieving transformation of one div element within another div element

My aim is to create a unique hover effect for a button where it tilts slightly without affecting the text. You can view my progress here: https://codepen.io/kyannashanice/pen/QWveOMg I tried stacking the text and button in separate divs and triggering the ...

Having trouble with individuals gaining access to my gh-pages on Github

After creating a gh-pages repository on Github to showcase my portfolio, I encountered an issue where visitors were being prompted to log into Github in order to view the page. Gh-pages are intended to be public, so I am unsure why this is occurring. My ...

The max-width attribute is failing to apply to the form within the Bootstrap framework

login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...

Page load triggers background color shift

Here is the structure of my markup: <div class="authentication"> <div class="form-inputs"></div> </div> My goal is to have the color of the authentication section slide down from top to bottom when the page loads. Initially, the ...

The functionality of the Bootstrap carousel for moving to the next and previous images is malfunctioning, as it only

The carousel on my website is not functioning properly. It only displays the first image and does not slide to the next pictures as it should. Here is the code snippet for the carousel: <body> </nav> <div id="carousel1" class="carousel slid ...

How to create space between elements in CSS without using margin or padding?

Recently, I stumbled upon a fascinating website while working on my own CSS grid project: I am curious to know how it was achieved. The Portfolio elements on the website have space between them without any visible margins or paddings that I could identify ...

Top button disappears in Chromium browser after fade-in effect

I've encountered a very peculiar issue. Whenever I use the page down or fragmented identifier to jump to a specific div, my "go to top" image disappears. Here is the code snippet: HTML: <a title="Go to top" href="#" class="back-to-top"></ ...

Is there a way to modify the background hue of an upward facing triangle when a submenu is hovered over?

Access the Code on Fiddle #nav .submenu:before { content:""; position: absolute; width: 0; height: 0; border-bottom: 22px solid #b29600; border-left: 11px solid transparent; border-right: 11px solid transparent; margin: -12px ...

Scrolling container embedded within a parent with absolute positioning

I have encountered a tricky situation with an absolute positioned div and its nested div having overflowing content. My goal is to enable vertical scrolling for the child div, however, my attempts so far have been unsuccessful. The challenge here is that I ...

Why is the radio button getting bound to the error instead of the label?

I'm currently working on validating radio buttons in a GSP file using the jQuery validation plugin. The issue I'm facing is that the error message is being bound to the first radio button and appearing at the bottom of it. Instead of displaying ...

What is the best way to make Bootstrap 3 move to a new line when there is not enough space?

I am facing an issue with a lengthy text inside a div with a class of "col-md-3". The text is so long that it appears to be overlapping with the content of another div. Adding spaces is not an option as it is an email address, and it displays fine on some ...

Issues with JavaScript and CSS functionality not functioning correctly as expected

There seems to be an issue with the order of HTML elements in the following code. When I place the div with the class thumb-bar before the full-img div, the JavaScript functions correctly. However, if I switch their positions, the JavaScript functionalitie ...

Confirm that the CSS syntax is valid

Is there a way to validate CSS syntax by checking for specific characters like "{", "}", ";", and ":"? I have come up with four checks to ensure the code is valid, such as verifying that the number of opening and closing curly braces match, as well as the ...

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

Analyzing neglected CSS in intricate websites

While there are tools available to identify unused CSS on static web pages, real-world scenarios often involve CSS being used dynamically after interactions such as opening modals or popups. How can we effectively manage our ever-growing render-blocking CS ...

What is the best way to incorporate text animation into a website using Cascading Style Sheets (CSS)?

Is there a way to make my text flash twice per second? I attempted to create animated text, but it didn't work out! ...

Steps for changing the direction of a dropdown menu to the left instead of the right

I'm having a bit of an issue with my inbox setup. I have a dropdown for it, but the dropdown is appearing off to the right and since it's at the end of my top navbar, it's not very visible. Here is the CSS code for the inbox: .notification ...

What is the best way to eliminate HTML unicode content from the final item in a continuously changing list?

li:after{ content:"\00b6"; } <ol> <li>banana</li> <li>orange</li> <li class="last-class">apple</li> </ol> I am currently working on a dynamic list where the number of <li> tags varies over t ...

Menu options arranged vertically, revealing submenus that fly out upon mouse hover

I am attempting to develop a vertical menu with flyouts, which includes sub-menus. Can you point out any issues in the code provided below? <html> <head> <title>Untitled Document</title> <style type="text/css ...