Strange problem with CSS - Unable to load a specific style based on the browser

Within my main.jsp page, I have the following code:

 <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>

    <script src="/targets/js/jquery.uploadify.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/targets/jsp/uploadify.css">
    <link rel="stylesheet" type="text/css" href="/targets/css/cssPicker.css">

    <!-- ko template: { name: showView } --><!-- /ko -->

This code initializes some components as scripts and css. I'm referencing cssPicker.css, which contains the following code:

<!--[if IE]><!-->
    <link rel="stylesheet" type="text/css" href="/targets/jsp/targetsMSIE.css">
<!--[endif]-->

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="/targets/css/targets.css">
<!--<![endif]-->

However, the styles are not being applied.

I am new to working with CSS and suspect that I may be incorrectly calling the stylesheet. Could you please advise me on the correct way to reference the stylesheet for users on Internet Explorer versus other browsers?

cssstylesheet

Answer №1

Compatibility with all Internet Explorer versions

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Works for all browsers except Internet Explorer

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Applies to all browsers.

<link rel="stylesheet" type="text/css" href="/targets/css/targets.css">

Conditional Stylesheets can increase your understanding of this concept.

If you are having trouble with the CSS locations "/targets/jsp/targetsMSIE.css", consider using "/targets/css/targetsMSIE.css" instead.

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

Compel the browser to initiate a reflow by adjusting the CSS

I am currently in the process of building a responsive image slider without relying on jQuery, using CSS3 transitions. The setup is quite simple: there's a viewport with a UL inside, containing relatively positioned LIs that are left floated. Howeve ...

javascripthtmlcssreflow

How can I prevent media controls from appearing in fullscreen mode on Microsoft Edge using CSS?

My video code allows for switching the video into fullscreen mode using custom controls. Here's how it looks: fullScreenButton.addEventListener("click", function() { if (video.requestFullscreen) { video.videoContainer.r ...

javascriptcss

Create a custom calendar in Vue.js that allows you to dynamically disable specific

Recently, I've been working with vue.js and I've come across an issue regarding how to apply a class to past and future days of the current month. Specifically, for March, I need to disable days with numbers 24, 25, 26, 27, 28, 29 in the first ro ...

javascripthtmlcssvue.js

Looking to add a glowing effect to a div when hovered using jQuery

Seeking assistance to add a glow effect to a div when hovered using jQuery. Below is the code snippet: HTML <div class="tablerow"> <div class="image"> <img src="1.jpg"> </div> <div class="info"> ...

jqueryhtmlcss

Issue with Angular Script not functioning upon reopening the page

I recently completed my first website, which can be found at Despite my efforts, I've encountered an issue that has me stumped. When you navigate to the certificate page, you should be able to input your name onto the certificate. However, if you sw ...

javascriptjqueryhtmlcssangularjs

Tips for keeping the DropDown Menu displayed even after moving the cursor away from the targeted element in Material-UI

import React from 'react'; import { makeStyles, Typography, Grid } from '@material-ui/core'; const styles = makeStyles((theme) => ({ root: {}, textStyle: { fontFamily: 'brandon-grotesque-black', tex ...

cssmaterial-uihovermaterial-designstyling

How to Align Printed Output in Angular Components

I am a beginner in Angular and I am looking to display modal information. To print the data, I am using onclick=print(). The data shows up in the print preview, but it is not aligned correctly. Here is a screenshot of my page. I want to align the data prop ...

javascripthtmlcssangulartypescript

Enhance the appearance of datatables pagination with a personalized touch

I am working on a page that utilizes server-side datatables and I want to implement a custom pagination style on it: HTML <ul class="pagination pagination-danger"> <li class="page-item"><a class="page-link" href="#" data-original-title ...

phphtmlcssdatatables

Ensure that the div is styled with a white background and positioned next to another div with a right margin

I have a white-colored div that needs to be positioned next to another element on a webpage. Additionally, I need a paragraph placed on top of this div for information purposes. Please refer to the following link to see what I am trying to achieve: https:/ ...

htmlcss

Verify the visibility of the toggle, and eliminate the class if it is hidden

I have implemented two toggles in the code snippet below. I am trying to find a solution to determine if either search-open or nav-open are hidden, and if they are, then remove the no-scroll class from the body element. $(document).ready(function() { ...

javascriptjqueryhtmlcss

Steps to altering the color of a second button with a button click

My goal is to create a button click function that allows only one button to be clicked at a time. For instance, when btn1 is clicked, its background color changes from transparent to green. Then, if btn2 is clicked, btn1's background color should chan ...

javascripthtmljquerycss

Animation in CSS3: Blinking overlay block

I am interested in creating an element that will overlay a section of a webpage using position: absolute. The element should be 50% opaque and blink between red and transparent, similar to the way OSX used to do with default dialog buttons. Is there a way ...

htmlanimationcssbackground

Is there an improved method for toggling animations in CSS using jQuery compared to my current approach?

Looking to create a toggle effect for a dropdown box that appears and disappears when a button is clicked. var clickState = false; $("#show").on("click", function() { if (!clickState) { $(".animated").removeClass("off"); refreshElement($(".an ...

javascriptjquerycssanimation

Side Text for Floating Action Button

I've been working on incorporating labels to the left of my FAB, following the Material Design principles. Despite my efforts, I'm facing difficulties in getting the labels to display properly. I would greatly appreciate any advice or tips on how ...

htmlcsstwitter-bootstrapmaterialize

What is the best way to toggle between two forms with JavaScript?

I have designed a login screen with two forms inside one div. The first form contains the login box, while the second form is for registration and is hidden using CSS with display:none;. Below the login button, there is a paragraph with an anchor tag to cl ...

javascripthtmlcss

What are some methods for toggling text visibility in PHP?

I am facing confusion regarding the functionality of this code. Here is the snippet in question : //start date to end date <?php if($show5 < $show6) { ?> <a>show content</a> <?php }?> If both 'start da ...

phphtmlcss

When hovering over an image, another image is revealed

<div> <a href="#"><img src="images/Informasjon_button.png" width="120px" height="120px" /></a> </div> <div> <a href="#"><img src="images/Mail_button.png" width="120px" height="120px" /></a> </div ...

javascriptjquerycsshtml

Title with lower border shorter than width

Looking to achieve an underline effect with a bottom border that is narrower than the width of the h2 title. Though I typically avoid uploading images, here is one to provide further clarification of my question: ...

htmlcsscss-shapes

Organize images with overlays to the center of the page

I need help centering a group of pictures (a 3x3 table) on my webpage. I was able to center them before adding image overlays, but now the images are showing up in the top left corner of the page. How can I group and center them, and how do I specify the i ...

htmlcss

Issues with Ruby image styles causing improper resizing of images

Looking for some guidance on how to address this issue. I added the following code to post.rb has_attached_file :image, styles: { medium: "300x300>", thumb: "100x100>" } validates_attachment_content_type :image, content_type: /&b ...

htmlcssruby-on-railsbootstrap-4