CODEWITHSUNDEEP
htmlasp.netcssinternet-explorer
Joseph
Joseph

Reputation: 661

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

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 ExampleIE 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;
}

Upvotes: 2

Views: 267

Answers (4)

Joel Coehoorn
Joel Coehoorn

Reputation: 415735

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

Upvotes: 2

Samuel Neff
Samuel Neff

Reputation: 74909

You can set the text to not wrap in css.

.iview-caption {
    ...

    white-space: nowrap;
}

Upvotes: 1

Tepken Vannkorn
Tepken Vannkorn

Reputation: 9713

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?

Upvotes: 0

maikelsabido
maikelsabido

Reputation: 1327

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]-->

Upvotes: 0

Related Questions