Johannes: Breitenproblem im IE

Hallo, kann mir bitte jemand sagen was ich an folgendem Code falsch gemacht habe. Im Mozilla werden die Bilder wie gewünscht mit 120px Breite angezeit, Im IE (5.5 und 6) werden sie alle in Originalgröße angezeigt. Ich hab keine Ahnung was ich flasch gemacht hab

Bestem Dank im Vorraus
mfg Johannes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang=de>
<head>
<title>Fertigung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body {
    background-color: #CCCCCC;
    color: black;
    font-size: 14pt;
    font-family: verdana, arial, helvetica, sans-serif;
 text-align: left;
}

a {
 border-style: none;
}

a:hover > img{
 border-color: #808080;
}

a span {
 display: none;
 font-size: 16pt;
 color: #808080;
}

a > img {
 height: 120px;
 border-width: 1px;
 border-color: black;
}

a:hover span {
 display: block;
 position: fixed;
 top: 50%;
 left: 60%;
}

</style>

</head>
<body>
 <a href="#1" style="position: absolute; top: 15%; left: 35%; ">
  <img src="images/bend1.jpg">
  <span>Kantanlagen</span>
 </a><br>
 <a href="#1" style="position: absolute; top: 40%; left: 20%;">
  <img src="images/laser1.jpg">
  <span>Laser</span>
 </a><br>
 <a href="#1" style="position: absolute; top: 65%; left: 35%;">
  <img src="images/weld1.jpg">
  <span>Schweißanlagen</span>
 </a><br>
