Eigene HP: Firefox hui, IE pfui

Kludsch · 10. Februar 2010 um 13:50

Hey Leute…

Hab jetzt nach 2 Jahren wieder die Arbeit für eine private Sportvereins-HP aufgenommen
editiert
Das blöde ist, hab die meiste Zeit nur über FF gearbeitet und somit nicht bemerkt dass vieles unter IE blöd aussieht. Beispielsweise auf der hauptseite gleich

Ich arbeite mit einer externen CSS und Frames. Ich weiß das ist veraltet, allerdings reichen meine Kenntnisse nicht so weit NUR mit CSS zu arbeiten und außerdem solls ja nix großes werden, von daher reichen mir frames vollkommen.

Die CSS findet ihr hier:
editiert

Wie man sehen kann gibts gleich mal probleme mit der Startseite… bei der 1. Überschrift (h1) ist der Abstand nach oben zu groß, obwohl nur padding-bottom einstellungen in der css genommen worden.

Zudem sind auch die Abstände in der linken Navigation viel zu groß in IE (in FF wunderbar). ist in der css unter der spezifischen klasse “.navigation” festgelegt.

Ich weiß, dass warscheinlich viele an der Formatierung was auszusetzen haben, ja . Aber wie gesagt, ist kein großes Projekt, von daher…

Im generellen fällt mir auf das überhaupt die Schrift, abstände etc. im IE schlecht aussehen…

Würde mich über jede Hilfe freuen!

Chris · 10. Februar 2010 um 14:02

Hi,

in beiden Brwosern wird das gleiche dargestellt - im IE nur weniger der Frames (weshalb auch in der Mitte die Scrollbar entsteht).

du solltest dringend etwas CSS lernen (oder ein fertiges CSS-gerüst nehmen, so wie ich es mache) und dann deine Seite entsprechend mit Containern anstelle von Frames gestalten.

Kludsch · 10. Februar 2010 um 14:22

wirklich? bei mir ist schon ein deutlicher unterschied zwischen FF und IE (wohlbemerkt, habe IE6)…

wie gesagt, ist nur ne kleine hp… werde jetzt mal bei frames bleiben bei dieser, für spätere HP’s kann ichs ja immer noch lernen.

so siehts bei mir aus in IE6:
250kb.de/u/100210/j/5ADkWk8GTBzd.jpg

und so in FF (so sollte es auch sein):
250kb.de/u/100210/j/U1MlnqF3CfX5.jpg

EDIT: das mit dem h2 “06.02.2009: Testspiel SC…” hab ich geschafft… Anscheinend hat IE probleme mit margin…

Ärgern tut mich immer noch der Abstand nach oben in h1 sowie links die Abstände zwischen den Punkten… das muss doch irgendwie möglich sein?

Kludsch · 10. Februar 2010 um 14:49

Ok, hab ein paar kleine fehler gefunden, diese ausgebessert und seitdem gehts.

anscheinend kann FF diese kleinen fehler umgehen und es trotzdem korrekt anzeigen.

Jedenfalls hab ich das problem nun gelöst… vorerst.

Eine frage hätte ich da noch: Links wie man sehen kann sind die Menü-überschriften blau hinterlegt (Meisterschaft, Medien). Habs über CSS so geregelt, dass die

's blau hinterlegt sind, hätte es aber gern so das sie nicht die volle breite der zelle, sondern nur bis zum ende der schrift blau hinterlegen.

Achja, auch der abstand der h1 nach oben macht mich etwas fertig -.-

wäre das möglich?

kla_kal · 10. Februar 2010 um 15:05

Die <th s zusätzlich in ein <span dann müsste es denke ich klappen.

Die Abstände kannst du mit margin und padding regeln, am besten erst mal beides auf null und dann probieren wie es dir gefällt.

Kludsch · 10. Februar 2010 um 15:13

bzgl. Abstände:

Hab das probiert was du gesagt hast. Wenn ich margin-top mit -4px festlege, siehts im IE gut aus. Das problem ist, im FF wirds dann auch nach oben verschoben und dann siehts im FF nicht mehr gut aus…

