| von c3o |
Ach so, sorry, hab das mit divs statt Bildern getestet.. dann fehlt also noch eine Regel:
div.bild img {
display:block;
}
jetzt aber  |
| von axeljaeger |
| also c30, das funktioniert am im IE nicht, woher soll der auch wissen, das der Untertitel unter das Bild kommt? |
| von c3o |
axel: Aber wozu denn eine Tabelle?
div.bild {
float:left;
margin-left:10px;
margin-top:30px;
}
...
<div class="bild"><img src="".. />Untertitel1</div>
<div class="bild"><img src="".. />Titel2</div>
<div class="bild"><img src="".. />Das ist Titel3</div>
<div class="bild"><img src="".. />Und nr. 4</div> |
| von languitar |
hier, ist mir gerade beim Scrollen einer noch nicht fertig geladenen Seite passiert:
 |
| von axeljaeger |
| Also muss ich doch eine blinde Tabelle verwenden, um die drei divs übereinander anzuordnen? |
| von axeljaeger |
UPDATE: So, jetzt steht schonmal das Grundgerüst, die Navigation funktioniert, aber die Broser zicken wieder rum, besonders bös hat es die Seite png.html zerhackt, nachdem ich von Tabelle auf CSS umgestellt habe. Ich möcht einfach die Screenshots nebeneinander anzeigen, soweit sie in den Container von 640px Breite passen. Wenn nicht, soll einfach eine neue Zeile angefangen werden. Die Texte, die alle in <p>-Tags eingeschlossen sind, sollen nie neben Bildern stehen, sondern immer schön in einer neuen Zeile unten drunter. Ich hab den Bildern per CSS die Eigenschaft "float: left; clear: left;" zugewiesen, in der Hoffnung, das alles folgende, was ja nur die Bildunterschriften sein können, in einer neuen Zeile angezeigt wird. Das funktioniert in Opera und Konqueror in zwei drittel der Fälle, einmal, und da ist es besonders verhehrend, bei der Schattenparade nicht. Der Mozilla kann mit allem nichts anfangen und zeigt immer die folgenden Elemente in der gleichen Zeile an.
PS: Diesmal gibt es keine Zip-Datei, aber ich glaub, die hat eh kaum einer runtergeladen. Die Final gibt es aber 100% zum download.
@ladylinda
Danke, ich hab mich für ersteres entschieden, ist schon mit drinn. |
| von ladylinda |
Hallo!
zu 1. Frage: Such dir was zwischen http://bluerobot.com/web/css/center1.html
und http://bluerobot.com/web/css/center2.html
aus (ich benutze auf meiner Page letzteres)
Schöne Grüße,
Linda |
| von axeljaeger |
So, in 7 Minuten gibt es mal wieder ein Update des Artikels. Zwei Fragen: Meine weiße Hauptbox (<div class="content">) bekomme ich immer noch nicht zentriert. Nur der Internet Explorer kann mit <body style="text-align: center"> etwas anfangen. Noch nen div außenrum geht auch nicht. Dann werden zwar Sachen außerhalb meiner Contentbox zentriert, nicht aber die Box selber. Das ist dumm, weil eigentlich alles in die Box soll. In meiner Prototypnavigationsleiste hab ich schon vor lauter Verzweiflung wieder eine Tabelle genommen, beim Hauptlayout möchte ich das vermeiden. Die zweite Frage: Weis noch jmd., wie das mit den transparenten PNGs im IE geht? Also diese Hack, mit dem es dann aber in den anderen Browser nicht mehr geht.
PS: Die Navigationsleisten sind bisher nur Dekoration, sie funktionieren noch nicht. |
| von Philipp Gérard |
| mal unabhängig von dem artikel: schöne seite! |
| von ladylinda |
Hallo,
habe mich auch schon über den IE in einem kleinen Artikel aufgeregt
Der K(r)ampf mit den Browsern
die Links dort sind vielleicht auch ganz interessant für dich
Schöne Grüße,
Linda |
| von axeljaeger |
@languitar
Das ist schön, aber ich glaube unvollständig  |
| von languitar |
| Guck mal hier, wenn noch nicht geschehen |
| von axeljaeger |
So, die zweite Version ist nun sowohl als Download, als auch zum Online Lesen unter der alten Adresse verfügbar. Auf der Startseite (index.html) hab ich den Prototyp einer Navigation eingebaut. Eine Frage an die HTML-Spezialisten: Hab ich eine Chance, die zweite runde Ecke von der Leiste ans Ende der Leiste zu bekommen, ohne eine blinde Tabelle zu verwenden?
EIne Frage an alle anderen: Gibt es hier jmd. mit einem Macintosh, der ein paar Screenshots vom IE@mac und von Safari machen kann?
@HG
Ja, das mit den Rahmen ist mir auch schon aufgefallen, ich hab da immer einen Rahmen mit der Hintergrundfarbe verwendet, aber das scheidet bei Hintergrundbildern ja aus |
| von c3o |
Noch was:
<img style="border:1px solid black;padding:10px;" src="..">
Der IE schafft es nicht, Padding um ein Bild herum zu machen. |
| von HG |
Der ie macht insgesamt das Leben eines CSS-Freaks einfach schwer. Let's see:
border:
- "border: 1px dotted #000;" wird als "border:1px dashed #000;" dargestellt. Daher ist es im ie nicht ohne weiteres möglich, gepunktete Linien darzustellen.
- "border: 1px solid transparent;" wird nicht unterstützt. Damit wäre es möglich, einen Rahmen ins Layout zu zaubern, und diesen Rahmen bei :hover (o.ä.) mit einer Farbe zu versehen.
Layout-Modell allgemein:
- Die wirkliche Breite eines Bereichs (z.B. div) wird normalerweise mit border, padding und width bestimmt. Der ie macht hier einige Fehler, so daß man verschiedene CSS-Hacks anwenden muss, um das gewünschte, pixelgenaue Ergebnis zu bekommen. Erschwerend kommt dabei hinzu, daß der ie 6 bei bestimmten DocType-Deklarationen jedoch die richtige Methode zur Bestimmung der "echten" Breite verwendet.
- Der ie hat Schwierigkeiten mit den einzelnen Angaben von position und float.
CSS-Synthax, etc.:
- Verschiedene CSS-Selektoren werden nicht unterstützt.
- :target wird nicht unterstützt. damit könnte man eine Art Tab-Navigation in eine Webseite integrieren.
seas
HG |
| von axeljaeger |
Vielen Dank an c3o. Ich hab die allererste FrüVorabversion mal auf den Server geladen. Anregungen, Kritik und sonstiges ist willkommen.
http://www.8ung.at/axj/ie.zip
Edit:
Ihr müsst jetzt nicht mehr das Zipfile runterladen, es gibt auch ne Onlineversion: http://www.8ung.at/axj/ie/ |
| von c3o |
CSS:
* position:fixed;
Könnte Frames ersetzen (und mehr)
Es gibt als Alternative elaborate CSS-Hacks mit overflow:scroll und div. JavaScripts, aber nichts einfaches wirksames.
* :hover auf Tags ausser <a>
Würde Dropdown-Menüs ohne JavaScript ermöglichen
Alternative: JS
* max- und min-width/height
Alternative: evtl JS
* Attribut-Selektoren
zB input[type=submit] für Buttons oder a[href~="http://"] für externe Links
Alternative: manuelle Vergabe von Klassen
* before: und after:, content:
Keine Alternative, Inhalt muss fix ins HTML-Dokument
* rel="alternate stylsheet"
Alternative: JS-Stylesheet-Wechsler
* +-Notation für aufeinander folgende Tags
zB body+p
Alternative: manuelle Vergabe von Klassen
DOM (keine Alternativen):
* getComputedStyle()
* cssRules[].. und eine Handvoll mehr DOM2
ETC:
* <abbr>
* application/xhtml+xml
Der korrekte Mimetype für XHTML-Dokumente hindert den IE gänzlich daran die Seite anzuzeigen
Abhilfe nur durch serverseitige Browsererkennung
* <?xml-Deklaration
führt zu Missachtung des Doctype und damit Quirks-Mode
* PNGs mit Alphatransparenz
Ein Hack als Abhilfe existiert
Dazu kommen duzende fehlende Features, das nervtötende weiße Aufblitzen bei jedem Seitenwechsel und die Tatsache, dass es frühestens 2005 -- und dann wohl auch nur mit Longhorn -- eine neue Version geben wird. |
| von michaelh |
| http://www.google.de/search?hl=de&ie=UTF-8&oe=UTF-8&q=mozilla+vergleich+ie&btnG=Google+Suche&meta= |
| von axeljaeger |
Ich möchte gerne einen sachlichen Artikel verfassen, warum der Internet Explorer nicht das gelbe vom Ei ist, so wie er immer dargestellt wird. Ausschlaggebend für mich war jetzt, das ich ein tolles Layout gemacht hatte und dann feststellen musste, dass das mit position: fixed; nicht geklappt hat, ich das aber zu spät gemerkt habe, weil ich unter Linux nur mit Opera, Mozilla und Konqueror testen konnte.
Vielleicht könnt ihr mir helfen, eigene Erfahrungen zu posten, was der IE nicht so kann, wie er sollte. Es soll keinesfalls ein AufDenIEDraufhauArtikel werden, sondern auch Tipps beinhalten, wie man gewisse Schwächen ausbügeln kann, natürlich mit dem Hinweis, das es so geht, aber anders gehen sollte. |
|
