✔ Firefox verwendet andere Breite

Status
Nicht offen für weitere Antworten.
1

123arne

Mitglied
Hallo!

Ich habe ein relativ umfangreiches Layout einer Seite mit einer scrollenden Thumbleiste und einem hover-Effekt mit css.
Während der IE alles wie gewünscht darstellt, die Thumbleiste nicht in die Breite gezogen wird und der Hoovereffekt beim Drüberfahren über die Thumbs funktioniert, geht beim Firefox nichts. Irgendwie addiert sich FF da eine komische Breite zusammen.
Zu sehen ist die Seite hier und das dazugehörige css ist hier als Textdatei zu finden.

Wäre nett wenn mir jemand dazu Hinweise geben könnte.
Gruß
Arne
 
Hi,

bei diesem unübersichtlichen Tabellendschungel empfehle ich dir, zur Fehlersuche einfach eine Tabelle nach der anderen aus dem Quellcode zu entfernen, um der Ursache auf den Grund zu gehen, denn nicht nur Firefox, sondern auch die anderen standardkonformen Browser haben massive Probleme, die Seite korrekt darzustellen.

Desweiteren rate ich dir, alle Attributwerte, wie z.B. die Klassennamen in Anführungszeichen anzugeben.

mfg Maik
 
Hallo,

ich gebe Dir mit den Tabellen und Verschachtelungen völlig recht. Aber leider muss ich es erstmal als gegeben hinnehmen und eine kurzfristige Lösung des Problems der Breite und des Hoover-Effekts finden. Die Seite wird generell langfristig völlig neu erstellt.
Ich habe die Seite mal soweit reduziert, dass nur der Problembereich und ein Thumbnail übrig geblieben ist. Es wird noch immer die Seite in die Breite gezogen.
Auch den Javascript-Fehler ( "event ist not defined") kann ich nicht wegreden und bedarf einer Lösung. In diesem Thread werde ich mich jedoch auf das css-Problem beziehen.

Vielen Dank schon mal für eure Mühe.

Gruß
Arne

Die Seite sieht jetzt so aus:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<LINK REL=stylesheet TYPE="text/css" HREF="scripts/css/default_moz0.css">
<script type="text/javascript">imgpfad='index.html';;bildpfadid='';browser='moz';topdomain='penzel-dachsysteme.de';is_ie=false;is_moz=true;cmdoverColor='#ffcccc';cmdselColor='#ddaaaa';cmdseldColor='#bb9999';cmdnoselColor='transparent';edkuerz = new Array(320, 320, 320, 320, 320, 320, 320);edweite = new Array(535, 166, 385, 385, 385, 385, 385);edbereich = new Array('daten', 'datenr', 'form0', 'form1', 'form2', 'form3', 'form4');popupattr=',scrollbars=no,location=no,menubar=no,resizable=no,toolbar=no,minimize=no';if(top.frames.length>0){top.location.href=self.location;}</script>
<SCRIPT TYPE="text/javascript" SRC="scripts/js/default.js"></SCRIPT>

</head>

<body>

      <tr>
        <td >
        <div id=mod>
            <h1 id=refbezeichnung name=refbezeichnung>Trapezblecheindeckung</h1>
            <table cellpsacing=0 cellpadding=0 style="table-layout:fixed">
              <colgroup>
              <col style="width:30px">
              <col style="width:475px">
              <col style="width:30px">
              </colgroup>
              <tr>
                <td class=mitte_mitte colspan=3><img src="gif/icons/ph.gif" height=250 vspace=20 id=refgrbild name=refgrbild></td>
              </tr>
              <tr>
                <td class=mitte_mitte colspan=3 id=refthumbleiste name=refthumbleiste></td>
              </tr>
              <tr>
                <td colspan=3 class=oben_mitte id=refinfo name=refinfo><table cellspacing=0 id=reftab0 name=reftab0 class=rahmen style="display:none">
                    <colgroup>
                    <col width=140>
                    <col>
                    </colgroup>
                    <tr>
                      <td class=formular_links></td>
                      <td class=formular_rechts></td>
                    </tr>
                    <tr>
                      <td class=formular_links></td>
                      <td class=formular_rechts></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            <script type="text/javascript" src="scripts/referenzen/referenzen.js"></script>
            <script type="text/javascript">Ref_createRefs(0,'scripts/images/referenzen/0013/image_00001.jpg','##','##','Trapezbleche');</script>
          </div>
          </td>

      </tr>

</body>
</html>
css ist wieder hier als Textdatei zu finden und die abgespeckte Variante der Seite hier
 
Die Ursache liegt hier begraben:

Code: 
<img src="gif/icons/ph.gif" height=250 vspace=20 id=refgrbild name=refgrbild>
Da du der Grafik, die im Original 20*2px groß ist, keine Breitenangabe mit auf dem Weg gibst, skalieren die Browser sie entsprechend ihrem Seitenverhältnis mit dem Faktor "125" auf eine Breite von 2500px.

Das Thema hat somit nichts mit CSS zu tun, und wird von mir ins HTML-Board verschoben.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück