Why does IE treat my png image differently than the other browsers?

Question

And how can I change it? The top one is Firefox, Chrome, and Safari treat the caption background image. The bottom one is how IE treats the caption background image. FireFox Example IE Example

Here is the code for the images on my web page (I use an image slide show tool I found online):

<a href="BlogPosts.aspx" id="iview"> <!--When making a slide show, make sure the ID property is set to "iview" -->
    <!-- Slide 1 -->
    <div data-iview:image="placeImages/FLASH1-Ephesus.jpg">
    <!-- Caption 1 -->
        <div class="iview-caption" data-x="400" data-y="400" data-transition="wipeRight" data-speed="700"><h3>The Library at Celsus</h3>Ephesus, Turkey</div>
    </div>
    <!-- Slide 2 -->
    <div data-iview:image="placeImages/FLASH2-HAGIA.jpg">
    <!-- Caption 2 -->
        <div class="iview-caption" data-x="100" data-y="400" data-transition="wipeRight" data-speed="700"><h3>Hagia Sophia</h3>Istanbul, Turkey</div></div>
    <!-- Slide 3 -->
    <div data-iview:image="placeImages/FLASH3-Bosphorus.jpg">
    <!-- Caption 3 -->
        <div class="iview-caption" data-x="400" data-y="100" data-transition="wipeRight" data-speed="700"><h3>The Bosphorus Straits</h3>Istanbul, Turkey</div></div>
    <!-- Slide 4 -->
    <div href="About.aspx" data-iview:image="placeImages/FLASH4-BlueMosque.jpg">
    <!-- Caption 4 -->
        <div class="iview-caption" data-x="400" data-y="50" data-transition="wipeRight" data-speed="700"><h3>The Blue Mosque</h3>Istanbul, Turkey</div></div>
    <!-- Slide 5 -->
    <div data-iview:image="placeImages/FLASH5-Sirince.jpg">
    <!-- Caption 5 -->
        <div class="iview-caption" data-x="100" data-y="100" data-transition="wipeRight" data-speed="700"><h3>Sirince Village</h3>Sirince, Turkey</div></div>
</a>

Here is the relevant code in the couple of stylesheets the slideshow tool uses:

skin 1/style.css:

.iview-caption {
    background: url('../../img/caption-bg.png');
    color: #FFF;
    border-radius: 7px;
    padding: 10px;
    font-family: Verdana;
    font-size: 12px;
    text-shadow: #000 1px 1px 0px;
}

And here is the main stylesheet for the slideshow tool:

iview.css

.iview-caption {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    cursor: default;
}

What's setting the width of the element? IN the code you posted there is no width set but in the live site linked below each caption has a different width set on the element itself. — Samuel Neff, Sep 13 '13 at 03:52
Yeah, that's what I was looking for. I didn't set the width. I imagine it is done dynamically of some sorts. I'm using someone else's control called the iView slide show. — Joseph, Sep 13 '13 at 04:42

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

This has nothing to do with a .png file... the problem is the text.

Internet Explorer has subtly different rules for text positioning than some other browsers. As a result, you may want to allow a little more space for the text in your style sheet than you thought you'd need, to accommodate IE's behavior. It looks like you can just set your data-x and data-y values a little larger to fix this.

One other little trick you can try is to set zoom:1, as a way to force IE to get the sizing right and behave just a little more like other browsers.

If all else fails, you can use non-breaking spaces so that Internet Explorer has nowhere to wrap the line, like this:

The&nbsp;Library&nbsp;at&nbsp;Celsus

edited May 23 '17 at 12:07

Community

1
1

answered Sep 13 '13 at 03:40

Joel Coehoorn

399,467
113
570
794

in this instance, the data-x and data-y attributes are the position for the caption. I'll look into trying the zoom:1 deal. Where would I put it? – Joseph Sep 13 '13 at 04:39
As part of the css for the .iview-caption class. – Joel Coehoorn Sep 13 '13 at 04:43
... Hmm... looking again, the `position:absolute` in that class likely already gave layout to the element. So it could be that you need a way to remove it. That could be tough. Read the material in the accepted answer of the post I linked to, and the link in that post, to find out more. – Joel Coehoorn Sep 13 '13 at 04:45
Hmmm... I'm looking. Interesting stuff. I've found that if I use a set width, I can make it tall enough to fit them, but I'd rather have it act closer to what it acts like in the other browsers, you know, lol? – Joseph Sep 13 '13 at 04:57
1

You could just write your h3 caption like this: `The Library at Celsus` ... but I expect that would just part of the last word to be hidden. – Joel Coehoorn Sep 13 '13 at 05:00
Well, using the non breaking space made it look correct. But why? – Joseph Sep 13 '13 at 05:03
Because now there's no place in there to put a line break. IE can't wrap the text to the next line. – Joel Coehoorn Sep 13 '13 at 05:13
You know, even if I manually set the width, it still wraps the caption. How annoying. – Joseph Sep 13 '13 at 05:15
If you would, make a new answer with the adding of the non-breaking space and I'll mark it as the answer. – Joseph Sep 13 '13 at 05:18
@Joseph, if you want to set the width manually, try setting `data-width` instead of just `width`. It looks like iView will pick that up. – Samuel Neff Sep 13 '13 at 06:12

score 1 · Accepted Answer · answered Sep 13 '13 at 06:14

1

You can set the text to not wrap in css.

.iview-caption {
    ...

    white-space: nowrap;
}

answered Sep 13 '13 at 06:14

Samuel Neff

73,278
17
138
182

score 0 · Answer 3 · answered Sep 13 '13 at 02:09

You can use CSS coditional comments to solve this.

For example, you could put this:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Create an ie.css file where you'll put your custom css codes for ie.

or you could also use this:

<!--[if IE]>
    <style type="text/css">
       put your code here
    </style>
<![endif]-->

score 0 · Answer 4 · answered Sep 13 '13 at 02:22

0

It breaks because your caption title is broken into newline. I suggest to reset your <h3>...</h3> in your caption div. Also check your container width; increase it so that your caption will have more space to expand. If this cannot help, could you share us the link?

answered Sep 13 '13 at 02:22

Tepken Vannkorn

9,648
14
61
86

I'm not sure I can change the container width. If I can, I don't guess I know where it is. It's crazy because "caption-bg.png" is really only 5x5 pixels, but it expands to the necessary text. Check out the website [link](www.traveljoans.com) and you'll see how it expands to fit each caption. – Joseph Sep 13 '13 at 03:18

Why does IE treat my png image differently than the other browsers?

4 Answers4