Internet Explorer image offset

Question

I'm trying to make a fairly simple image slideshow to replace a flash based one. I've got it working consistently in most modern browsers, the code validates (at least it used to. After battling IE, I'm not sure) but of course it doesn't work correctly in IE 6 and 7. I haven't checked 8 yet, but I'm not exactly holding my breath.

You can see the slideshow here. If it looks extremely odd, either you're using IE or I'm fiddling around with it to try to get it to work properly in IE.

What happens in IE is that about 3 or 4 pixels are added to the left of every image in the slideshow, and the last image is never even shown in IE (there's a total of 5 images), and I can't for the life of me figure out why.

Here's the body part of index.html. I stripped out the javascript part, as I'm sure that's not the problem. If you really want to see it, just check the source of the page I posted.

<div id="wrapper">
<div id="viewport">
    <div id="images">
        <a href="http://ungdomar.se/forum.php?thread_id=221846"&gt;&lt;img src="image1.png" alt="Kärleksvecka: Relationsdagboken" /></a>
        <a href="http://ungdomar.se/text.php?text=1563"&gt;&lt;img src="image2.png" alt="Biorecension: An Education" /></a>
        <a href="http://ungdomar.se/text.php?text=1561"&gt;&lt;img src="image3.png" alt="Det börjar dra ihop sig till val" /></a>
        <a href="http://ungdomar.se/news.php?text=1553"&gt;&lt;img src="image4.png" alt="Vinn biobiljetter och prinsessa-DVD" /></a>
        <a href="http://ungdomar.se/text.php?text=1560"&gt;&lt;img src="image5.png" alt="Novell: Fallafel berättelsen om Gösta" /></a>
    </div>
</div>
<div id="controls_bg">
    <div id="controls">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
        <a href="#" rel="5">5</a>
    </div>
</div>
<div id="imagetexts">
    <ol>
        <li>
            <h2>Kärleksvecka: Relationsdagboken</h2>
            <p>Inför Alla Hjärtans Dag kommer kärleken att flöda på UM. I relationsdagboken kan du dela med dig av dina känslor.</p>
        </li>
        <li>
            <h2>Biorecension: An Education</h2>
            <p>Användaren Dunno vill inte göra något annat än att lyssna på Juliette Gréco och bära Mad Men-kostymer resten av sitt liv.</p>
        </li>
        <li>
            <h2>Det börjar dra ihop sig till val</h2>
            <p>ANNONS: Läs om hur du får hjälp med att välja gymnasium.</p>
        </li>
        <li>
            <h2>Vinn biobiljetter och prinsessa-DVD</h2>
            <p>Berätta om din dröm och ha chansen att vinna biobiljetter och DVD-filmen Prinsessa.</p>
        </li>
        <li>
            <h2>Novell: Fallafel berättelsen om Gösta</h2>
            <p>Beväpnad med ett par nyinhandlade bouleklot linkade Gösta ut i Malmö för att totaldemolera stadens falafelvagnar.</p>
        </li>
    </ol>
</div>

<h1>Ser det underligt ut så beror det på att jag försöker få skiten att fungera i Internet Explorer.</h1>

And the css:

*,* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
    border: none;
    }

img, div,a  { behavior: url(iepngfix.htc) }

#wrapper {
float: left;
position: relative;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    margin-left: 10px;
    margin-top: 10px;
    display:inline;
    width: 100%;
    }

#viewport {
height:300px;   width: 449px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
    }

#images {
position: absolute;
top: 0; left: 0;
    }

#images img {
    float: left;
    margin:0px;
    padding: 0px;
    }

#controls_bg {
    position: absolute;
top: 10px;
    left: 340px;
width: 120px;
    height:21px;
z-index: 100;
text-align: left;
line-height: 20px;
background: url(controls.png) no-repeat;
display: none; /*Will be shown later with jQuery*/
    }

#controls {
text-align: left;
line-height: 20px;
    margin-left: 1px;
    }

#controls a {
padding: 3.5px;
text-decoration: none;
color: #fff;
    font-size: 0.8em;
    outline:none;
    font-weight: bold;
    }

#controls a.active {
    color: #0f98ef;
    }

#imagetexts {
    position:absolute;
    bottom: 20px; left:0px;
    width: 449px;
    height: 65px;
    background: url(overlay.png) no-repeat;
    }

#imagetexts li {
    list-style-type: none;
    width: 350px;
    margin-left: 5px;
    margin-top: 10px;
    display: none;
    line-height: 1em;
    font-size: 0.9em;
    }

#imagetexts h2 {
    width: 370px;
    color: #1099f1;
    font-size: 1.4em;
    line-height: 0.7em;
    position: relative;
    float: left;
    margin-bottom: 5px;
    margin-top: 0px;
    }

#imagetexts p {
    color: #fff;
    font-size: 0.9em;
    }

If you can figure out what's causing IE to add those pixels, I would be eternally grateful. I haven't been doing a lot of web design lately, and when I have, I have simply disregarded IE. But now I find myself forced to get it to at least look acceptable in IE.

For more information, just ask.

Answer 1

i've used this jQuery slideshow plugin before. it's easy to customise and works perfectly on all major browsers including IE6, IE7 and IE8. give it a try

link

Answer 2

I see you're using png fix there - from my experience this often causes problems to IE. Have you tried to preview the page without loading it?