Enhance the elastic layout to ensure full compatibility with Internet Explorer

My elastic layout functions perfectly in Chrome and other major browsers, except for IE which seems to be ignoring the @media query.

http://jsfiddle.net/U2W72/17/embedded/result/

* {margin: 0px; padding 0px'}

.thumb {
    float: left;
    width:16.8%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 4%;
    background: pink;
    height: 200px;
}
.thumb:nth-child(5n) {
    margin-right: 0px;
}
.thumb:nth-child(5n+1) {
    margin-left: 0px;
}
@media (max-width: 1200px) {
    .thumb, .thumb:nth-child(1n) {
        width:22%;
        margin-left: 2%;
        margin-right: 2%;
        margin-bottom: 4%;
    }
    .thumb:nth-child(4n) {
        margin-right: 0;
    }
    .thumb:nth-child(4n+1) {
        margin-left: 0;
    }
}
@media (max-width: 600px) {
    .thumb, .thumb:nth-child(1n) {
        width:48%;
    }
    .thumb:nth-child(2n) {
        margin-right: 0;
    }
    .thumb:nth-child(2n+1) {
        margin-left: 0;
    }
}
@media (max-width: 400px) {
    .thumb, .thumb:nth-child(1n) {
        width:100%;
        margin-left: 0px;
        margin-right: 0px;
    }
}

Issue

Although I'm okay with the elastic feature not working in IE, the problem lies in the media query that sets the margins to 0 for left and right items, which IE is not picking up. This results in the layout becoming too wide and causing the 5th box to drop down to the next line.

Query

How can I create a fallback solution for IE to prevent the 5th item from dropping down to the next line while maintaining a 5 column layout?

Possible Solutions

  • Create a CSS rule specifically for IE that sets the box width to 16% instead of 16.8%
  • Set the default layout width to 16% and use @media to override it to 16.8% for compatible browsers

I am open to any ideas or suggestions. Thank you!

Answer №1

Your CSS contains a syntax error:

 * {margin: 0px; padding 0px'}

This mistake is leading to the dismissal of all your CSS rules. You mistakenly used a single quote to close the padding, please remove it.

Additionally, consider utilizing display:inline-block; for a more sleek and responsive grid layout.

Answer №2

Don't forget to add the meta tag inside the head section of your HTML document.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

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

Is there a way to adjust the size of a video thumbnail to fit within a

Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container. https://i.sstatic.net/Yct2d.png How can I ensure that the video thumbna ...

Difficulty implementing clickable dropdown buttons in a React navbar

After some tweaking, I was able to create buttons that trigger dropdown menus which disappear when clicked off. However, a problem arises when any button is clicked - all of the dropdowns appear at once. It appears that setting the state for one button a ...

A reliable approach for dynamically altering SVG graphics

It seems like IE10 does not support CSS transformations for SVGs, only attribute transformations. Here is an example: <svg><rect id="myrect" width="200" height="200"></rect></svg> setTimeout(function() { var r = document.getE ...

Determine in Jquery if all the elements in array 2 are being utilized by array 1

Can anyone help me figure out why my array1 has a different length than array2? I've been searching for hours trying to find the mistake in my code. If it's not related to that, could someone kindly point out where I went wrong? function contr ...

What methods are available to modify, append, or remove an attribute from a tag?

I have an HTML document that contains two different types of 'tr' tags. <tr bgcolor="lightgrey"> <tr> Each 'tr' tag includes 3-4 lines of code with embedded 'tags' within them. However, when I try to access the a ...

Combine collapse and popover in Bootstrap 3 for enhanced functionality

I'm facing some issues trying to use the badge separately from the collapse feature. $(function (e) { $('[data-toggle="popover"]').popover({html: true}) }) $('.badge').click($(function (e) { e.stopPropagation(); }) ) Check o ...

Addressing rendering problems in Ag-GRID when used with Angular

I'm facing a perplexing issue where the ag-grid table in my Angular 12 / Bootstrap 5 application renders with a height of 0px. Below is the link to the rendered table: rendered table Upon inspecting with Chrome's debug tool, I noticed that the ...

Exploring the process of querying two tables simultaneously in MySQL using PHP

I currently have a search box in my PHP file that only searches from the "countries" table. However, I also have another table called "continent" and I would like the search box to retrieve results from both the "countries" and "continent" tables. Here is ...

Transform HTML elements within an *ngFor iteration based on a specific variable in Angular 4

In my current project using Angular 4, I am faced with the task of dynamically modifying HTML tags within an *ngFor loop based on a variable. Here is the code snippet that represents my approach: <mat-card-content *ngFor="let question of questionGrou ...

What is the procedure for adding a JavaScript function to an HTML element that was exclusively created in JavaScript?

I am trying to dynamically change the background color of a row in a table when selecting an object from a dropdown list, but only if the selected number is even. The challenge I am facing is that the objects are created using JavaScript and not directly i ...

Customize Angular Material styles uniquely across various components

Within my application, I am utilizing two components that contain tab groups. The first component serves as the main page, where I have adjusted the CSS to enlarge the labels by using ViewEncapsulation.None. The second component is a dialog, and I aim to m ...

Tips on utilizing multiple dynamically generated toggle switches efficiently

As a Frontend beginner, I am working on implementing toggle switches using HTML, CSS, and Vanilla JavaScript. Approach: I am generating an HTML table with multiple rows based on the data from my Django database. Each row contains details like name, id, a ...

javascript function not being invoked

Currently, I have incorporated the following HTML <html> <head> <Title>EBAY Search</title> </head> <script language="JavaScript" src="ajaxlib.js"></script> <body> Click here & ...

Tips for dynamically incorporating input forms within AngularJS

I am trying to dynamically change the form inputs using ng-bind-html. However, I am only able to display the label and not the text box on the DOM. The content inside ctrl.content will depend on the values received from the server. Important Note: The ...

Tips for Accessing a New Website Using the Floating Layer Close Button

How can I trigger the opening of a new browser window when a visitor clicks the close "x" on my floating layer ad? The close button is within an HTML link code ("a href"), but simply putting a URL in there does not seem to work. <script language=" ...

Remove the empty space between lines of images

Is there a way to remove the horizontal and vertical space between the squares? <div class="first"> <ul> <li><img src="http://dummyimage.com/40x40/111111/000000.jpg"/></li> <li><img src="http://dummyimage ...

Designing websites and Creating Visual Content

I have been working in IT for quite some time now, but recently I have started to delve more into web development. My main focus is on HTML 5, CSS 3, JavaScript, jQuery, and responsive design. However, one aspect that I always struggle with is images. I am ...

Why isn't setInterval set to a duration of one thousand milliseconds?

While trying to use some code from w3schools, I noticed that the setInterval in the example is set to 5 instead of 5000. Shouldn't it be in milliseconds? If not, how can I speed up this animation? When I try reducing it to decimals like 0.01, the anim ...

Is there a way for this SVG graphic to adjust its size to fit its container without manual resizing

Click here to view the demo In the demo, there is an SVG star placed inside a div with specific width and height. I am looking for a way to make the graphics adjust automatically to fit the size of the wrapper div. Since it's a vector graphic, I beli ...

How can I retrieve the value of $_POST[] immediately after a selection is made in a dropdown box

Is there a way to retrieve the $_POST value immediately after changing the select option without having to submit the form? <select name="cat_id" class="form-control" onChange="this.form.submit();" style="width:300px;"> <?php ...