[CSS] IE6 & IE7 ruimte tussen div's

[X-trace]

Met Mootools heb ik een popup gemaakt. Hierin laat ik ook weer via de Mootools Scroll functie een afbeelding scrollen na het klikken op een link. In Firefox werkt het allemaal goed en staat de div op zijn plaats, maar IE gooit er een ruimte tussen. Voorbeeld verwijderd.

Scroll functie staat in een div met css:

Cascading Stylesheet:

DIV#hddGroep {
        overflow:auto;
        background-color:#FFFFFF;
        display:block;
    }

Scroll blok:

HTML:

<h1>Historisch overzicht</h1>
<p>&nbsp;</p>
<div id="demo-bar">
    <a id="link1" href="#">1992</a>|<a id="link2" href="#">1995</a>|<a id="link3" href="#">1997</a>|<a id="link4" href="#">2001</a>|<a id="link5" href="#">2002</a>|<a id="link6" href="#">2004</a>|<a id="link7" href="#">2007</a>
</div>
<div id="demo-wrapper">
    <div id="demo-inner">
        <div id="history1" class="scrolling-content"></div> 
        <div id="history2" class="scrolling-content"></div> 
        <div id="history3" class="scrolling-content"></div> 
        <div id="history4" class="scrolling-content"></div>
        <div id="history5" class="scrolling-content"></div>
        <div id="history6" class="scrolling-content"></div>
        <div id="history7" class="scrolling-content"></div>
    </div>
</div>

Cascading Stylesheet:

#demo-bar {
    text-align:center;
}
 
#demo-wrapper {
    margin:5px auto;
    overflow:hidden;
    height:250px;
    width:450px;
    border:1px solid #ddd;
    position:relative;
} 
    #demo-inner {
        width: 1660px;
        height: 250px;
        background-color:#FFFFFF;
        background-image: url(../images/historie.png);
        background-position:15px 15px;
        background-repeat:no-repeat;
        position:relative;
    }    
        .scrolling-content {
            width:1px;
            height:1px;
            text-align:center;
            position:absolute;
        }    
     
    #history1 {
        left:70px; 
        top:0px;
    }    
    #history2 {
        left:247px; 
        top:0px;
    }    
    #history3 {
        left:471px; 
        top:0px;
    }
    #history4 {
        left:696px; 
        top:0px;
    }
    #history5 {
        left:920px; 
        top:0px;
    }
    #history6 {
        left:1143px; 
        top:0px;
    }
    #history7 {
        left:1360px; 
        top:0px;
    }

Verder nog wat javascript, maar is nvt aangezien dat wel werkt.

edit: oplossing lag bij container waar de boel in stond. de display:block verwijderd en een relative position gaf mij de oplossing

[ Voor 7% gewijzigd door X-trace op 04-10-2007 12:45 . Reden: oplossing gevonden ]

[Verwijderd]

Waarom gebruik je bij een DIV een "display:block"? Een DIV is al een block element en deze heeft dat echter niet nodig. Display: block wordt eigenlijk alleen gebruikt wanneer een element een inline element is, maar toch de block eigenschappen moet bevatten.