Anpassung an den IE.

[Oli K.]

Hallo zusammen.

Nachdem ich meine ersten gehversuche mit CSS damit verbringe meine KCCHiefs Fanpage komplett in CSS umzubauen (vorher Frontpage*schäm*) und auch alles soweit fröhlich geklappt hat (Firefox 1.07) ist mir leider beim betrachten im IE6 die Kinnlade runtergefallen.

Folgendes Hauptproblem tritt auf:

Die News Boxen welche meistens eine Überschrift ein Foto und den Text beinhalten sollen bei einem grösseren Foto immer noch den kompletten Inhalt umranden.
Um das zu gewährleisten hab ich ans Ende der Box noch eine Fusszeile mit dem Datum eingegeben damit sie auf jeden Fall am Ende unter allen Inhalten steht. (clear: both) Wie im kapitel zum Layout mit CSS beschrieben.
Leider ist anscheinend im IE wenn der Text nicht ausreicht das Bild zu umfliessen kein Text mehr zu sehen und die Box und stösst direkt vor die links gefloatete Navigations Box.

Ich hab schon versucht clear left oder right anzuwenden und dem Bild feste breiten und höhen zu verpassen.

Zu sehen ist das ganze auf.
http://kansascitychiefs.awardspace.com
die komplette CSS Datei könnt ihr unter
 http://kansascitychiefs.awardspace.com/olistyle.css
sehen.

Hier noch der relevante Quellcode:
aus der html Datei:

<div id="Seite">
.
<ul id="Navigation">
</ul>
.
.
.
<div id="News">
 <h2>Larry ist der beste.</h2>
 <img src="image/johnson_larry_lead.jpg" alt="Larry ist der beste"/>
 <p>Wie man hier gut sehen kann ist das Bild von Larry
  und dieser Text in einer p-Zeile. Momentan bin ich mir da noch nicht ganz sicher wie sich das ganze zueinander verhalten wird.
  Ich hoffe mal das der Text neben den Bild steht und dann später darunter weitergeht. Dann nämlich könnte ich diese Methode ohne Probleme
 auf meine Chiefs Seite ummünzen.</p>
 <p id="datum">21.03.05</p>
</div>
.
.
.
</div>

aus der CSS Datei:

div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 758px;

border-left: 1px solid black;
    border-right: 1px solid black;
    background-color: white
  }

div#News {
 margin: 10px 0.5em 10px 11em;
 font-size: 0.9em;
 padding: 4px;
 border: 2px outset black;
 color: #000000;
 background-color: #ffd990;
 }

div#News img{float: right; border: 1px solid gray; margin: 0.3em}

div#News p{margin: 1px;}

p#datum {clear:right; font-size:0.5em; margin: 10px 0.5em 10px 11em; text-align: left}

p#Fusszeile {
    clear: both;
    color: #FFFFFF;
    font-size: 0.7em;
    margin-top: 2; padding: 0.1em;
    text-align: center;
    background-color: #ff0000;
    border-top: 1px solid black;
  }

P.S. kleinere Probleme um die ich mich bisher noch nicht gekümmert habe sind der Abstand des Containers Seite zur oberen *.gif und der viel grössere Font im Menü. Eventuell habt ihr da ja auch Tips zu.
Ich hoffe es ist ein nicht ganz so dummer Fehler (einfaches Workaround). Ich hab schon überall hier im Forum und unter google geguckt aber ich bin echt nicht weitergekommen.

Vielen Dank für eure Hilfe.

[Griever]

Ich bin zwar auch noch ein Rookie, aber einen kleinen Tip habe ich.

Aus eigener erfahrung weiß ich, dass man einige Angaben in CSS bei verschiedenen Browser (IE und FF) abfangen kann.

Z. B.:

cursor:hand;
c/ursor:crosshair;

hierbei würde bei IE die Zweitangabe übersprungen, da er diese nicht kennt. Er ließt das / natürlich mit ein.

Firefox übernimmt das / als Hexwert. Doch da bei Hexwerten ein u nicht vorkommt, wird die Definition als cursor:... angesehen und überschreibt den vorherigen Wert.

So hat der Ie eine Hand und der Firefox ein Kreuz als cursor.

Ich habe es bis jetzt nur mit diesen beiden gemacht. Aber ich glaube, dass das auch mit anderen Funktioniert.

Bei folgenden Zeichen solltest du das / nicht davor setzen:

a b c d e f

da diese Werte Hexdezimal -möglich sind. FF würde aus a eine 10 und aus f eine 15 machen. Dann würde aus /cursor z. B. 12ursor. Da ist klar, dass das nicht geht.

Ich weiß nicht, ob es über SelfHTML korrekt wäre, es so aufzubauen. Aber als Tip ließe sich daraus was machen.

z. B.
clear: both;
c/lear: ...;
usw.

Ich hoffe, ich habe dir etwas geholfen.

PS: Bei mir ist der Textumfluss immer korrekt.

MFG
Griever

[Oli K.]

