CSS-Website mit Safari OK, mit anderen Browsern Chaos

Ender

Ender

Aktives Mitglied
Thread Starter
Dabei seit
20.03.2006
Beiträge
499
Reaktionspunkte
31
Hallo zusammen,

ich habe mir per Texteditor mit CSS eine Website erstellt und mich auch erst gefreut, dass es gut klappt. Noch ein bisschen gefummelt, bis nichts mehrverrutscht war und gut.

Dann habe ich zum ersten Mal die Seite mit einem Nicht-Safari-Browser aufgerufen und *Bumms* sieht die Seite auf einmal ziemlich zerstört aus.

Ich würde mich freuen, wenn Ihr mir konkrete Tipps geben könntet, wie ich die Seite auf dem schnellsten Weg browserkompatibel bekomme. Eigentlich ist es eine ganz einfache Seite, jedoch habe ich wohl mit dem CSS zu viel oder zu wenig gefummelt.

Die Adresse lautet: http://www.reiki-entdecken.de

Habt dank für alles, was mich in dieser Sache weiter bringt!

Grüße
Ender
 
Bevor du da weiter Arbeit investierst: Seiten für 800x600 zu optimieren hat man vor 10 Jahren gemacht. ;)
 
  • Gefällt mir
Reaktionen: Ender
Ender schrieb:
Tja, was hat mich da geritten? Wohl mein 12" PB.
Auch Dir Danke für den Tipp.
Zum Vergrößern anklicken....

Selbst das hat 1024x768.

Aber mal ehrlich (und gut, dass du die Kritik vertragen hast) - schau dich mal um, solche Seiten gibt es kaum noch. Und wenn, dann wurden sie jahrelang nicht mehr gepflegt.
 
Hallo Ad,

mir hat beim Entwurf die Einfachheit gefallen - mal ganz davon zu schweigen, dass ich zu ausgefallenerem kaum in der Lage bin.
Als ich die Seite breiter versuchte, blieb nur der Eindruck einer einfarbigen Seite übrig, das war zu wenig.
Eine Alternative wäre nun, in Abhängigkeit der Fenstergröße eine flexible Seitenbreite hinzubekommen, aber das ist vermutlich mit reinem CSS recht schwierig, oder? Es soll ja nicht die komplette Seite mittig sein, sondern nur der Textteil soll mittig sein.

Viele Grüße
Ender
 
Mit CSS ist so gut wie alles möglich - auch das. Alles eine Sache, wie viel Zeit man dafür investieren möchte. Also Lernaufwand + Umsetzung.

Ich wollte dir jetzt dein Design auch nicht madig machen. War nur eine Bemerkung, die mehr oder minder Off-Topic war.
 
  • Gefällt mir
Reaktionen: Ender
Versuch mal die Bilder im CSS zu "floaten" und nicht im html-Code.
Ich hatte so ein Problem mal mit einem iFrame, dieses wurde auch in verschiedenen Browsern an verschiedenen Positionen angezeigt. Als ich die Postition, Größe usw. im CSS festgelegt habe, stimmten die Werte in allen Browsern überein.
 
flosse schrieb:
Versuch mal die Bilder im CSS zu "floaten" und nicht im html-Code.
Ich hatte so ein Problem mal mit einem iFrame, dieses wurde auch in verschiedenen Browsern an verschiedenen Positionen angezeigt. Als ich die Postition, Größe usw. im CSS festgelegt habe, stimmten die Werte in allen Browsern überein.
Zum Vergrößern anklicken....

Hallo Flosse,
im HTML-Code sind keine Bildfestlegungen, ist bereits alles im CSS.

Danke,
Ender
 
Warum hast du dann ein style="float:left" im img-tag eingebaut?


HTML: 
<div id="contentstart">
            <a href="index.html"><img style="float: left;" alt="Start" src="images/cro_start.gif"></a>
            <img src="images/cro.gif">
                <div id="content">
 
  • Gefällt mir
Reaktionen: Ender
Hallo Flosse,

das hat der Teufel da reingebaut!
Ne, hatte Dich falsch verstanden, ich wusste nicht, dass man diese Anweisungen auch in die CSS-Datei verlegen kann. Das probier ich aus.

Danke,
Ender
 
Wenn der Code halbwegs validiert, sollten zumindest FF, Safari & Co damit klar kommen. Wie immer macht die M$ Konkurrenz noch Ärger.

Versuche erst mal die Seite für den "Rest der Welt" (also FF und so) ans Laufen zu bekommen. Danach nutze conditional comments (einfach mal danach googeln, es gibt so viele Leute, die das besser erklären als ich), um dem InternetExploder die Sache beizubiegen.
 
In meiner Webstatistik ist der IE (6+7) mit über 70% Anteil der "Rest der Welt" ;)
 
Hallo,

was gefehlt hat, war:

img {border:none;}
Zum Vergrößern anklicken....

So ist nun zumindest beim MacOS Firefox Ruhe. Die anderen Browser muss ich noch probieren. Validieren werd ich die Seiten natürlich trotzdem. :)

Viele Grüße
Ender
 
Hallo nochmal!

nun ist alles validiert und sieht auf Safari und Firefox gut aus.
Nur der IE macht noch Sorgen:

In der Startseite werden die beiden DIVs #menu und #symbol einmal nach links und einmal nach rechts gefloatet. Der IE ignoriert das jedoch. Habt Ihr noch einen konkreten Tipp, wo ich da schrauben kann?

Danke!
Ender
 
Wie ich schon sagte: Conditional Comments und die Sache für den IE von Hand anpassen.
 
Super! :cake: :cake: :cake: :cake: :cake: :cake:
Die Conditional Comments zu aktivieren ging ja ganz leicht, die einzelnen Margins anzupassen war dagegen eine Heidenfummelei. Auch scheint dem IE an einer Stelle ein position:absolute; gefehlt zu haben.

Nun passt das Layout zumindest auf einem XGA-Monitor mit dem IE6, das muss reichen.

Bleibt noch eins: Hat von Euch schonmal jemand probiert, eine Schriftart einzubinden, sodass sie nicht lokal installiert zu sein braucht? Ich hätte gern die Optima zuverlässig angezeigt...

Habt nochmal vielen Dank für die Hilfe!
Ender
 
IE und position:absolute - geht schief. Kann er nicht, will er nicht. Meine Private Webseite gibt immer (auch per CC) zusätzlich zum Begrüßungstext den Verwendern vom IE den Hinweis, dass man sich ->da<- auch einen anständigen Browser besorgen kann.
Bei Firmenauftritten verzichte ich - aus offensichtlichen Gründen - auf diesen frechen Hinweis.^
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten