IE7 stellt website falsch da -_-'

[hokage555]

So leutis xD

das wird jetzt mal wieder etwas länger ;-)

also ...

Vom aufbau her steht meine website nun. Im FF wird alles genau so angezeigt wie ich es in HTML und CSS gecodet habe...

Na was ist jetzt nur mein problem^^???
...

Rischtisch!!!

Der scheiß IE 7 (andere browser habe ich noch net getestet) zeigt die Seite nicht genau richtig an. das nicht ganz korrekte darstellen der seite ist zwar nur minimal, aber trotzdem kommt es dem design nicht gerade zu gute.

die daraus resultierende frage sollte dann ja auch klar sein

woher kommt diese andere/falsche darstellung und wie kann man dem entgegenwirken.
ziel: FF und IE7 zeigen seite so an, wie sie gecodet wurde!!!

hier ein paar kritische stellen damit ihr nicht selber erst alle darstellungsfehler suchen müsst^^:

1. hr unterm banner ignoriert von mir angegebene formatierung.

2. margin-bottom:30px; beim .inhaltgesamt div wird ignoriert.
(d.h. kein weißer streifen am unteren ende der seite)

3. sehr räzelhaft: fahre ich mit der maus über einen menupunkt mit drop-down, dann rutscht der .inhalt-text div ein wenig nach links
(vermutlich wird ein margin:left; ignoriert)

4. beim drop-down ist an der rechten seite ein dicker, weißer balken.

5. margin-bottom; vom banner (abstand zwischen ende banner und anfang hr ist zu groß) nicht richtig

6. der div .infoleiste wird zu groß angezeigt (höhe falsch / zu groß)


so das war es erstmal xD
ich glaube zwar nicht, dass alle probleme gelöst werden können, denn nicht jeder browser ist so fortgeschritten wie FF ^^, aber evtl. gibt es ein paar tolle "hacks" für IE7, so dass die probs eingedämmt werden.

seite (immernoch^^): Faszination Internet - Home

so dann bitte ich um ganz ganz tolle ideen/tipps xD

grüße hokage

 

[neuroleptika]

Ich kann mir das gerade nicht im IE7 ansehen.
<hr> würde ich nicht zum Screendesign für IE5-7 verwenden ( display: none; ).
Anderen Browser könnten visibility: hidden; height: 0; bekommen. Die Linie könntest du in einem <div> um .banner darstellen (border-bottom).
Ich würde die <hr> sogar aus dem html entfernen.

Färbe .infoleiste mal anders ein um zu sehen wo der Platz herkommt.
Vielleicht ist es nur ein margin von <hr>.

 

[hokage555]

das hr problem hat sich schon gelöst.
man muss für IE7 die farbe mit color: ... ; festlegen.
hat auch geklappt
habs so oder so schon eingefärbt und die abstände sind immer noch da
an einem margin kann es nit liegen
alle überprüft.
schaut es euch wenn möglich bitte selbst mal an...
itst halt etwas schwer zu erklären, wo was wie falsch ist xD ^^

danke schonmal für deine vorschläge xD

grüße hokage

 

[neuroleptika]

..an einem margin kann es nit liegen

Im IE schon.
Gebe <hr> mal display: none; und sehe es dir im IE6 / 7 an.
Soweit ich weiß kann man <hr> in den heutigen Internet Exploreren nicht alle Abstände entfernen.
Du wirst die Gesammthöhe von <hr> im IE nicht auf 2px bekommen.
Erst ab IE8 wird das möglich sein.
Haarlinien macht man am besten mit border oder background-image.
<hr>ist dafür aber (noch) nicht geeignet.

<hr > ist in anderen Browser offt gut geeignet um floats zu clearen. Im IE (win) braucht man das machmal nicht (Suchtipp: "haslayout float" und "margins collapse" ).

 

[hokage555]

ja xD

das glaube ich dir auch ;-)

aber, es liegt nicht an hr

ich habs schon gelöscht und mir ohne hr und ohne border im IE7 angeguckt und da sind die abstände auch da.
also hat es logischerweise nichts mit hr zu tun, stimmts?

kann es denn an irwas anderem liegen?
weil diese abstände sind das hässlichste am design. wären die behoben, wäre der großteil schon geschafft xD

grüße hokage

 

[neuroleptika]

Ich kann dir da ohne IE nicht helfen.

Zum debuggen allgemein
Färbe .infoleiste gesondert ein.
Entferne nacheinander die Inhalte aus .infoleiste

Zuerst das:

<div class="sprachenwahl">
...
</div>

Keine Besserung?
Dann entferne:

<div class="suche">
...
</div>

So kannst du dein Problem eingerenzen.

Mein einziger pc mit Vista ist in der Werkstadt.
Auf xp kann ich nur umständlich zugreifen.

 

[Efchen]

<hr> würde ich nicht zum Screendesign für IE5-7 verwenden

<hr> ist auch ein HTML-Tag zur logischen Trennung von Inhalten. Du weißt ja, HTML hat mit Design nichts zu tun ;-)
Deswegen besteht auch ein Unterschied zwischen einem <hr> und einem border in CSS. Das eine ist ein logischer Bruch, das andere ist Zierde.