Erstmal Danke Griever für den Tip.

Das hilft mir zwar leider vorerst nicht weiter aber das wusste ich auch noch nicht. Das Problem ist ja das clear vom IE gelesen werden soll da ansonsten das Bild nicht mehr ganz von der box umrandet wird und unten rausragt.

Oder gibt es generell eine bessere Lösung solch eine Box zu programmieren?

Also kurz gesagt: Der Rahmen soll immer komplett das Bild und den Text umranden. Das geht im IE anscheinend nur wenn der Text länger ist als das Bild höhe hat.

Wie kann ich das umgehen?

[Ingo Turski]

Hi,

cursor:hand;
c/ursor:crosshair;

hierbei würde bei IE die Zweitangabe übersprungen, da er diese nicht kennt. Er ließt das / natürlich mit ein.

Ich habe nicht entdecken können, daß das Problem den IE5.x betrifft.

freundliche Grüße
Ingo

[Oli K.]

Ich habe nicht entdecken können, daß das Problem den IE5.x betrifft.

freundliche Grüße
Ingo

Hallo Ingo.

Eventuell ist deine Schrift so gross eingestellt das sie automatisch grösser als die Bilder sind. Wenn ich mit <STRG> + Mausrad die Schriftgrösse ändere she ich auch alles richtig sobald die Schrift gross genug ist das Bild zu überdecken. Scroll ich sie aber kleiner verschwindet der Text irgendwann von Geisterhand und die Box dehnt sich bis zum Rand aus.

[Ingo Turski]

Hi,

mit:

Ich habe nicht entdecken können, daß das Problem den IE5.x betrifft.

bezog ich mich auf den von Griever genannten Hack, der nur ältere IE-Versionen betrifft - und für Dein Problem irrelevant ist.

Dein Problem könnte sich (zumindest im IE6) durch einen standardkonformen Doctype lösen. Und/oder durch die korrekte Verwendung von IDs.

freundliche Grüße
Ingo

[Oliver Kremer]

Dein Problem könnte sich (zumindest im IE6) durch einen standardkonformen Doctype lösen. Und/oder durch die korrekte Verwendung von IDs.

freundliche Grüße
Ingo

Achso. Sorry. Das wusste ich nicht. Hast du den konkrete Fehler bei der Verwendung von IDs in meinem Skript gefunden? Der doctype müsste doch eigentlich richtig sein oder vertue ich mich da jetzt?

[Ingo Turski]

Hi,

Hast du den konkrete Fehler bei der Verwendung von IDs in meinem Skript gefunden?

Welches Script?
Was ist denn Deiner Meinung nach die Bedeutung einer ID? Wenn Dir das nicht klar ist: http://de.selfhtml.org/css/formate/zentrale.htm#individualformate.

Der doctype müsste doch eigentlich richtig sein oder vertue ich mich da jetzt?

Ich meinte: http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform.

freundliche Grüße
Ingo

[Oli K.]

Hallo Ingo

Also im ersten Posting habe ich Auszüge aus meiner Html und CSS Datei gebracht die mit für den Fehler verantwortlich sein könnten. Desweiteren habe ich Links zu der kompletten html-Datei und der CSS Datei gepostet.
Ich weiss sehr wohl bewusst was ID's sind und habe auch einen Doc Type deklariert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Wenn du dir den Quelltext der Datei mal angeguckt hättest wüsstest du das ja auch. Ich bin mir allerdings nicht ganz sicher ob es der richtige Doc Type ist da ich wie gesagt ein Anfänger in Sachen CSS bin. Mit der strikt Variante funktioniert es allerdings auch nicht.

Trotzdem danke für deine Links. Allerdings waren sie mir schon bekannt.

Hier nochmal der link zur html Datei:
kansascitychiefs.awardspace.com

Die CSS Datei befindet sich im selben Ordner und heisst olistyle.css

[Gunnar Bittersmann]

Hello out there!

Ich weiss sehr wohl bewusst was ID's sind

Warum machst du dann von deinem Wissen keinen Gebrauch? Können zwei Deutsche dieselbe Personalausweisnummer haben?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Schalten IEs nicht nur bei _vollständiger_ Doctype-Angabe in den standards compliant mode?

Wenn du dir den Quelltext der Datei mal angeguckt hättest wüsstest du das ja auch. […]
Hier nochmal der link zur html Datei:
kansascitychiefs.awardspace.com

Das ist kein Link. Das ist nichtmal ein URI. Das ist ein Link: http://kansascitychiefs.awardspace.com/

Wenn du dir die http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden@titl=Forum-Hilfe mal angeguckt hättest, wüsstest du das ja auch.

Die CSS Datei befindet sich im selben Ordner und heisst olistyle.css

Dann verlinke sie doch einfach auch: http://kansascitychiefs.awardspace.com/olistyle.css

See ya up the road,
Gunnar

[Oli K.]

Danke Gunnar.

