CSS div: Lücke

[kalfany]

Hallo,
ich habe ein Problem:
Nämlich gibt es zwischen zwei Grafiken eine Lücke, die eigentlich laut Code nicht da sein müsste, kann es jedenfalls nicht nachvollziehen.

Siehe:
http://www.webmix-fun.com/designs_webmix/design_slt/

Bitte im IE anschauen, im Firefox gibt es keine Probleme.

style.css:

body {
 background: #0099CC;
 color:#000000;
 margin: 0px;
 padding: 0px;
 }


.menu{
 padding-top: 10px;
 padding-bottom: 0px;
 margin-left: 20px;
 font-size: 11px;
 font-family: Arial, Helvetica, Univers, 'Zurich BT', sans-serif;
 color:#ffffff;
}

.cont{
 padding-top: 10px;
 padding-bottom: 0px;
 margin-left: 20px;
 font-size: 11px;
 font-family: Arial, Helvetica, Univers, 'Zurich BT', sans-serif;
 color:#000000;
}
.y0{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 37px;
 width: 158px;
 background-image: url(Bilder/y0.jpg);
}
.y1{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 32px;
 width: 158px;
 background-image: url(Bilder/y133.jpg);
}
.y2{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 6px;
 width: 158px;
 background-image: url(Bilder/y2.jpg);
}
.y31{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 20px;
 width: 158px;
 background-image: url(Bilder/y333.jpg);
 text-indent:1.1cm;
}
.y3{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 20px;
 width: 158px;
 background-image: url(Bilder/y33.jpg);
 text-indent:1.1cm;
}
.y4{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 20px;
 width: 158px;
 background-image: url(Bilder/y4.jpg);
 text-indent:1.1cm;
}
.y5{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 3px;
 width: 158px;
 background-image: url(Bilder/y5.jpg);
}
.y6{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 31px;
 width: 158px;
 background-image: url(Bilder/y633.jpg);
}
.y7{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 36px;
 width: 158px;
 background-image: url(Bilder/y7.jpg);
}
.z0{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 16px;
 width: 544px;
 background-image: url(Bilder/z0.jpg);
 background-repeat:no-repeat;
}
.z1{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 15px;
 width: 544px;
 background-image: url(Bilder/z1.jpg);
 background-repeat:no-repeat;
}
.z2{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 10px;
 width: 544px;
 background-image: url(Bilder/z2.jpg);
 background-repeat:no-repeat;
}
.z3{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 51px;
 width: 544px;
 text-indent:0.6cm;
 background-image: url(Bilder/z3.jpg);
 background-repeat:no-repeat;
}
.z4{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 100%;
 width: 544px;
 text-indent:0.6cm;
 background-image: url(Bilder/z4.jpg);
 background-repeat:repeat-y;
}
.z5{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 56px;
 width: 544px;
 text-indent:0.6cm;
 background-image: url(Bilder/z5.jpg);
 background-repeat:no-repeat;
}
.z6{
 padding-top: 0px;
 padding-bottom: 0px;
 height: 41px;
 width: 544px;
 background-image: url(Bilder/z6.jpg);
 background-repeat:no-repeat;
}

Die Probleme tauchen zwischen z2.jpg und z3.jpg auf.

Kann mir jemand helfen?

Danke.

kalfany

 

[Quaese]

Hi,

setze in der Klasse .z2 mal die Schriftgrösse auf 1 Pixel.

.z2{ /* Bisherige Definitionen */
     font-size: 1px;}

Ciao
Quaese

 

[kalfany]

Hallo,
sehr gut, jetzt funktioniert es, danke.
Kannst du mir noch sagen, warum es jetzt funktioniert?

 

[Quaese]

Hi,

ist ein Erfahrungswert. Offensichtlich passt der IE die minimal benötigte Höhe an die eines Zeichens an.
Diese Höhe überschreitet 10 Pixel und damit tritt die Lücke auf.

Ciao
Quaese

 

[kalfany]

Ok, alles klar.

Hier kann dann geschlossen werden.