Unterschied Mozilla - Iexplorer

Hi!
wenn ich meine html-seite im iexplorer öffne (Layout=Tabelle mit width=„60%“) dann ist sie trotzdem auf die ganze Breite verzogen, obwohl es im Mozilla Browser ohne Probleme dargestellt wird.
Hat einer vielleicht eine Idee an was das liegen könnte? Sonst bau ich halt auf Pixelgrößen um…

Ihr mal das Prinzip von meinem Code:

[code]

.... [/code]

schon mal danke!

bei mir gehts:D

Lass mich raten: Kein DOCTYPE angegeben ? :-?

Kann ich mir gut vortstellen…

@ Goldbeere
Poste uns doch bitte mal den kompletten Code der betreffenden Seite hier, das bringt mehr wie so ein kleiner Ausschnitt…

hey!
also vielen Dank schon mal für die Antworten…einen Doctype hab ich eigentlich kann aber sein dass der falsch ist. Geb euch grad mal den gesamten HTML-Code. Allerdings ist alles noch im Aufbau aber vielleicht findet ja jemand den Fehler…wäre super!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>
      New York Apartment
    </title>
    <meta name="Author"
          content="Stephanie Böschen">
    <meta name="Publisher"
          content="Tanzprojekt">
    <meta name="Copyright"
          content=
          "Copyright Ferien Bad Scuol Thomas Böschen">
    <meta name="Keywords"
         lang="de"
          content=
          "Ferienwohnung, Ferien, Urlaub, New York, Apartement, Wohnung, Ferienaufenthalt, City Trip, Amerika, Stadturlaub, USA, NY, Einzimmerwohnung, Einzimmerapartment, Mietwohnung, Zwischenmiete, Untermiete, Mieten, mieten, Arbeitswohnung, Arbeit">
    <meta name="Keywords"
         lang="en-us"
          content=
          "holiday, New York, NY, USA, America, vacation, apartment, city trip, job, work, rent">
    <meta name="Description"
          content=
          "Vollausgestattetes und schönes Einzimmerapartment in der Upper West Side zwischen Riverside Park und Broadway zu vermieten. Eignet sich nicht nur als Ausgangspunkt um die Stadt zu erkundigen sondern auch als zu Hause für einen längeren Aufenthalt">
    <meta name="Content-language"
          content="DE">
    <meta name="Page-type"
          content="Private Organisation">
    <meta name="Robots"
          content="INDEX,FOLLOW">
    <style type="text/css">
           body { background-color:#C0C0C0; }

           div.ueberschriftA
              {font-family:Helvetica, Arial, "sans serif";
               font-size:2.5em;
               font-weight:bolder;
               font-variant:small-caps;
               word-spacing:0.2em;
               letter-spacing:0.08;
               color:#FF0000; }

           div.kleineSchrift
              {font-family:Helvetica, Arial, "sans serif";
               font-size:0.8em;
               font-weight:bold;
               font-variant:normal;
               word-spacing:0.09em;
               letter-spacing:0.05;
               color:#000000; }

           div.bildunterschrift
              {font-family:Helvetica, Arial, "sans serif";
               font-size:1em;
               font-weight:bold;
               font-variant:small-caps;
               word-spacing:0.1em;
               letter-spacing:0.06;
               color:#FFFFFF; }

           p { font-family:Helvetica, Arial, "sans serif";
               font-size:1em;
               font-weight:bold;
               font-variant:normal;
               word-spacing:0.1em;
               letter-spacing:0.06;
               color:#000000; }

           a:link { color:#990000;
                  text-decoration:underline; }
           a:visited { color:#FF0033;
                     text-decoration:underline; }
           a:hover { color:#FF0000;
                   text-decoration:underline;
                     font-weight:bold; }

           div.abstand { margin-top:80px; }

           div.abstandB { margin-top:10px; }

    </style>
  </head>

  <body>

   <div class="abstand">
     <table border="0"
      width="60%"
      align="center"
      cellpadding="0"
      cellspacing="4">


        <tr>
          <td>
            <table border="0"
             width="100%"
             cellpadding="4"
             cellspacing="0"
             bgcolor="#000000">
              <tr>
                <td>
                  <img src="Bilder\header.jpg"
                     width="100%" height="180">
                </td>
              </tr>
              <tr>
                 <td>
                   <div class="bildunterschrift" align="right" valign="bottom">Die Stadt die niemals schläft</div>
                 </td>
               </tr>
            </table>
          </td>
        </tr>

        <tr height="40">
          <td></td>
        </tr>

        <tr>
          <td>
            <div class="ueberschriftA">New York Apartment</div>
          </td>
        </tr>


        <tr>
          <td>
            <table border="0"
             width="100%"
             cellpadding="4"
             cellspacing="0">
               <colgroup>
               <col width="2*"></col>
               <col width="3*"></col>
               </colgroup>
               <tr>

                 <td valign="top">
                   <a href="haus.html">
                     <img src="Bilder\haus.JPG"
                        width="100%" border="0" alt="Haus">
                   </a>

                   <p></p>

                   <table border="0"
                    width="100%"
                    cellpadding="0"
                    cellspacing="0"
                    bgcolor="#D3D3D3">
                     <tr>
                       <td>
                         <table border="0"
                          width="100%"
                          cellpadding="4"
                          cellspacing="0"
                          bgcolor="#000000"
                          valign="top">
                           <tr>
                             <td>
                               <div class="bildunterschrift" align="center">Mietentgeld</div>
                             </td>
                           </tr>
                         </table>
                         <table border="0"
                          width="100%"
                          cellpadding="4">
                           <tr>
                             <td>
                               <p>Rent/2 guests:<br>
                         125 $ per night<br>
                                  850 $ per week<br>
                                  1500 $ two weeks<br>
                                  2500 $ per month<br>
                               </p>
                             </td>
                           </tr>
                         </table>
                       </td>
                     </tr>
                   </table>
                 </td>

                 <td align="left" valign="top">
                   <p>
                      Das kleine aber schöne Einzimmerapartment...
                   </p>
                   <table border="0"
                    width="100%"
                    cellspacing="0"
                    cellpadding="0"
                    bgcolor="#D3D3D3">
                     <tr>
                       <td>
                         <table border="0"
                          width="100%"
                          cellpadding="4"
                          cellspacing="0"
                          bgcolor="#000000"
                          valign="top">
                           <tr>
                             <td>
                               <div class="bildunterschrift" align="center">Kontakt</div>
                             </td>
                           </tr>
                         </table>
                         <table border="0"
                          width="100%"
                          cellpadding="4"
                          cellspacing="0">
                           <tr>
                             <td>
                               <p>Für Informationen über die Ferienwohnung <br>
                                  BT<br>
                                  E-Mail:
                                  <a href="mailto:%20btnewyork@hotmail.com">btnewyork@hotmail.com</a>                               </p>
                             </td>
                           </tr>
                         </table>
                       </td>
                     </tr>
                   </table>

                   <p></p>

                   <table border="0"
                    width="100%"
                    cellspacing="0"
                    cellpadding="0">
                     <colgroup>
                       <col width="1*">
                       <col width="1*">
                     </colgroup>
                     <tr>
                       <td align="left">
                         <a href="zimmer1.html">
                           <img src="Bilder\zimmer1.JPG"
                              width="98%" border="0" alt="zimmer">
                         </a>
                       </td>
                       <td align="right">
                         <a href="zimmer2.html">
                           <img src="Bilder\zimmer2.JPG"
                             width="98%" border="0" alt="zimmer">
                         </a>
                       </td>
                     </tr>
                   </table>

                   <div class="abstandB"></div>

                   <table border="0"
                    width="100%"
                    height="3"
                    cellspacing="0"
                    cellpadding="0"
                    bgcolor="#000000">
                     <tr>
                       <td>
                       </td>
                     </tr>
                   </table>
                 </td>
               </tr>

            </table>
          </td>
        </tr>
     </table>
   </div>
  </body>
</html>

Ich hab ein ähnliches Problem…

Ich sitz jetzt schon ne ganze weile an dem kleinem Text, aber er wird einfach nicht so dargestellt wie ich es will.

  1. Seit dem ich die Doctype angegeben hab wird der onmouseover effekt anders Dargestellt (ich will, wie vielleicht im Text zu erkennen, dass der hover effekt über die komplette Breite von 180px dargestellt wird, außerfdem soll der Text immer schwarz dargestellt werden.)

  2. In Mozilla wird eigentlich nur die hälfte dargestellt und ich weiß nicht mehr weiter…

Wo sind die Gitterlinien?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        " http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title>Homepage der Abiklasse 09 des TGT Bietigheim</title>
<style type="text/css">
 a {display: block;}
 .link {color:#A9A9A9; font-family: "times new roman"; font-size: 18px; font-weight: bold; text-align:center}
 a:link  {background-color:#339900; color:#000000; width:180px; text-decoration:none}
 a:visited {background-color:#339900; color:#000000; width:180px; text-decoration:none}
 a:hover  {background-color:#33CC00; color:#000000; width:180px; text-decoration:none}
  a:active {background-color:#339900; color:#000000; width:180px; text-decoration:none}
</style>
</head>
<body>
<body bgcolor="#FFFFFF">
<center>
<table border="1" bgcolor=#339900 bordercolor="black" width=900 style="border-collapse:collapse">
<tr width=180 height=100>
</tr>
<tr>
 <td style="width:180px; height:20px;" class="link";><a href="index.html">Home</a></td>
 <td style="width:180px; height:20px;" class="link";><a href="index.html">News/Termine</a></td>
 <td style="width:180px; height:20px;" class="link";><a href="index.html">Klasse</a></td>
 <td style="width:180px; height:20px;" class="link";><a href="index.html">Bilder</a></td>
 <td style="width:180px; height:20px;" class="link";><a href="index.html">Gästebuch</a></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
</table>
</center>
</body>
</html>

HELP! Sascha

@{INF3CT}
Sobald du den CODE gesetzt hast, habe ich eine Antwort für dich.
Da dies nun geschehen ist:

a:link {background-color:#339900; color:"#000000"; width=180px; text-decoration:none}

Was ich hier rot markiert habe muß geändert werden. Und nicht nur in dieser einen Zeile.
Anführungszeichen löschen, = ersetzten durch einen Doppelpunkt, und hinter 180 fehlt px.
So muss es aussehen.

a:link {background-color:#339900; color:#000000; width:180px; text-decoration:none}

und evtl. solltest du diese Zeilen auch mit CSS erstellen:

<tr><td width=180 height=20></td>

etwa so:

<tr><td style="width:180px; height:20px;"></td>

@Goldbeere
Versuche es doch mal mit CSS:

<table style="border:0; width:60%: text-align:center; padding:0; margin:4px;">

Obwohl ich deinen Code mal kopiert habe, sieht man bei mir zwische IE6 und FF2 keinen unterschied. Die Breite wird normal mit 60% angezeigt.

EDIT: Lösung für {INF3CT} hinzugefügt.

Danke, die Linkfarbe stimmt schonmal.

Aber der mouseover Effekt ist immer noch nur hinter dem Text und nicht 180px breit…

außerdem wird in Mozilla die Tabelle immer noch nicht dargestellt.

MFG Sascha

Aber der mouseover Effekt ist immer noch nur hinter dem Text und nicht 180px breit

Füge mal unter folgendes ein:

 a {display: block;}

Jetzt noch die Fehler korigiert:

 .link {color:#A9A9A9; font-family: "times new roman"; font-size:???px; font-weight: bold; text-align:center}

Schriftgröße 50 px - Kann ich mir bei einer Zeilenhöhe von 20 px nicht vorstellen.

<td width=180 height=20 class="link">

würde ich auch ändern in:

<td style="width:180px; height:20px;" class="link">

Damit wären die gröbsten Fehler erst mal vom Tisch

Danke!!!

Der Mouseover-effekt funktioniert jetzt genau so wie ich ihn mir gewünscht hab. (IM IE6 und FF2)

Nur leider zeigt es im FF immer noch nicht die Gitterlinien an.
Ich vermute es hat was mit

<table border="1" bgcolor=#339900 bordercolor="black" width=900 style="border-collapse:collapse">

zu tun.

Ich hab gelesen, dass FF die Farbe aus der Fontformatierung entnimmt… aber ich bin immernoch nicht auf einen LSG gekommen, vielleicht hilft euch dass ja.

@nichtsgeht
Danke für die Antwort (funktioniert leider aber auch nicht…) und v.a fürs Testen. Jetzt weiß ich wenigstens dass es wohl am ie7 liegt den ich nämlich hab und der nur komische Sachen anzeigt…
Naja ich werd jetzt mal weiterbasteln…

Das die Gitternetzlinien nicht im FF angezeigt werden, liegt an den fehlenden Zellen. z.B. hier:

<tr width=180 height=100>
</tr>

Ich habe hier mal den kompletten Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        " http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title>Homepage der Abiklasse 09 des TGT Bietigheim</title>
<style type="text/css">
 a {display: block;}
 .link {color:#A9A9A9; font-family: "times new roman"; font-size: 18px; font-weight: bold; text-align:center}
 a:link  {background-color:#339900; color:#000000; width:180px; text-decoration:none}
 a:visited {background-color:#339900; color:#000000; width:180px; text-decoration:none}
 a:hover  {background-color:#33CC00; color:#000000; width:180px; text-decoration:none}
  a:active {background-color:#339900; color:#000000; width:180px; text-decoration:none}
</style>
</head>
<body>
<body bgcolor="#FFFFFF">
<center>
<table border="1" bgcolor=#339900 bordercolor="black" width=900 style="border-collapse:collapse; empty-cells:show">
<tr width=180 height=100><td colspan="5"> </td>
</tr>
<tr>
 <td style="width:180px; height:20px;" class="link"><a href="index.html">Home</a></td>
 <td style="width:180px; height:20px;" class="link"><a href="index.html">News/Termine</a></td>
 <td style="width:180px; height:20px;" class="link"><a href="index.html">Klasse</a></td>
 <td style="width:180px; height:20px;" class="link"><a href="index.html">Bilder</a></td>
 <td style="width:180px; height:20px;" class="link"><a href="index.html">Gästebuch</a></td>
</tr>
<tr><td style="width:180px; height:20px;"></td><td rowspan="6" colspan="4"> </td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
<tr><td style="width:180px; height:20px;"></td>
</tr>
</table>
</center>
</body>
</html>

Was ich hinzugefügt habe, ist rot gekennzeichnet.
Und noch was: Du hast hinter deinem class=„link“ ein Semikolon stehen,
der muß raus. Ok , war meine schuld, hatte ich versehentlich zuerst in
meinen letzten Post drin, hatte ich aber später geändert. :wink:
Das empty-cells:show sorgt dafür, das leere Zellen angezeigt werden.

Danke, jetzt geht alles.

Ist echt ein super Forum, falls ich wieder ein Problem hab weiß ich ja jetzt an wen ich mich wenden muss. :slight_smile:

Nochmal bessonderen Dank an „Nichtsgeht“, du hast mir echt weitergeholfen!

MFG Sascha