Endlich mal ein brauchbarer Hinweis. Ich hab direkt mal die id's in Klassen geändert. Dazu hab ich der News class nochmal eine width gegeben und schwupp schon geht es. War wohl die Kombination aus beiden die es am Ende gebracht hat.

Auch wenn sich mir danach die generelle Frage auftut welchen Sinn ID's überhaupt haben wenn man sie nur einmal verwenden kann. Da könnte man ja gleich immer klassen nehmen oder nicht. Naja Mozilla denkt da anscheinend genauso wie ich. ;-)

Auch wenn mir deine zynische Antwort ein wenig missfiel so danke ich dir trotzdem für den entscheidenden Hinweis, der mir nach einen ganzen Tag Kopfzerbrechen nun endlich einen ruhigen Abend besorgt hat.

@ Ingo
falls mein letztes Posting an dich forsch rüberkam so das Gunnar zurückschlagen musste so möchte ich mich dafür entschuldigen. Es war auf keinen Fall so gemeint. Meine Nerven waren halt ziemlich strapaziert wollte das keineswegs auf andere umleiten - Sorry.

[Gunnar Bittersmann]

Hello out there!

Auch wenn sich mir danach die generelle Frage auftut welchen Sinn ID's überhaupt haben wenn man sie nur einmal verwenden kann. Da könnte man ja gleich immer klassen nehmen oder nicht.

Wenn es mehrere Elemente mit gleichen Eigenschaften gibt, bietet sich eine Klassifizierung an; bei einzigartigen Elementen Identifizierung. Ein Element kann auch durchaus einer (oder mehrerer) Klassen zugeordnet werden und eine ID bekommen.

Auch wenn mir deine zynische Antwort ein wenig missfiel […]

Du solltest mich mal in Hochform erleben ... >;->

@ Ingo
falls mein letztes Posting an dich forsch rüberkam

Ach ja, an einer Stelle hatte ich dich kopiert. ;-)

See ya up the road,
Gunnar

[Oli K.]

OK habs kapiert mit den IDs. Die mehrfache verwendung als Anker und für Javascript ist ein schlagendes Argument.

@ Ingo
falls mein letztes Posting an dich forsch rüberkam

Ach ja, an einer Stelle hatte ich dich kopiert. ;-)

See ya up the road,
Gunnar

@ Gunnar
Nur das es in meinem Posting absolut nicht böse gemeint war, die genaue Kopie meiner Worte hingegen dann allerdings schon eindeutiger in die Richtung tendiert. ;-)

Aber ich geb es zu wenn man das Posting nochmal liest kann man es durchaus missverstehen. Hab mich ja auch schon entschuldigt. :-)

[Ingo Turski]

Hi,

Auch wenn sich mir danach die generelle Frage auftut welchen Sinn ID's überhaupt haben wenn man sie nur einmal verwenden kann. Da könnte man ja gleich immer klassen nehmen oder nicht.

IDs sind nunmal eindeutig identifizierbar, nicht nur für CSS, sondern auch z.B. für Javascript oder können als Anker von HTML verwendet werden. Außerdem bietet es sich z.B. an, ggfls. dem body eine ID zu geben oder #navigation, #footer...

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

Außerdem bietet es sich z.B. an, ggfls. dem body eine ID zu geben

Huch? Da es davon nur einen geben kann, ist der doch auch ohne ID schon identifizierbar. Wofür soll eine ID für body erforderlich sein?

See ya up the road,
Gunnar

[Detlef G.]

Hallo Gunnar

Huch? Da es davon nur einen geben kann, ist der doch auch ohne ID schon identifizierbar. Wofür soll eine ID für body erforderlich sein?

Zum Beispiel, um bestimmten Elementen genau dieses Dokuments andere
Eigenschaften zuweisen zu können, ohne ein separates CSS oder extra Klassen
verwenden zu müssen.

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

Hello out there!

Wofür soll eine ID für body erforderlich sein?

Zum Beispiel, um bestimmten Elementen genau dieses Dokuments andere
Eigenschaften zuweisen zu können, ohne ein separates CSS oder extra Klassen
verwenden zu müssen.

Dafür gibt’s doch

@-moz-document url-prefix(http://example.net/foo) {  
  /* nur für dieses Dokument */  
}

;-)

Duck und weg,
Gunnar

[Ingo Turski]

Hi,

Dafür gibt’s doch

@-moz-document url-prefix(http://example.net/foo) {

/* nur für dieses Dokument */
}

>   
> ;-)  
>   
> Duck und weg,  
  
hehe... aber leider noch nicht in meiner Version. Und lokal oder bei Domainwechsel würde das dann auch nicht funktionieren.. ;-)  
  
Es gibt aber noch weitere Anwendungen:  
- als Anker für #top  
- als Initiator für eine Javascriptfunktion, die auf bestimmten Seiten individuelle Dinge erledigen soll  
- um dem Body selbst bestimmte Eigenschaften zuzuweisen, z.B. eine individuell unterschiedliche Schrift(-größe), die sich dann ggfls. auch vererbt.  
  
freundliche Grüße  
Ingo

-- 
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)