Luna: Ruckeln im IE

SELF-Forum

Ruckeln im IE

Luna
– Informationen zu den Bewertungsregeln

Hallo!

Ich hoff, ihr könnt mir weiterhelfen. Bastel da grad an einer Seite rum (bitte jetzt schon um Verzeihung - bin ziemlicher Laie). In allen Browsern haut mein Konstrukt hin, nur im IE zuckelt die rechte Minitabelle, wenn man mit der Maus über den Bild-Link fährt.

Hier der entsprechende Text + CSS:

<!-- MUSTEREINTRAG -->
  <div class="produkte">
  <h2>MUSTERNAME</h2>
  <a href="muster.jpg" target="_blank" title="MUSTERNAME">
  <img src="thmuster.jpg" width="150" height="108" alt="MUSTERNAME" /></a>

<table class="tablinks">
                  <tr>
                      <td>1 St&uuml;ck</td>
                      <td>€ 10,-</td>
                  </tr>
  </table>
  <table>
                  <tr>
                      <td>1 St&uuml;ck</td>
                      <td>€ 10,-</td>
                  </tr>
  </table>
  <div class="clearing"></div>
  <h3>PRODUKTBESCHREIBUNG</h3>
  <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  </div> <!-- Ende MUSTEREINTRAG -->

table  {
          border: thin solid red;
          border-spacing: 5px;
    }
    td {
       text-align: right;
       padding-right: 10px;
    }

div.produkte {
       overflow: hidden;
       width: 620px;
       background-color: #eef6f8;
       color: #1b3767;
       padding: 20px;
       padding-top: 25px;
       border: 3px solid #1b3767;
       margin: 15px 3px 3px 0;
     }

div.produkte img {
       float: left;
       margin-right: 15px;
       margin-bottom: 15px;
    }

div.produkte p {
        margin: 0 10px 10px 0;
    }

div.produkte h2 {
        margin-bottom: 20px;
        margin-top: 0px;
        font-weight: bold;
    }

.clearing {
       clear: both;
    }

