Einstellungen für verschiedene Browser anpassen

silberbiene

Hallo,

gibt es einen Code, den ich einbauen kann, der es mir ermöglicht, dass meine Seiteneinstellungen kompatibel mit verschiedenen Browsern sind?

Momentan hab ich das Problem, dass meine Seiten bei Mozilla so angezeigt werden, wie ich das haben möchte. Beim IE allerdings habe ich in den Textabschnitten riesige Lücken und Verschiebungen auch bei meinen Bildern und Grafiken.

Viele Grüße
Silberbiene

Lizzard

Hi,

es gibt keinen expliziten Code der dir garantiert dass deine Seite in allen Browsern identisch aussieht. Halte dich an die Vorgaben des W3C und validier deine Seite: http://validator.w3.org
Wenn du alle gefundenen Fehler beseitigt hast, dürfte auch ein Großteil deiner Fehler verschwinden.

MfG
LizZard

yeti66

Hi silberbiene,
schön wäre es, wenn es so einfach ginge. Hier kann man sich nur bemühen W3C-konform zu arbeite und in einem Browser zu testen der den Code auch konform umsetzt (Firefox zB. oder Opera in neuster Version). Perfekt ist keiner. Dann in Abschnitten die Umsetzung in den verschiedenen Browsern testen, Anpassungen vornehmen und wenn es gar nicht anders geht mit Hacks arbeiten.

Gruß yeti66

Ok, dann werde ich das mit dem Validator nochmal versuchen. Hatte den schon mal probiert, bin aber nicht so recht klar gekommen.

In Firefox sieht ja alles OK aus, nur im IE nicht. In welchen sollte man denn - außer Opera - ansonsten noch testen? Welche sind noch am gängigsten?

Und was ist mit "Hacks" gemeint, wenn alle Stricke reissen?

Gruß Silberbiene

yeti66

Als Hacks im Bezug auf HTML bezeichnet man kleine Codeerweiterungen im CSS die für spezielle Browser geschrieben sind und Unzulänglichkeiten in der korrekten Darstellung ausbügeln.
Hier wird z.B. der Box-Model-Hack (für den Explorer) beschrieben.
http://de.selfhtml.org/css/layouts/browserweichen.htm

Gruß yeti66

sejuma

@silberbiene:
Wenn du mal einen Link von deiner HP postest kann dir hier vielleicht auch jemand konkret helfen.

vielen Dank für den Link zu Self HTML. Hab da schon gesucht, hatte aber nicht die richtige Seite gefunden.

Und hier kommt der Link:

http://silberbiene.si.funpic.de
oder
http://mitglied.lycos.de/silberbiene

wie gesagt, Mozilla sieht ganz gut aus, IE sind die Texte und Bilder verschoben

Viele Grüße
Silberbiene

sejuma

Ich bin nicht der Table-Experte und hab jetzt auch nicht mehr viel Zeit, da es gleich in den Urlaub geht. Hab mir mal die Seite Wellensittiche mit dem Bild rechts oben angesehen. Gib mal hier beim table-style das dem Bild übergeordnet ist noch ein "margin-left:30px;" ein, dann kommt bei mir auch im IE der Abstand zum Text.
Das generelle Problem dürfte daran liegen, dass du bei width mit Prozentwerten arbeitest. Bei Grafiken breiten die sich dann immer soweit aus wie sie Platz haben. Besser ist es, hier Pixelwerte zu verwenden, die denen des Bildes entsprechen (evtl. noch Zugabe für Abstände).
Probiers mal aus, ggf. kann dir dann noch ein anderes Forumsmitglied helfen.

yeti66

silberbiene,

schau mal:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type"
 content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>index</title>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(123, 203, 200);"  alink="#000099" link="#000099" vlink="#990099">
<table cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="2">[img]Grafiken/bckgr03.jpg[/img]</td>
    <th  style="background-image:Grafiken/bckgr01.jpg;"> [img]Grafiken/logo.jpg[/img]</th>
  </tr>
  <tr>
    <td style="background-image:Grafiken/bckgr04.jpg;"><table width="896" cellpadding="0" cellspacing="0">
        <tr>
          <td width="896" align="center">[img]Grafiken/Herzlich%20willkommen%20bei%20der%20Silberbiene%20silber.jpg[/img]</td>
        </tr>
        <tr>
          <td width="896" align="center">[url='home.htm'] [img]Gifs/Kopie%20von%20Enter.gif[/img][/url]</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td colspan="2" style="background-image:Grafiken/bckgr02.jpg;height:99px;"><table cellpadding="0" cellspacing="0">
        <tr>
          <td height="79" width="350"></td>
          <td style="height:79px;">[img]Grafiken/button-x.jpg[/img][img]Grafiken/button-x.jpg[/img][img]Grafiken/button-x.jpg[/img][img]Grafiken/button-x.jpg[/img][img]Grafiken/button-x.jpg[/img][img]Grafiken/button-x.jpg[/img]</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Alles anzeigen

Ich habe erst einmal die META-Tags aus Deinem Quellcode in den header(html- Abschnitt ) kopiert, wo sie auch hingehören. Mit den CSS-Angaben hast Du Dich etwas verstiegen oder arbeitest Du mit Frontpage im Desigmodus?
Wie auch immer. Teste erst mal den Code. Ich wollte nicht alle Grafiken runterladen, deßhalb bin ich jetzt nur vom Code ausgegangen. Besser wäre, wenn Du absolut verlinken würdest z.B.:

Code

<img src="http://silberbiene.si.funpic.de/Grafiken/bckgr04.jpg."......

Das macht es leichter.!!

Gruß yeti66

Hallo,
vorab schon mal danke für Eure Hilfe. Den Code werd ich erstmal bei mir ablegen. Gehe jetzt selbst für eine Woche in Urlaub und hoffe, danach - falls nötig - noch mal tatkräftige Unterstützung von Euch zu erhalten.

Viele Grüße
Silberbiene