</body>
</html>

  1. Hallo Johannes.

    font-size: 14pt;

    Entwirfst du ein Drucklayout? Wenn nicht, dann nutze hier lieber em bzw. %.

    a > img {

    Der IE beherrscht diesen Selektor (noch) nicht, daher kann er die darauf folgenden Regeln nicht erfassen.

    <a href="#1" style="position: absolute; top: 15%; left: 35%; ">

    <img src="images/bend1.jpg">
      <span>Kantanlagen</span>
    </a><br>
    <a href="#1" style="position: absolute; top: 40%; left: 20%;">
      <img src="images/laser1.jpg">
      <span>Laser</span>
    </a><br>
    <a href="#1" style="position: absolute; top: 65%; left: 35%;">
      <img src="images/weld1.jpg">
      <span>Schweißanlagen</span>
    </a><br>

      
    Wozu die absolute Positionierung? Und warum nutzt du hier keine (augenscheinlich angemessene) <http://de.selfhtml.org/html/text/listen.htm@title=Liste>?  
      
      
    Einen schönen Montag noch.  
      
    Gruß, Ashura  
    
    -- 
    [The End of an Era...](http://www.nightwish.com/english/lettertotarjaen.html)
    
    1. Hallo Johannes.

      font-size: 14pt;

      Entwirfst du ein Drucklayout? Wenn nicht, dann nutze hier lieber em bzw. %.

      Ich hab px genommen weil mir das mit em nicht ganz klar ist, auf selfhtml steht ja :
      Relativ zur Schriftgröße des Elements. Bei Anwendung auf Schriftgröße relativ zur Schriftgröße des Elternelements. Dezimalzeichen für Nachkommazahlen ist der Punkt.

      Aber wie groß ist die Schriftgröße des Elementes? Das interpretiert dann ja wieder jeder Browser etwas anders oder?

      a > img {

      Der IE beherrscht diesen Selektor (noch) nicht, daher kann er die darauf folgenden Regeln nicht erfassen.

      Juhu jetzt gehts

      <a href="#1" style="position: absolute; top: 15%; left: 35%; ">

      <img src="images/bend1.jpg">
        <span>Kantanlagen</span>
      </a><br>
      <a href="#1" style="position: absolute; top: 40%; left: 20%;">
        <img src="images/laser1.jpg">
        <span>Laser</span>
      </a><br>
      <a href="#1" style="position: absolute; top: 65%; left: 35%;">
        <img src="images/weld1.jpg">
        <span>Schweißanlagen</span>
      </a><br>

      
      >   
      > Wozu die absolute Positionierung? Und warum nutzt du hier keine (augenscheinlich angemessene) <http://de.selfhtml.org/html/text/listen.htm@title=Liste>?  
        
      Ich dachte mir da ich ja will das die Bilder alle anders weit eingerückt sind ist das die eine gute Lösung, aber ich lasse mich sehr gerne eines besseren bellehre da ich wirklich alles andere als ein Profi in dem Gebiet bin, wie meinst du das mit der Liste genau?  
        
      mfg Johannes  
      
      >   
      >   
      > Einen schönen Montag noch.  
      >   
      > Gruß, Ashura  
      > 
      
      1. Hallo Johannes.

        font-size: 14pt;

        Entwirfst du ein Drucklayout? Wenn nicht, dann nutze hier lieber em bzw. %.

        Ich hab px genommen

        Nein, du hast nicht px (Pixel) sondern pt (Point) genommen.

        weil mir das mit em nicht ganz klar ist, auf selfhtml steht ja :
        Relativ zur Schriftgröße des Elements. Bei Anwendung auf Schriftgröße relativ zur Schriftgröße des Elternelements. Dezimalzeichen für Nachkommazahlen ist der Punkt.

        Aber wie groß ist die Schriftgröße des Elementes? Das interpretiert dann ja wieder jeder Browser etwas anders oder?

        Das sowieso. 1em bzw. 100% (zum IE-Bugfixing auch 100.1%) ist immer genau die Größe, die der User in seinem Browser eingestellt hat und als angenehm empfindet.
        Bei mir sind beispielsweise keine Schriftgrößen unter 12px möglich.

        Ich dachte mir da ich ja will das die Bilder alle anders weit eingerückt sind ist das die eine gute Lösung, aber ich lasse mich sehr gerne eines besseren bellehre da ich wirklich alles andere als ein Profi in dem Gebiet bin, wie meinst du das mit der Liste genau?

        Gäbe es den IE nicht, so könntest du den Nachbarselektor nutzen, um einzelne Listenelemente zu selektieren.
        Da es ihn aber gibt, musst du hier jedem Listenpunkt eine ID (oder auch jeweils eine Klasse, wenn schon eine hierfür geeignete existiert) hinzufügen und diesen darüber selektieren.

        Dann musst du nur noch den jeweiligen http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=margin-Wert setzen.

        Einen schönen Montag noch.

        Gruß, Ashura

        1. Hallo Johannes.

          font-size: 14pt;

          Entwirfst du ein Drucklayout? Wenn nicht, dann nutze hier lieber em bzw. %.

          Ich hab px genommen

          Nein, du hast nicht px (Pixel) sondern pt (Point) genommen.

          Stimmt, jetzt kann ich nicht mal noch lesen, wo soll das noch enden ;-)
          Heißt das jetzt wenn ich bei der Schriftgröße 1em einstelle dan hab ich 100% der Standardmäßig eingestelllen schriftgröße. bei 2em dann 200% oder?

          weil mir das mit em nicht ganz klar ist, auf selfhtml steht ja :
          Relativ zur Schriftgröße des Elements. Bei Anwendung auf Schriftgröße relativ zur Schriftgröße des Elternelements. Dezimalzeichen für Nachkommazahlen ist der Punkt.

          Aber wie groß ist die Schriftgröße des Elementes? Das interpretiert dann ja wieder jeder Browser etwas anders oder?

          Das sowieso. 1em bzw. 100% (zum IE-Bugfixing auch 100.1%) ist immer genau die Größe, die der User in seinem Browser eingestellt hat und als angenehm empfindet.
          Bei mir sind beispielsweise keine Schriftgrößen unter 12px möglich.

          Ich dachte mir da ich ja will das die Bilder alle anders weit eingerückt sind ist das die eine gute Lösung, aber ich lasse mich sehr gerne eines besseren bellehre da ich wirklich alles andere als ein Profi in dem Gebiet bin, wie meinst du das mit der Liste genau?

          Gäbe es den IE nicht, so könntest du den Nachbarselektor nutzen, um einzelne Listenelemente zu selektieren.
          Da es ihn aber gibt, musst du hier jedem Listenpunkt eine ID (oder auch jeweils eine Klasse, wenn schon eine hierfür geeignete existiert) hinzufügen und diesen darüber selektieren.

          Das heißt dann das bei mir jedes Bild in einem <li> eingeschlossen ist und jeweils eine andere ID also für das erste etwa <li id="1"> hat. Und ich dann oben mit ul > li#1 ich mit margin die Position festlege?. Bei dieser Lösung ist es aber dann nicht möglich die Bilder an den Ecken zu überschneiden oder? Wenn ich nämlich 4 Bilder auf einer Seite habe möchte ich die Ecken ein wenig überschneiden.

          mfg Johannes

          Dann musst du nur noch den jeweiligen http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=margin-Wert setzen.

          Einen schönen Montag noch.

          Gruß, Ashura

          1. Hallo Johannes.

            Heißt das jetzt wenn ich bei der Schriftgröße 1em einstelle dan hab ich 100% der Standardmäßig eingestelllen schriftgröße. bei 2em dann 200% oder?

            Theoretisch ja. Wenn du jedoch daraufhin einmal die Schriftgröße in deinem Browser veränderst, wirst du teilweise gravierende Berechnungsabweichungen in den Browsern bemerken. (Bis auf Opera natürlich.)
            Also ist 1em nicht zwangsläufig das Gleiche wie 100%. Siehe auch meinen Link zu Ingos em-Artikel.

            Das heißt dann das bei mir jedes Bild in einem <li> eingeschlossen ist und jeweils eine andere ID also für das erste etwa <li id="1"> hat. Und ich dann oben mit ul > li#1 ich mit margin die Position festlege?.

            Nicht ganz. Eine solche ID wäre aussagelos und zudem http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name@title=ungültig.
            Was sagt dir die ID „1“ über den Inhalt aus?

            Bei dieser Lösung ist es aber dann nicht möglich die Bilder an den Ecken zu überschneiden oder? Wenn ich nämlich 4 Bilder auf einer Seite habe möchte ich die Ecken ein wenig überschneiden.

            Die margin-Eigenschaft ist auch empfänglich für negative Werte.

            Einen schönen Montag noch.

            Gruß, Ashura

            PS: Bitte zitiere nur die minimale Menge des Textes, auf den du dich wirklich beziehen möchtest, danke.

            1. Das Problem mit der Bildbreite hab ich jetzt gelöst, mein letztes Problem ist jetzt das der Text den ich einblede wenn man über das Bild fährt im Mozilla erscheint, jedoch nicht im IE (getestet im IE5.5 und 6) Woran liegt den das jetzt schon wieder?

              mfg Johannes

              1. Hallo Johannes.

                … mein letztes Problem ist jetzt das der Text den ich einblede wenn man über das Bild fährt im Mozilla erscheint, jedoch nicht im IE (getestet im IE5.5 und 6) Woran liegt den das jetzt schon wieder?

                *Wie* lässt du den Text einblenden? (Code!)

                Wenn du hierfür :hover auf Elemente anwendest, die keine Links sind, bist du auf ein weiteres Defizit bei den CSS-Fähigkeiten des IE gestoßen.
                Siehe hierzu https://forum.selfhtml.org/?t=119999&m=770163

                Einen schönen Freitag noch.

                Gruß, Ashura

                1. Der steht eh noch im ersten beitrag,
                  ich hab am anfang

                  mit visible:none; das Textelement ausgeblendet und beim drüberfahren in a:hover mit visible:block; wieder eingeblendet.

                  mfg Johannes

                  Hallo Johannes.

                  … mein letztes Problem ist jetzt das der Text den ich einblede wenn man über das Bild fährt im Mozilla erscheint, jedoch nicht im IE (getestet im IE5.5 und 6) Woran liegt den das jetzt schon wieder?

                  *Wie* lässt du den Text einblenden? (Code!)

                  Wenn du hierfür :hover auf Elemente anwendest, die keine Links sind, bist du auf ein weiteres Defizit bei den CSS-Fähigkeiten des IE gestoßen.
                  Siehe hierzu https://forum.selfhtml.org/?t=119999&m=770163

                  Einen schönen Freitag noch.

                  Gruß, Ashura