.tablinks {
       float: left;
       margin-right: 20px;
       margin-left: 30px;
       margin-bottom: 10px;
    }

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Ruckeln im IE

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hier der entsprechende Text + CSS:

    Ein vollständiges Live-Beispiel bitte - ich seh' nichts verdächtiges. Überhaupt scheint das CSS den Link überhaupt nicht zu beeinflussen.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Ruckeln im IE

      Luna
      – Informationen zu den Bewertungsregeln

      Vielen Dank schon mal für die Hilfe .... HTML:

      <!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" xml:lang="de">

      <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            KOPFBEREICH /HEAD
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

      <head>
          <link href="bildschirm.css" rel="stylesheet" type="text/css" media="screen" /> <!-- Link zu externer Bildschirm Style Datei -->

      <title>Seite 2</title>

      </head><!-- Ende Head -->

      <body id="seite2">
      <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            BEGINN BODY
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

      <div id="wrapper">
      <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            BEGINN WRAPPER
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

      <div id="kopfbereich">
      <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            BEGINN HEADER - KOPFBEREICH
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

      <img src="header.jpg" alt="WERBE EXPRESS" width="900" height="300" />

      <div id="topnavi">
       <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            BEGINN  TOP - NAVIGATION / KONTAKT - IMPRESSUM
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
        <ul>
          <li>Tel.: +43 / (0)650 / 574 44 97</li>
          <li><a href="mailto:office@domain.at?subject=Anfrage%20DOMAIN.at">Mail</a></li>
          <li><a href="kontakt.html" title="Zu Kontakt und Impressum">KONTAKT / IMPRESSUM</a></li>

      </ul>

      </div><!-- Ende Top-Navigation-->
      </div><!-- Ende Header - Kopfbereich -->

      <div id="navibereich">
       <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            BEGINN NAVIGATION
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
        <ul>
          <li id="navi01"><a href="index.html" title="Zur Startseite">STARTSEITE</a></li>
          <li id="navi02"><span>SEITE 2</span></li>

      </ul>

      </div><!-- Ende Navigation-->

      <div id="textbereich">
       <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            BEGINN TEXTBEREICH - HAUPTTEIL
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

      <h2>SEITE 2</h2>
        <p>
           ultricies malesuada. Fusce condimentum mauris vitae quam eleifend auctor egestas mauris rutrum.
        </p>

      <!-- MUSTEREINTRAG -->
        <div class="produkte">
        <h2>MUSTERNAME</h2>

      <a href="muster.jpg" target="_blank" title="MUSTERNAME">
        <img src="thmuster.jpg" width="150" height="108" alt="MUSTERNAME" /></a>

      <table class="tablinks">
                        <tr>
                            <td>1 St&uuml;ck</td>
                            <td>€ 10,-</td>
                        </tr>

      </table>

      <table>
                        <tr>
                            <td>1 St&uuml;ck</td>
                            <td>€ 10,-</td>
                        </tr>

      </table>
        <div class="clearing"></div
        <h3>PRODUKTBESCHREIBUNG</h3>
        <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare luctus quam, eget t
        </p>
        </div> <!-- Ende MUSTEREINTRAG -->

      </div><!-- Ende Textbereich -->

      <div style="clear:both"></div>
       </div><!-- Ende Wrapper -->
        </body><!-- Ende Body -->
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Ruckeln im IE

        Luna
        – Informationen zu den Bewertungsregeln

        CSS:

        * { padding: 0; margin: 0; }

        h1, h2, h3, h4, p { margin-top: 1em; }
            ul { margin: 10px 0; }
            ol { margin: 10px 0; }
            li { margin-left: 2em; margin-bottom: 0.5em; }

        html { height: 101%; }

        body {
              background-color: #50938a;     /* dunkleres gruen */
              color: #000; /* dunkles gruen */
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: small;
          }

        h1 { font-size: 160%; font-weight: bold; }
          h2 { font-size: 140%; font-weight: bold; }
          h3 { font-size: 110%; font-weight: bold; }
          h4 { font-size: 100%; font-weight: normal; }

        .red { color: #df0245; }

        a {
              text-decoration: none;
              outline: none;
          }

        a img { border: 0; }

        a:link { color: #df0245; font-weight: bold; }
          a:visited { color: #4ea03a; font-weight: bold; }
          a:hover, a:focus { border-bottom: 1px solid #df0245; font-weight: bold; }
          a:active { background-color: #df0245; color: white; font-weight: bold; }

        #wrapper {
              background-color: white;
              color: #50938a;
              width: 900px;
              margin: 30px auto;
          }

        #kopfbereich {
              background-color: white;
              color: #50938a;
          }

        #kopfbereich #topnavi {
                    text-align: right;
                    font-weight: bold;
                    background-color: #f8db53;
                    color: #50938a;
                    padding: 5px 20px 5px 10px;
                }

        #kopfbereich #topnavi li {
                                  display: inline;
                                  list-style-type: none;
                                  margin-right: 20px;
                              }

        #kopfbereich #topnavi a {
                                  color: #50938a;     /* dunkleres gruen */
                                  font-weight: bold;
                              }

        #navibereich {
                  float: left;
                  width: 160px;
                  background-color: white;
                  padding-left: 20px;
                  padding-top: 20px;
          }

        #navibereich ul {
                          width: 11em;
                          border-top: 1px solid #50938a;     /* dunkleres gruen */
                  }

        #navibereich li {
                          list-style-type: none;
                          border-left: 1px solid #50938a;     /* dunkleres gruen */
                          border-bottom: 1px solid #50938a;     /* dunkleres gruen */
                          margin: 0;
                  }

        #navibereich a,
                  #navibereich span {
                          display: block;
                          text-decoration: none;
                          background-color: #f8db53; /* dunkles gelb */
                          color: #50938a;     /* dunkleres gruen */
                          font-weight: bold;
                          padding: 4px;
                          border-left: 3px solid #50938a;     /* dunkleres gruen */
                  }

        #navibereich a:hover,
                  #navibereich a:focus {
                          background-color: #50938a;     /* dunkleres gruen */
                          color: white;
                          font-weight: bold;
                          border-left-color: #f8db53; /* dunkles gelb */
                          border-bottom: none;
                  }

        #startseite #navi01 span,
                  #seite2 #navi02 span
                  {
                          background-color: #50938a;     /* dunkleres gruen */
                          color: white;
                          border-left-color: #f8db53; /* dunkles gelb */
                          border-bottom: none;
                  }

        /*  Korrektur fuer den IE 6 */
          * html #textbereich { width: 674px; }

        #textbereich {
              float: right;
              width: 680px;
              background-color: white;
              color: #50938a;     /* dunkleres gruen */
              padding: 0 20px 20px 20px;
              margin-top: 10px;
          }

        #textbereich ul li { list-style-type: square; }

        table  {
                  border: thin solid red;
                  border-spacing: 5px;
            }

        td {
               text-align: right;
               padding-right: 10px;
            }

        div.produkte {
               overflow: hidden;
               width: 620px;
               background-color: #eef6f8; /* helles blau */
               color: #1b3767;     /* dunkleres gruen */
               padding: 20px;
               padding-top: 25px;
               border: 3px solid #1b3767;
               margin: 15px 3px 3px 0;
             }

        div.produkte img {
               float: left;
               margin-right: 15px;
               margin-bottom: 15px;
            }

        div.produkte p {
                margin: 0 10px 10px 0;
            }

        div.produkte h2 {
                margin-bottom: 20px;
                margin-top: 0px;
                font-weight: bold;
            }

        .clearing {
               clear: both;
            }

        .tablinks {
               float: left;
               margin-right: 20px;
               margin-left: 30px;
               margin-bottom: 10px;
            }

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Ruckeln im IE

          Luna
          – Informationen zu den Bewertungsregeln

          Sorry, für die Verwirrung. Ich probiers eigentlich immer zuerst mit dem Validator .. da ist mir beim kopieren wohl was passiert. Sowohl HTML als auch CSS sind valide.

          Hier das Online-Beispiel

          http://www.goschi.at/seite2.html

          Jetzt bin ich allerdings wirklich verwirrt. Online funktioniert alles mit dem IE. Derselbe IE ruckelt aber mit der kleinen Tabelle (bzw. stellt die Topnavi beim Hovern falsch dar), wenn ich vom PC aus teste!?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Ruckeln im IE

            Luna
            – Informationen zu den Bewertungsregeln

            Hallo nochmal!

            Ich bin gerade drauf gekommen, dass ich für goschi.at beim IE8 den Kompatibilitätsmodus eingestellt habe - daher die Verwirrung. Das heißt aber auch, dass ich noch immer Eure Hilfe bräuchte: Wie kann man das Ruckeln der rechten Tabelle verhindern? Warum werden die Links in der Topnavi nicht unterstrichen?

            Herzlichen Dank schon vorab für jeden Tipp! :-)

            http://www.goschi.at/seite2.html

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Ruckeln im IE

              suit Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Wie kann man das Ruckeln der rechten Tabelle verhindern?

              Du hast ein sehr langes "Wort", welches den Internet Explorer 6 dazu bringt, das Layout zu zerstören, weil er mi der overflow-Eigenschaft nicht richtig umgehen kann.

              Entferne dieses "Wort" und ersetze es durch einen "sinnvollen" Blindtext.

              Warum werden die Links in der Topnavi nicht unterstrichen?

              Möglicherweise, weil du für sämtliche Links "text-decoration: none;" definierst?

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

      2. Ruckeln im IE

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Vielen Dank schon mal für die Hilfe .... HTML:

        Ich meinte damit eher sowas wie einen Link zu einer Online-Version. In diesem HTML-Dokument fehlt mir jedenfalls das CSS - ohne dem wirds schwierig.

        Dennoch hast du einen sehr offensichtlichen Fehler welcher mit einem Editor + ordentlichem Syntaxhighlighting sofort auffällt. Ich kann mir gut vorstellen, dass das etwas damit zu tun hat.

        Alternativ hilft auch der Validator:
        http://validator.w3.org/

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln