What is preventing Firefox and IE from displaying images fully in a list item?

I am trying to create a slideshow with two separate sliders using li elements for that purpose. It works perfectly in Chrome and Safari, but I am encountering issues in Firefox and IE.

In Firefox, the slideshow works fine in quirks mode but not in standard mode. Here are a couple of examples:

Quirks mode:

Standard mode:

I need it to work in standard mode. What could be causing this issue?

Here is my CSS code:

/* Photo slider */

#slider1 {
    position: absolute;
    height: 100%;
    left: 0%;
    top: 0%;
    width: 57%;
    z-index:100;
}    

#slider2 {
    position: absolute;
    height: 100%;
    left: 82%;
    top: 0%;
    width: 57%;
    z-index:100;
}

#slider1 ul, #slider2 ul {
    margin: 0;
    padding: 0;
}

#slider1 img, #slider2 img {
    height:100%;
}

Answer №1

Implementing a max-width property appears to improve the appearance (for your information, Opera had trouble displaying both versions of the webpage):

#slider1 img, #slider2 img {
    height:100%;
    max-width:100%;
}

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

Ensuring the image is properly sized to fit the screen and enabling the default zoom functionality

I am looking to achieve a specific behavior with an image, where it fits the viewport while maintaining its aspect ratio and allowing for zooming similar to how Chrome or Firefox handle local images. Here are the details of my project: The image I have is ...

Changing the name of a specific attribute in a JSON Object for showcasing it in an HTML Table

Suppose I have fetched a list of objects from a database: [{ "id":0 ,"name":"John", "lastname":"Shell" },{ "id":1,...]; and want to display this data using the dynatable plugin: data : JSON.stringify(data) success: function(data,status){ $( ...

Contrasts between space and the greater than selector

Can you explain the distinction between selector 6 and selector 7 as outlined on the w3 website? Inquiring minds want to know. ...

Techniques for ensuring input validity using JavaScript

One of my form inputs is required: <input type="text" id="input-id" required> After the user submits it, I send the value using ajax and then clear it with $("#input-id").val(""). However, after this action, the input appears invalid. I want to ...

Is there a way to implement a css/javascript property specifically for a div that is selected in the url?

Take for instance the scenario where I possess the URL example.com/#foo. In this case, CSS styling will be directed to the div with the id foo. If achieving this solely in CSS is not feasible, what methods in JavaScript or jQuery can be used efficiently ...

Shift the plus-minus icon on the bootstrap accordion all the way to the right side

I'm struggling to adjust the position of the plus-minus icon on a Bootstrap accordion to the far right, but my current code isn't producing the desired result. Here's the CSS snippet: .mb-0 > a:before { float: right !important; ...

Tabbable bootstrap with dropdown functionality

I am currently in the process of integrating Bootstrap tabs and dropdown menus using version 2.3.4 <div class="container"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> ...

What's the best way to adjust text color to black or white for maximum contrast when the background changes?

Currently, I am attempting to replicate the email element found on this website: .custom-blend-mode { mix-blend-mode: difference; } Although I have managed to make it work, it results in a change to the opposite color. Ideally, I would like it to remai ...

Retain the spaces within a string in Java and JavaScript programming languages

My Java code sends data to the browser via an HTTP request, and the output looks something like this: JAVA CODE OUTPUT | Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time | | 0 | SELECT STATEMENT | | | | 3 ...

Dynamically adding a class name to the outer element of a component

I have implemented a custom tag using cq:htmlTag in one of my components. Instead of assigning a static class name from a CSS file to the "class" property, I need to use the 'template name' as the value for the class property. Is there a method ...

Use CSS to create a fullscreen animation for an element

Is there a way to animate a div element so that it expands to fit the screen when clicked without specifying an initial position? I need the div to be able to adjust dynamically within the screen. .box { width: 80px; height: 80px; background: red; ...

Issues with table formatting and malfunctioning functions

I created a basic tic-tac-toe game, but I'm having an issue with the table display. It appears squished when the game loads. Is there a way to prevent this and keep the table empty? Additionally, I am using NotePad++ and encountering problems running ...

Banner with video background (not taking up the entire page)

I'm currently working on a website project that involves using a YouTube video as the banner, but I'm facing some challenges in making it work correctly. So far, this is what I have: #video-background { position: absolute; right: 0; top:1 ...

Having trouble getting the alert text on the left side of a Bootstrap button with the alert class

Hey there, I managed to create two buttons aligned on opposite sides of my webpage - one on the left and one on the right. Each button, when clicked, displays an alert text on its corresponding side, similar to what you see in this picture The code snippe ...

The min-height property does not seem to be compatible with -webkit-calc

I've been experimenting with this code: .main{ min-height: -moz-calc(100% -50px); min-height: -webkit-calc(100% -50px); min-height: calc(100% -50px); background-color:#000; color:white; } html{ height:100%; } <html ...

Switch up the stylesheet in WordPress when an administrator is signed in

Looking for a way to incorporate conditional PHP code into my theme that will load a different stylesheet when either an admin or a specific user (ID=1) is logged in. Does WordPress have a function that can make this happen? There's a particular div ...

Sliding an image from the left side to the right, and then repeating the movement from left to right

I am currently working on a CSS effect for some images. My goal is to have an image appear from the left side, move towards the right side, then reappear from the left and repeat this cycle. I managed to achieve this using the code below: @keyframes sli ...

Arranging Bootstrap buttons in a clean row

How can I add two nav buttons "register" and "sign in" to the top right of my navigation bar, and include a separate button "request a demo" below them without displacing the first two buttons? I am currently using a br tag to push the third button down ...

The text-decoration is here to stay

Currently, I am facing an issue with the customization of a wordpress theme related to the styling of links within posts. Although I have tried to change the color and remove underlining using CSS rules, I am unsuccessful so far: a, .entry-meta a, entry-c ...

Troubleshooting Problem with CSS Gradient Text

I'm attempting to recreate the text effect found here: . However, I'm facing issues getting it to work despite using the same code. This is the HTML I am using: <h1><span></span>Sign Up</h1> My CSS looks like this: h1 { ...