The max-width property is not functioning as expected in Mozilla and Internet Explorer

In Chrome, the image is scaling based on browser width, but it's not working in IE and Mozilla Firefox. The thumb img works in all browsers, but only the .play img's max-width isn't functioning correctly.

<div class="contai">
        <div> <img src="1.png" style="max-width:100%" /></div>
       <div class="thumb">
         <img src="2.jpg" />
              <div class="play"> <img src="videoImagePlay.png" /></div>
       </div>
 </div>

CSS

    .contai{
    width:100%;
}
.thumb{
    border: 1px solid rgb(226, 226, 226);
   position:relative; float:left; width:38%
}
.thumb img{
    max-width:100%
}
.play{
     position:absolute; top:30%; left:35%
}
.play img{
    max-width:50%
}

Answer №1

enjoy lesson correct : 0

just like this

.enjoy{
     position:absolute; top:30%; left:35%; right:0;
}

See it in action http://jsfiddle.net/puS7u/

Answer №2

Check out this demo. It could offer some assistance.

Answer №3

In the future, this tip could be useful: If an image is within a table parent element (regardless of its position in the node hierarchy), the max-width property may not function as expected in Firefox or Internet Explorer unless there is a specific pixel-defined max width set on the table itself. However, Chrome handles this situation without issue.

It appears that Firefox and IE interpret tables as always expanding to fit their content, overriding any max-width: 100% settings.

It's unclear which browser has the most accurate or optimal implementation in this case.

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

extracting information online with python selenium web scraping

Having trouble retrieving the content in this location as it is showing up blank. Can someone please assist me? The element I am trying to capture is: Đã bán 74k/tháng Here is my code snippet: print(driver.find_elements(By.CSS_SELECTOR, "div.r ...

What is causing the overlap of the div elements in this specific location?

I am currently working on a page located at: https://developer.mozilla.org/ru/docs/Mozilla/Connect On the page, there is a yellow block of text that states "This translation is incomplete. Please help us to translate...", with another 'article' ...

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

<nav id="NavbarMaster" class="navbar NavCompression"> <!-- style="min-height:100px;" --> <div id="navToggler" class="container-fluid TitleBG TitleHeight"> <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0; ...

Retrieving Dynamic data from an HTML form and saving it in PHP variables

Currently, I am in the process of taking an online aptitude test where 2 random questions are selected from a database and displayed on the webpage for answering. The issue I'm facing is that the values are not being stored correctly in the database. ...

Unable to access frame: Error - Unable to retrieve 'add' property from undefined

I am working on customizing the chatbot functionality for my website built with Nuxt.js. I want the chatbot to display on certain pages while remaining hidden on others. Unfortunately, I encountered an issue when trying to hide it on specific pages. To im ...

Load Angular template dynamically within the Component decorator

I am interested in dynamically loading an angular template, and this is what I have so far: import { getHTMLTemplate } from './util'; const dynamicTemplate = getHTMLTemplate(); @Component({ selector: 'app-button', // templat ...

Guide on setting up p-menubar in PrimeNG to expand in the opposite direction, from left to right, for the responsive

How can I modify the CSS styles or configure the p-menubar from PrimeNg to have it expand from right to left in the responsive version? Currently, when using the classes align-items-center flex justify-content-between, the menu remains stuck to the right e ...

What is the best way to determine the size of CSS elements relative to other elements?

Is there a way to calculate the size of an element by using calc() or any other method based on the size of another DOM element? ...

React Images: Carousel display issue with images not centered

Is there a way to center the selected image instead of it appearing on the left-hand side? Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: ...

What is the process of embedding audio in HTML5 using base64 encoding?

I have a base64 encoded audio record in WAV format (data link - {{vm.record}}). I am trying to add an audio player to a widget written in JS and HTML that can play the audio for me. I'm not sure why it's not working. Do I need to write something ...

What is the best way to separate content into columns with a border in WordPress?

Currently, I am in the process of creating an event list for a music band website using WordPress. The layout of the list consists of two columns, and my goal is to alternate the placement of each event so that they appear in a left-right-left pattern. Ho ...

What is the best way to enable a visible bootstrap tab to be clicked more than once?

Is there a way to override the default behavior on bootstrap tabs that prevents clicking on the currently shown tab? I need the user to be able to click on the tab again even if it is already active, as I am using AJAX to load content and reloading the pag ...

What is the reason behind the lack of collapsing in an inline-block container that only contains floated items?

Within this design, there are 3 boxes arranged in a row using the float: left; property for each one. These boxes are contained within 2 other elements. Typically, these containers collapse due to the content being comprised of floated items. However, chan ...

Adjusting the width of input textboxes for alignment

I currently have a set of input textboxes that I have attempted to align using CSS with the {width: xxx px;} property. However, this method is unreliable as it does not consistently ensure proper alignment. <style> #left_col p { margin-top: 15px ...

Ensure that an input field on the PHP form is required

Currently working on a form with multiple input fields. I'm wondering if there's a way to prevent the form from being submitted to the server if a specific field is left empty. I'd like to use a JavaScript pop-up box to notify the user inst ...

Tips for dynamically inserting JSON data into HTML elements

{ "top10": [ { "state": "red", "claimed": true, "branch": "release-2.3.4", ...

Aligning a DIV using javascript

Hey everyone, I'm encountering an issue with the JavaScript on my website. I'm struggling to center the div in order to properly display the image I click on. It seems to work fine on the second attempt, but on initial click, the div always appea ...

What could be the reason for the malfunction of my flexbox layout?

I need to create a layout with three divs in a row. The first div should have a fixed width, the second div should expand until it reaches a "max-width", and the third div should take up the remaining space. Everything works fine until the text inside the ...

PHP not receiving POST information from $.ajax call

My JavaScript triggers a POST method when the datepicker loses focus, calling the script rent-fetch-pick-up-point.php. However, the PHP script gets stuck at the if-statement because it's not receiving the POST data. The datepicker is associated with a ...

Calculate the total sum by iterating through a loop and adding the values of input fields with a type of "number"

I have a Shopping Cart set up in a loop that retrieves Products and Prices from the Database. Each row contains an input field of type "number" labeled as Quantity. My goal is to multiply the price by the quantity for each row when I click on a submit butt ...