Wobei es hier - soweit ich mich erinnere, ohne jetzt nochmal nachzusehen - Zierde ist und keine logische Trennung.

 

[hokage555]

Wobei es hier - soweit ich mich erinnere, ohne jetzt nochmal nachzusehen - Zierde ist und keine logische Trennung.

xD
warum???
ich möchte das banner von der infoleiste logisch trennen
wenn dabei das deign noch etwas besser wird, schlage ich doch 2 fliegen mit einer klappe ;-)
kann man also so oder so sehen
ne logische trennung ist es denke ich schon ^^

jo dann mache ich mich mal an die von dir vorgeschlagene technik zum fehler eingrenzen ;-)

ich glaube zwar das es nichts nutzt, aber ein versuch ist es wert xD

an alle anderen. für ideen oder irwelche IE hacks, die das prob lösen bin ich offen

so long de jute hokage ^^

 

[Efchen]

Deine Semantik ist aber auch noch verbesserungswürdig. Wenn Du Deinen Inhalt richtig auszeichnen würdest, würdest Du kein <hr> benötigen.

Denn als erstes solltest Du Dein Banner-<img> in ein <h1> packen, als Siteüberschrift. Damit ist diese Überschrift von der logischen Gruppe div.infoleiste abgetrennt, was das <hr> unnötig macht.

Dein div.sprachenwahl ist nur eine ungekennzeichnete Ansammlung von Images, daraus würde ich eine Liste machen.

Deine ganzen Menüs sind auch nur eine ungeordnete Ansammlung von Links. Zeichne das auch noch als Liste aus, denn das ist es, was ein Menü ist.

Außerdem fällt mir auf, dass Du keine IDs zu kennen scheinst. Für mich wäre es logischer, "banner", "infoleiste", "suche", "inhalt", "footer" und ähnliche als ID zu kennzeichnen, weil sie ja nur einmal vorkommen dürfen.

 

[hokage555]

ja bis vor kurzem kannte ich das tatsächlich noch nicht und deine einwände gegenüber der semantik mögen auch berechtigt sein.
aber mein problem löst das trotzdem nicht -_-'

sei unbesorgt... die seite ist ja noch nicht im entstadium^^. ich werde das alles noch verbessern und deine einwände beachten, aber im moment liegen meine prioritäten wo anders.

nämlich bei den komischen abständen im IE7

wenn du mir jetzt allerdings sagst, dass auf grund der semantikverbesserung, die abstände verschwinden, werde ich die natürlich sofort richtig stellen.

hast du abgesehen von der semantik, denn noch ideen, woher diese abstände herrühren könnten? hast du dir das ganze mal im IE7 angesehen?

danke für deine hilfe xD

grüße

 

[Efchen]

deine einwände gegenüber der semantik mögen auch berechtigt sein.
aber mein problem löst das trotzdem nicht
ich werde das alles noch verbessern

Weisst Dus, dass das Dein Problem nicht behebt?
Was ich daran nie verstehe ist, warum man alles immer erstmal schnell-schnell aber falsch runterhacken muss, um dann Probleme zu beseitigen, die man vielleicht gar nicht hätte, wenn man es gleich richtig macht, dann den Code nochmal richtig ändert und dann wieder andere Probleme bekommt.

Man fängt bei einer Website beim Inhalt und HTML an. Macht man es gleich richtig, würden sich viele Probleme gar nicht erst ergeben.

Und komisches Aussehen ist sehr oft einfach auch in einer komischen Struktur begründet.

wenn du mir jetzt allerdings sagst, dass auf grund der semantikverbesserung, die abstände verschwinden, werde ich die natürlich sofort richtig stellen.

Das weiß ich nicht, aber Du kennst Fehler in Deiem Code, warum verbesserst Du sie nicht als erstes? Für mich persönlich ist das ein nicht nachvollziehbares Vorgehen.

Nachtrag:
Also was den Strich im Banner angeht, der im IE fehlt, hab ich die Lösung: Du lässt den Browser das Bild skalieren (kleiner). Dadurch verschwindet der Strich im IE. Gib die Bilder in der Originalgröße aus oder skaliere sie in einem Grafikprogramm mit Smoothscale. Allerdings kann das selbst damit beim Verkleinern sein, dass 1px große Striche verschwinden, sollte verständlich sein.

Was die Formatierung des <hr> angeht, glaube ich im Kopf zu haben, dass der IE da nicht alle Eigenschaften zulässt, die andere Browser zulassen. Nicht, dass das verständlich wäre, aber es scheint einfach so zu sein.

 

[neuroleptika]

<hr> ist auch ein HTML-Tag zur logischen Trennung von Inhalten. Du weißt ja, HTML hat mit Design nichts zu tun ;-)..

