Falsche Ausrichtung in der Zelle beim Internetexplorer

[xtc.sanchez]

Hallo Leute,

habe ein kleines Problem mit der Ausrichtung eines Bildes in einer Zelle, welches jedoch nur beim Internet Explorer besteht. Firefox und andere Browser zeigen es tadellos richtig an, was denk ich mal heißt, dass es auch passt... Bin selbst leider kein HTML Profi und habe mich damit stundenlang rumgeschlagen, aber einfach keine Lösung für mein Problem gefunden... :( Habe mal Ausschnitte aus der index.html und der CSS Datei, in der Hoffnung, dass in ihnen der Fehler steckt

CSS:
.headerbarleft{
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;  
  background: url(img/bar_02.gif) repeat-x;
  white-space:nowrap;
  vertical-align:middle;
  text-allign: left;
  color:#000000;
}

.headerbarmiddle{
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;  
  background: url(img/bar_02.gif) repeat-x;
  white-space:nowrap;
  vertical-align:middle;
  color:#000000;
}

.headerbarright{
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px; 
  line-height: 1.5;  background: url(img/bar_02.gif) repeat-x;
  white-space:nowrap;
  vertical-align:middle;
  text-align: right;
  color:#000000;
}


background: url({$tpl_path}img/bar_02.gif) repeat-x;white-space:nowrap;vertical-align:middle;color:#e2e1e1;

index.html
<tr>
  <td height="25" align="left" width="4" class="headerbarleft"><img src="bar_01.gif" width="4"/>
</td>
    <td height="25" align="left" class="headerbarmiddle">&nbsp;<a href="{php}echo xtc_href_link('index.php');{/php}">Home</a> | {if 
      $account}{php}if ($_SESSION['customers_status']['customers_status_id'] == 
      1) {{/php}<a href="login.php">{#link_login#}</a> | {php}}{/php}{if $account}{php} 
      if (isset($_SESSION['customer_id'])) { {/php}<a href="{$logoff}">{#link_logoff#}</a> 
      | {php} }{/php}{/if}{/if}{if $account}<a href="{$account}">{#link_account#}</a> 
      | {/if}<a href="{$cart}">{#link_cart#}</a> | <a href="{$checkout}">{#link_checkout#}</a></td>
    <td height="25" class="headerbarmiddle">{$box_SEARCH}</td>
    <td height="25" class="headerbarmiddle">&nbsp;&nbsp;{$box_MANUFACTURERS}&nbsp;&nbsp;</td>
    <td height="25" class="headerbarmiddle">{$box_CART}&nbsp;</td>
    <td height="25" align="right" width="4" class="headerbarright"><img src="bar_03.gif" width="4"/></td>
  </tr>
  <tr> 
    <td width="740" height="500" colspan="6" align="left" valign="top" class="main"> 
      <table width="954" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr> 
          <td colspan="2" style="background-color:#ffffff; height:10px;">&nbsp;</td>
        </tr>
        <tr> 
          <td width="210" valign="top" align="left"> 
            {$box_CATEGORIES}{$box_ADD_QUICKIE} {$box_CONTENT}{$box_LAST_VIEWED}{$box_REVIEWS}{$box_SPECIALS}{$box_WHATSNEW} 
            {$box_ADMIN} {$box_BESTSELLERS} {$box_MANUFACTURERS_INFO}</td>
          <td width="744" valign="top" align="top" style="padding-top:5px; padding-left:30px;padding-bottom:5px;" class="main">{$main_content} 
          </td>
        </tr>
        <tr> 
          <td colspan="2" valign="bottom">
          </td>
        </tr>
      </table></td>
  </tr>
  <tr> 
  <td height="25" align="left" width="4" class="headerbarleft"><img src="bar_01.gif" width="4"/></td>
    <td height="25" colspan="4" align="center" class="headerbarmiddle"><a href="http://www.diexel.net/">diexel.de 2008</a></td>
    <td height="25" align="right" width="4" class="headerbarright"><img src="bar_03.gif" width="4"/></td>
  </tr>

Also speziell:

<td height="25" align="right" width="4" class="headerbarright"><img src="bar_03.gif" width="4"/></td>

Bei der linken Zelle (headerbarleft) funktioniert es ja ohne Probleme, nur rechts (headerbarright) will er das Bild (bar_03.gif) nicht vollständig rechts ausrichten

Hier die Adresse: diexel silver

Wäre für jeden Tipp dankbar!!!

lg, sanchez

 

[Efchen]

Wäre für jeden Tipp dankbar!!!

Für jeden?
Ich sehe auf der Seite keine Notwendigkeit für Tabellen. Die würde ich erstmal abschaffen. Dann semantisches HTML verwenden, Inhalt und Layout strikt trennen und für Design+Layout nur noch CSS verwenden. Kurz: Modern arbeiten, dann hat am Ende jeder was von der Site.

Gruß,
-Efchen

 

[xtc.sanchez]

Danke Efchen,

das würde heißen, dass ich die komplette index.html umschreiben müsste oder? Es handelt sich hierbei lediglich um eine Vorlage von einem Freund, da ich mich leider nur recht schwach mit HTML auskenne. Könntest du mir vielleicht helfen?

Liebe Grüße

 

[Efchen]

Das würde es wohl heißen, ja.

Wenn Du Dich wenig mit HTML auskennst, solltest Du das vielleicht erstmal lernen. Da eignet sich SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) gut dazu.

HTML, als Strukturbeschreibungssprache, zeichnet nur den Inhalt aus, gibt also an, ob der Inhalt eine Überschrift ist, eine Adresse, ein Zitat, Fließtext oder was auch immer. Das Aussehen, was durch die Auszeichnung erreicht wird, ist irrelevant.

Das Aussehen wird dann komplett mit CSS gemacht, wobei man sich nicht darauf verlassen darf, dass ein Element, das im eigenen Browser die gewünschte Größe hat, auch in einem anderen Browser die selbe Größe hat. Alle Eigenschaften, die man sicher haben will, muss man angeben.

Eigentlich nicht schwer, aber man bekommt von vielen Seiten halbherzige und falsche Informationen. Und man braucht natürlich etwas Zeit, sich das alles richtig anzueignen.

Für Detailfragen stehe ich gerne bereit. Aber ich schreibe niemandem fertigen Code. Ich hoffe auf Eigeninitiative und biete Hilfe zur Selbsthilfe.

Viele Grüße,
-Efchen

 

[xtc.sanchez]

Vielen Dank Efchen,

natürlich verlange ich von keinem den fertigen Code zu schreiben.
Aber kannst du mir sagen welchen Nachteil mein derzeitiger Code aufbringt? Problem ist, dass viele andere Dateien noch mit dem Code verknüpft sind, sprich andere .html und .php Boxen und co. Deswegen würde ich erstmal gerne bei diesem Code bleiben und als einziges mein Problem lösen (Thread). Möchte die Seite erstmal so fertig bekommen und dann (in meiner Freizeit) mich in HTML reinlesen (so ein wenig kann ich das ja auch :) ) und dann nochmal versuchen das Ding umzuschreiben.

Nur findest du das Problem, welches ich beschrieben habe, im Code?

Liebe Grüße

 

[Efchen]

Aber kannst du mir sagen welchen Nachteil mein derzeitiger Code aufbringt?

Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Problem ist, dass viele andere Dateien noch mit dem Code verknüpft sind, sprich andere .html und .php Boxen und co.

Klingt, als wäre dann eine komplett neue Website fällig.
Ja, das verstehe ich, dass man den Aufwand scheut. Letztlich ist aber das Beatmen einer solch altmodischen Website aufwändiger als die Wartung einer modernen Website. Es ist wie immer eine Frage der Zeit. Investiert man einmal einen größeren Aufwand, der sich dann mit der Zeit in der Wartung rechnet, oder beatmet man die Site einfach weiter. Rechnen würde sich der Aufwand wahrscheinlich eh erst in einigen Monaten.

Deswegen würde ich erstmal gerne bei diesem Code bleiben und als einziges mein Problem lösen (Thread).

Klar, es ist Deine Entscheidung.

Nur findest du das Problem, welches ich beschrieben habe, im Code?

Nein, da muss ich passen. Ich für mich persönlich sehe keinen Sinn darin, solchen Code zu debuggen, wo ich weiß, dass da Probleme durch Browserunterschiede vorprogrammiert sind. Ich hab den Tabellenmissbrauch schon vor fast 6 bis 7 Jahren hinter mir gelassen.

Gruß,
-Efchen

 

[xtc.sanchez]

Mal eine andere Frage, wie lange würde ein Profi wird das Umschreiben von solch einem Code brauchen, so, dass die Seite (Shop) am Ende bei jedem Browser so aussieht, wie momentan bei Firefox?

Liebe Grüße

 

[Efchen]

Keine Ahnung. Kommt auf den Umfang der Site an.
Prinzipiell würde ich sowas wahrscheinlich nicht umschreiben, weil da viel zu viele Fehler drinstecken (syntaktische, semantische und allgemeine Vorgehensfehler), sondern es neu machen.

 

[xtc.sanchez]

Hallo Efchen,

und kann man es so umschreiben, dass es hinterher aussieht wie es jetzt aussehen soll (Firefox und Co.)?

Wie lange würde dieses "neu schreiben" dauern geschätzt und würdest du es vielleicht doch tun für mich? Natürlich nicht für lau.

 

[Efchen]

Wenn Du eine valide Basis mit XHTML schaffst, und das Design + Layout vollständig mit CSS machst und Inhalt und Layout voneinander trennst, dann hast Du anschließend auf jeden Fall eine Website, die in 100% aller Browser *nutzbar* ist, also auch in Mosaic, Lynx oder Netscape 0.8. Diese Verfügbarkeit hast Du mit Tabellenlayouts definitiv nicht.

Wenn das Endergebnis in allen modernen Browsern gut aussehen soll, ist das eigentlich auch kein Problem. Da auch die modernen Browser leider nicht immer alles können (der IE ist hier SPitzenreiter), kann man nicht garantieren, dass eine Website überall exakt gleich aussieht. Dazu kommt, dass Menschen unterschiedlich sind. Sie benutzen unterschiedliche Computer, Clients, Einstellungen, z.B. Schriftgrößen usw. So gesehen können Websites gar nicht überall exakt gleich aussehen. Wenn man sich dessen bewusst ist, kann man mit CSS wunderschöne Websites bauen, die in modernen Browsern gut aussehen und in altmodischen Browsern trotzdem zu 100% nutzbar sind.

Ich weiß nicht, wie lange das dauert, weil ich die Website nicht kenne, und ich mach das auch nicht hauptberuflich, daher habe ich da auch keine Erfahrung mit Zeitabschätzungen. Wenn Du nur 2 Stunden pro Woche dran arbeitest, dann kannst Du auch 2 Jahre investieren.

Nein, ich kann Dir das nicht schreiben. Ich hab nicht die Zeit dazu und Du willst sicher nicht 2 Jahre drauf warten :-)

Gruß,
-Efchen