Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS max-width don't work in IE11?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #174711
    parijke
    Participant

    I have a slideshow with images bigger than the box they are living in. the css property is set to max-width=100%;height:auto

    In FF en Chrome this works fine, but in IE I see the big original image (the cms provides the img tag with width=”900px” height=”900px” woch causes the image to break te layout in IE.

    Probably a common issue, but I cant find the answer’.

    Any help is appreciated.

    The site is neckslag.rijke.org (see the three sponsorboxes at the bottom)

    #174727
    Senff
    Participant

    It’s the way the jQuery slideshow plugin works.

    One of the parent divs of the image is assigned a width through inline CSS styles. This width is based on (the width of) its contents — so, the plugin checks how wide the image is and then assigns that width to the parent div.

    I’m no jQuery expert, but I can see why IE has a problem with it. It detects the width of the content (the image) as 796px (or whatever the original width of the image is) and then applies that to the parent level. Which is why a div like .views_slideshow_cycle_div_sponsorbox-panel_pane_1_2 has that width, and so the image inside of it, set at 100% max, will also have that width.

    For other browsers, it works differently. The container cell of the slider is set to 34.043%, so the child divs are also set to something like 250px (more or less), and the image (set as 100% max) is therefore also set to that. And that’s the width detected (and applied to the parent level).

    SOOOOOO…..

    IE’s process:
    1. take original image width (result: wide)
    2. apply this to the parent div (result: wide)
    3. set image to 100% of parent div (result: wide)

    Other browsers:
    1. set image width to 100% of parent div (result, 34.043% of full site, app 250px)
    2. take image with (result: 250px;)
    3. apply this to the parent div (result: 250px)

    tl;dr — it’s probably more of an issue with the plugin than with IE itself.

    #174781
    parijke
    Participant

    Hi Senff,

    Thanks for your analysis. I will post the issue with the maintainer of the pluging as well.

    In the mean time, do you know any css trick that will change the output for IE in percentage as well?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.