Vielleicht war es nicht klar genug.
Ich schrieb, daß ich das <hr> entfernen würde.
Wenn man sie aber im html haben möchte könnte man sie auch mit css zu einer Haarlinie stylen oder zum clearen werwenden.
Wegen der Interpretation vom IE 5-7 würde ich den Border einem anderen Element zuweisen und <hr> display: none geben.

Nicht, dass das verständlich wäre, aber es scheint einfach so zu sein.

Es ist einfach so.

 

[hokage555]

So Herr Semantik xD

Sind Sie nun zufrieden^^???

Ich habe alle Ihre semantischen Verbesserungen/Korrekturen in die Tat umgesetzt xD

einziger nicht verstandener aspekt ist der sprachdiv den ich in eine liste umwandeln soll...

warum sollen die bilder eine liste sein???

so und jetzt noch ein neues, für mich total unlogisches problem im IE7
FF macht es richtig.

ich habe die dropdowns die vorher ei div waren, als liste mit li gesetzt. jetzt schau was im IE7 passiert^^
trotz display:none; zeigt IE7 3 der 4 drop downs halb an. diese sind allerdings komplett weiß^^
das komische: er zeigt nur 3 statt 4 falsch an und nicht alle 4 und er zeigt auch nur ein paar der unterbuttons an und nicht alle.

is schwer zu erklären, man sieht es aber direkt ...

haste da ne lösung für???

weil das geht mal gar net -_-'

grüße hokage

 

[Efchen]

warum sollen die bilder eine liste sein???

Was sollen sie denn sonst sein?

 

[hokage555]

ok das mit den button hab ich gelöst.
hab im css dem li einfach auch display:none; und bei hover display:block; gegeben.

Was sollen sie denn sonst sein?

halt bilder in einem div xD
bilder die ich über einen div positioniere^^

aber wenn du meist, dass es eine liste ist, wird es wohl stimmen xD
immerhin bist du der fachmann.

biste denn ansonsten mit der semantik zufrieden??? ;-)

abgesehen von deisem sprachwahldiv halt^^

grüße hokage

ps: also ein teil des abstands ist nach den semantischen korrekturen verschwunden xD.
aber unter dem banner und über der infoleiste ist immernoch ein kleiner teil.
der ist auch da, nachdem ich die komplette infoleiste ausm html rausgenommen habe.
ideen???

 

[Efchen]

halt bilder in einem div xD
bilder die ich über einen div positioniere^^

Das ist Quatsch. Und wenn ich die Bedeutung von "^^" richtig im Kopf habe, dann weißt Du das auch.

HTML definiert die Semantik. Mit Positionierung hat das nichts zu tun. Die Images brauchen eine Bedeutung. "bilder in einem div" ist keine Bedeutung. Und mit div wird gruppiert. Klar, hier werden zwei Images zu einer Gruppe zusammengefasst, aber ich finde eine Liste beschreibt es noch genauer, ist schließlich eine Aufzählung: Englisch, Deutsch.

 

[hokage555]

alles klar chef xD
du hast die bedeutung der "^^" richtig verstanden ;-)
bin grad nur zu faul, dass auf allen seiten wieder zu ändern xD

ich sollte mit include mal wieder arbeiten^^

danke dir für die hilfe.

is denn jetzt alles semantisch korrekt?
abgesehen von diesem punkt?

grüße hokage

 

[Efchen]

Wenn ich lang genug suche, werd ich schon noch was finden... :-)

Z.B. brauchts das div#suche eigentlich gar nicht. Es beinhaltet ja nur ein <form> und das ist auch ein Block-Element, genauso wie <div>.

Im div#inhalt-text hinter dem <h4> ist ein überflüssiges <br />.

Und aus div#footer wurde ich ein p#footer machen. Der Text ist ja gar nicht ausreichend beschrieben. Es ist mindestens ein Textabsatz.

Schönes Wochenende,
-Efchen

 

[hokage555]

danke dir xD

wusste ich doch, dass da noch was geht haha

hast du denn noch ne idee, woher der abstand da oben kommt?
könnte das auch noch an der falschen semantik liegen???

dir auch ein schönes wochenende xD

hokage

 

[hokage555]

so das abstandproblem ist komplett gelöst.
aber über die ursache schüttel ich nur den kopf -_-'

der abstand entstand, weil ich im src code zwischen <img ... /> und </h1> ein leerzeichen hatte^^
dieses hab ich gelöscht.
also <img .../></h1> und fertig

der IE ist manchmal schon lustig^^

ich habe in diesem zusammenhang etwas über eine strip funktion gehört.
siehe hier: Smarty

das klappt aber nit :-(

könnte mir das einer genauer erklären???

so bleibt noch ein einziges darstellungsproblem im IE7 ^^

leute ihr seit gur xD
das kriegen wir auch noch zusammen hin ^^
hoffe ich xD

also...
switche ich im IE7 auf meiner website immer von einer unterseite zur anderen, dann verschiebt dich mysteriöser weise der div text-inhalt.
schaut es euch am besten mal selbst an xD
sowas hab ich noch nicht erlebt^^

danke schonmal an alle die mir bisher geholfen haben xD
(efchen & neuroleptika)

grüße hokage