I'm having trouble getting the media query to function properly on Internet Explorer, regardless of

Experimenting with media queries and felt confident in my understanding of how they operate.

My HTML contains the following code:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 0px)" href="mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 350px)" href="tablet.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1050px)" href="screen.css">

Essentially, different CSS stylesheets are used based on screen size.

The functionality works flawlessly in Firefox and Chrome. However, it fails to work in Internet Explorer. Even after downloading version 11 today, IE seems to ignore all the links, resulting in no applied styling. I also attempted versions 8 and 9, but encountered the same issue.

Does anyone have insight into why this is happening? Could there be a syntax variation for IE?

csshtmlmedia-queries

Answer №2

Make sure to properly close the link elements because Internet Explorer is very particular about valid HTML formatting.

For example:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 0px)" href="mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 350px)" href="tablet.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1050px)" href="screen.css" />

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

object stored in an array variable

I am looking to find out if there is a way to access a variable or function of an object that has been added to an array. I want to display all the objects in the array on a web page using a function that will return a string containing their content. Thi ...

javascripthtml

What is causing the issue with my navbar 'bars' not showing up properly on mobile devices?

My navbar is not displaying the ul bars when I click on the button to open them in mobile view. Here's what currently happens: https://i.sstatic.net/fFIzM.png What I actually want it to look like is this: https://i.sstatic.net/a8fSK.jpg However, w ...

jqueryhtmlcss

Creating Consistent Button Padding in Material UI

I am working with a series of Material UI buttons that are defined as follows: <Button className={classes.button}>Edit</Button> <Button className={classes.button}>Duplicate</Button> <hr /> <Button c ...

cssreactjsmaterial-ui

The data from the form isn't being captured by req.body when sent through the addingTask() function to the specified url '/newtask'

Below is the HTML form and JavaScript function for adding a task: <form method="GET" action="/newtask" onsubmit="addingTask()"> <label> Today's Task: </label><br> <input type="text" ...

javascripthtmljquerynode.jsexpress

When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated. Note: Only the code for the table has been provided. Let me know if you&ap ...

javascripthtmlcsshtml-tablemodal-dialog

Chrome may clip the gradient radius when setting the focal point outside of the SVG gradient

I just joined this community and I might have some questions that could be considered too basic. Recently, I've been trying to understand SVG and came across something that left me puzzled. Take a look at this: <svg xmlns="http://www.w3.org/20 ...

csssvg

Finding the label that is linked to the current DIV or textarea by its "for" property

I am working on a project that involves two elements - a textarea and a div. Each element has a label attached to it using the "for" attribute in HTML. <textarea id="txta_1" class="txta" cols="40" rows="3" onkeyup ...

javascripthtmlfor-loopdom-events

What is the best way to use jQuery to smoothly transition to the next image in the lineup?

I have a requirement to create a slideshow of images, where each image fades out before the next one fades in. It seems like a straightforward task. <ul class="nav fading"> <li><?= anchor("#","Supported by",array("class" => "footer-hea ...

javascriptjqueryhtmlcssimage

The Django development server seems to be having trouble serving up Bootstrap 3 glyphicons

I'm facing an issue with a glyphicon from bootstrap in one of my templates on my website. Whenever I try to access the page, a 404 error pops up in the terminal and the icon doesn't appear. What's confusing is that the page works fine as a s ...

htmlcssdjangotwitter-bootstrap

Utilize Flexbox to occupy the rest of the available space

I would like the center row to occupy the entire browser width just like typical websites. Even if there is minimal content, I want the middle row to fill up the whole space. Below is the CSS code: @import "compass/css3"; .wrapper { display: -webkit-b ...

cssflexbox

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

javascripthtmltypescriptfunction

Enhance Your Webpage with jQuery Drag and Drop Feature Across Multiple Lists

I've been successfully using "jQuery UI Sortable connectwith" for drag & drop functionality, as shown in the example here: . However, I now need to implement drag & drop with multiple UI elements and it's not functioning correctly. Example: < ...

javascriptjqueryhtmljquery-ui

CSS - Struggling to center an element with absolute positioning in IE

I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child ...

htmlcssinternet-explorer

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

javascriptjqueryhtmlcssjquery-animate

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

I've been developing a prototype application that incorporates a plugin utilizing the deprecated HTML feature. Can I set custom pixel sizes for each font size ranging from 1 to 7? Currently, I'm contemplating using CSS zoom/scale properties, bu ...

javascripthtmlcssfont-size

Changing the color of a div element dynamically with JavaScript

Is there a way to improve the code below so that the background color of this div box changes instantly when clicked, without needing to click twice? function updateBackgroundColor(platz_id) { if(document.getElementById(platz_id).style.backgroundCol ...

javascripthtmlcss

Issue with footer alignment on Internet Explorer 7

Describing this scenario is a bit tricky. The footer of the website I am working on appears fine on most browsers, except for IE7. You can see the issue in the screenshots below: IE8/FF/Chrome IE7 (shifted half-screen to the right) The CSS code for the ...

cssinternet-explorer-7cross-browserfooter

Activate hover event on UI-Grid for interactive display

I often utilize in the following manner: <div ncy-breadcrumb class="title-shadow"></div> {{ getDeviceTree }} <div> <div ui-grid="gridOptions" ui-grid-resize-columns ui-grid-selection></div> </div> My object ...

htmlcssangularjsangular-ui-gridonhover

Using jQuery, select a JavaScript array from an external file by pointing to it based on the option chosen in a dropdown menu

Currently, I am in the process of developing a page translation feature using jQuery. It functions flawlessly when all languages are contained in a single lang.js file within an array. Nonetheless, if the project expands significantly with numerous languag ...

javascripthtmljqueryarrays

How to make a div move in various directions using jQuery animation

I'm in the process of creating a website similar to THIS. However, I am facing some issues with my background slider. It seems to be adding an extra slide to the right of the active slide, causing it to exceed the width limit. Additionally, the top di ...

javascriptjqueryhtmlcss