h1 { font-family: Verdana; font-size: 15px; color: #black; font-weight: bold; border-bottom: 1px solid #000000; padding-bottom: 3px; margin-top: -5px; }
Durch das margin top -5 erreiche ichs, dass es im IE passt. Allerdings versaut es dadurch die korrekte darstellung im FF. Wenn ich margin auf 0 stelle, ändert sich gar nichts.

bzgl. span, könntest du dich da bisl genauer ausdrücken? (im fall der navigation meiner seite)

Edit:
Hab jetzt eine lösung gefunden, einfach am Anfang des CSS
*
{
margin:0;
padding:0;
}

setzen, und dann für die einzelnen Sachen die margin/paddin ändern. Ist das eine gute Methode?

Kludsch · 10. Februar 2010 um 16:24

Ich könnt wegen diesem scheiß IE noch auszucken.

Kludsch · 10. Februar 2010 um 16:33

So, denke ich hab das Problem gelöst…

Damit überall gleicher Anfangsbedingungen in sachen abstand oben/unten herrschen, hab ich am anfang der CSS

* { margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0; }

gesetzt und dann bei den einzelnen klassen (h1, h2, table etc.) die margin’s selber nach eingetragen, und jetzt gehts.

Kludsch · 10. Februar 2010 um 20:00

wg. dem blauen hintergrund in der navigation bräucht ich noch hilfe

Balmung · 10. Februar 2010 um 20:07

Schonmal was vom Editbutton gehört?

Zur Seite:
gib einer Seite einen Doctype, dann sollte der IE nicht in den Quirksmodus springen.

Camou · 10. Februar 2010 um 20:08

Hallo Kludsch

Damit es in den verschiedenen IE`s richtig dargestellt wird solltest du
Conditional Comments verwenden.
Hier ist eine gute beschreibung dazu:
http://de.selfhtml.org/css/layouts/browserweichen.htm

Gruß
Camou

Kludsch · 10. Februar 2010 um 21:23

okay leute…

hab jetzt den großteil der probleme lösen können…

ALLERDINGS:

EDIT: link entfernt

Wenn man auf bildergalerie geht (nicht weiter, die übersicht ist gemeint), kommt ein horizontaler scrollbalken. was natürlich scheiße ist… das lustige ist, dass das schon öfters mit dieser seite vorkam und ich meist diesen code verwendet habe, um das auszuschließen:

[code]<!–[if gte IE 6]>

html {overflow-x:hidden;} body {margin-right:28px;}

<![endif]–>[/code]

Habs auch schon ohne dem probiert, allerdings ohne Erfolg… ´auch die dokumentendeklaration half nix!

Kann mir hierbei wer weiterhelfen?

EDIT: ok, habs gelöst…
einfach in die CSS am anfang

* }overflow-x: hidden; overflow-y: auto; }

Ist es sicher das zu machen? Oder wird das wieder andere Probs mit sich bringen? Ein Teufelskreis ist das xD

sodale, derzeit ist alles gelöst

Naja, bis auf eins… Ich verlinke im Menüpunkt Tabelle/Spielplan auf eine externe Seite… (hab die Erlaubnis dafür), da mir die Zeit fehlt diese Daten selbst zu aktualisieren…

Beim IE zeigt der da auch ne horizontale an… ich schätze mal, da kann man nichts dran ändern, oder?

edit: thread kann eigentlich dicht gemacht werden!

für jemanden dens interessiert: Hab für den blauen Hintergrund in der Navigation (dank eines tipps eines freundes) einfach mit span style gearbeitet, hat prima funktioniert… (glaube das wurde vorher ohnehin vorgeschlagen )

hoffmann · 11. Februar 2010 um 10:07

Die ‘conditional comments’ stehen um das style-Element,
weil overflow-x oder overflow-y kein korrektes CSS2 sind.
Ich meine, es gibt da aber Vorschläge in CSS3-Arbeitsentwürfen,
wie das interpretiert werden könnte. Da sich solche
Arbeitsentwürfe jederzeit ändern können, sollte man das nicht
auf normalen Seiten verwenden, nur auf Testseiten - oder dann
eben für den MSIE mit ‘conditional comments’, auch weil der
das eventuelle anders interpretiert, als im Arbeitsentwurf steht.

Interessant bei dem ‘conditional comment’ ist ‘gte’ - ist das
wirklich so gemeint, daß das für MSIE ab Version 6 oder neuer
zutreffen soll? Das ist eher keine sinnvolle Angabe, wenn damit
Fehler des MSIE kompensiert werden sollen, weil man die
Fehler von zukünftigen Versionen ja noch gar nicht kennt…