- This topic is empty.
-
AuthorPosts
-
July 5, 2014 at 6:20 am #174711
parijke
ParticipantI 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)
July 5, 2014 at 7:22 am #174727Senff
ParticipantIt’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.
July 6, 2014 at 1:27 am #174781parijke
ParticipantHi 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?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.