CSS - Webseite für IE anpassen

[cocodina]

Hallo liebe Forumgemeinde,
ich habe eine Webseite für eine Freundin gemacht, und bei mir in versch. Browsern getestet.
http://www.domblicke.de
Leider wird die Seite (z.B. portfolio) in den IE-Versionen < 9 bei den floats nicht richtig dargestellt, d.h. die "aside"-Divs stehen untereinander, und nicht nebeneinander.
Bei der Navigationsleiste habe ich das Problem, daß Sie browserabhängig umbrochen wird, ebenso sind die link:visited lila, soll aber nicht so sein.

Da ich mich mit den Conditional Comments noch nicht auskenne, bitte ich Euch, mal über den Code zu schauen, um mir zu sagen, wo ich was ändern muß.
Und bitte: seid gnädig und zerreißt mich nicht in der Luft! Möchte gerne was dazulernen, und wälze mich schon durch Bücher über CSS-Hacks und eigene Style-Sheets, aber brauche jetzt mal professionelle Forum-Hilfe...

P.S.: Reicht der Link oder soll ich den Code reinstellen?

[simonpicos]

Das sind keine "aside-divs" dondern aside-tags, welche mit HTML5 kommen.
Find ich super, dass du die nutzt. Jedoch hat der IE<9 keine Ahnung von denen. Damit du den ollen IEs die Tags (u.a. auch nav) beibringen solltest du dir das hier: http://www.codeproject.com/Articles/...-and-Web-Fonts mal durchlesen. Da wird das erklärt.

btw: Der einsatz des aside-tags macht hier aber semantisch keinen Sinn. Der ist eigentlich für Sidebars, etc. gedacht. Der article-tag wäre hier sinnvoller.

[MyBad]

Ich habe leider gerade nur wenig Zeit und mir deinen Quelltext jetzt nicht genau ansehen können. Aber hier schon mal eine Info:

Der Internet Explorer < 9 unterstützt das Aside-Tag nicht.

Edit: Zu langsam...

[cocodina]

OK, werde dann mal "article" nutzen.

Wäre schön, wenn Ihr mal in Ruhe durch die Seite schaut, und mir sagt, was noch falsch im Code ist... Was haltet Ihr von Stern-Hacks für die versch. Browser, oder sollte man für diesen Umfang besser ein eigenes Style-Sheet anlegen? Und: mache ich das Style-Sheet ganz am Schluß - basierend auf der "basis.css" (und dann anstelle von dieser() oder lege ich im IE-CSS nur die Abweichungen für IE fest...?

Edit: natürlich darf es auch konstruktive Kritik an der Gestaltung sein.

„Ich möchte mich lernend verändern. Ich möchte gerne etwas weniger blöd sterben als ich geboren bin.“ André Heller

[MyBad]

Hier: http://w3schools.com/html5/
Ist sicher ganz hilfreich für dich.

Ebenfalls einen Blick wert: http://validator.w3.org/check?uri=ht...Inline&group=0

Wenn du ein valides Markup hast erübrigen sich viele Browser-Hacks für den IE von ganz alleine!

Edit: Du solltest auch das target="_new" aus deinen Footer-Links nehmen.
Edit 2: möchtest du auch Kritik zur Gestaltung?

[cocodina]

Ok, also, habe das Script aus "How-to-Get-IE8-to-Support-HTML5-Tags..." eingebaut.

Hier finde die Lösung einfach nicht:
1. Es gibt außer bei FF noch lila "visited-Links", die sollen raus - finds in den CSS-Dateien nicht.

Navileiste im Firefox = ok
Navileiste in IE9 = falsch

Der Fussbereich ist ähnlich falsch + wird im IE 7 falsch umbrochen (wahrscheinlich wg. dem h5-tag, oder)
Fusszeilen im Firefox = ok
Fusszeilen im IE9 = falsche linkfarbe
Fusszeilen im IE7 = katastrophe!

Diese Fußgestaltung habe ich in einem PSD-Tutorial gefunden, und wg. der tabellenlosen Formatierung übernommen

<address>
  <h5>Telefon</h5> 12 34 / 56 78 90<br>
  <h5>E-Mail</h5>
<a href="mailto:post@anmich.de">mail@anmich.de</a><br>
<h5>Web</h5> <a href="http://www.anmich.de">www.anmich.de</a><br>
</address>

Ist das dann nur für HTML-5-fähige Browser machbar?

Et is einfach ne driss

[simonpicos]

Zitat von cocodina

1. Es gibt außer bei FF noch lila "visited-Links", die sollen raus - finds in den CSS-Dateien nicht.

einfach die entsprechenden Links in deiner CSS suchen (bzw eine Regel dafür erstellen) und dann per :visited die Farbe ändern.

Zitat von cocodina

<address>
  <h5>Telefon</h5> 12 34 / 56 78 90<br>
  <h5>E-Mail</h5>
<a href="mailto:post@anmich.de">mail@anmich.de</a><br>
<h5>Web</h5> <a href="http://www.anmich.de">www.anmich.de</a><br>
</address>

Jap, der adress-tag ist ebenfalls HTML5. Den kannst du aber auch dem lieben Internetexplorer bekannt machen in dem du bei deinem Script aus meinem Link noch folgende Zeile ergänzt:

document.createElement('adress');

und

header, nav, section, article, aside, footer, adress {
   display:block;
}

[Samuelll]

Kleine Anmerkung zum Footer:

Die H5 ist dort semantisch gesehen Blödsinn. Schließlich ist es keine Überschrift.
In Word würdest Du Deiner Adresse am Seitenfuß ebenfalls keine Überschrift zuweisen.
Und letztendlich geht es im Web um nichts anderes als in Word: Das Dokument vernünftig strukturiert darstellen.

[beczka]

Ein Script, welches mir bis jetzt immer bei der Verwendung von html5 im Internet Explorer < Version 9 geholfen hat, ist dieses hier: http://code.google.com/p/html5shiv/ , allerdings solltest du auch noch in deiner .css Datei "display: block;" auf die neuen html5 Elemente anwenden.

MfG

[cocodina]

danke schonmal für die tipps,
melde mich, wenn ich alles geändert habe...
die "h5" formatierungen nehme ich ebenfalls raus,

[cocodina]

Ok, ich habe die Seite aktualisiert, und den Code vereinfacht...
hier seht ihr die das ergebnis
aber die darstellung ist in einigen browsern noch anders - die lila links erscheinen z.B. nur im IE (visited links) die sind in der CSS gar nicht drin!!!

Auf Feedback und Kritik bin ich "gefasst" gespannt

[mindraper]

hi.

ich hab' mir die seite gerade im ie7 standart modus angezeigt und keine probleme mit :visited gefunden. auch ansonsten sah das alles soweit ganz ok aus. allerdings wirft die console folgendes aus:

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.

ABER:
---------

1)
scheinbar ist noch niemandem aufgefallen, dass dein doctype eigentlich falsch ist, da er konzipiert ist für xhtml 1.0 transitional, nicht für html5. du solltest entweder die korrekte html5-schreibweise nutzen oder xml (was für html5 das pendant ist zu xhtml) wenn du html5-elemente nutzen willst.

2)
attribute wie align="center" sind in html5 deprecated. in html4 auch. in xhtml erst recht.

3)
der sinn von diesem konstrukt ist mir völlig unverständlich (abgesehen davon, dass ich ein <br> definitiv nicht zum clearen nutzen würde da inline-element. nimm besser ein div o. ä. oder setz' die clear-klasse auf das <p>-tag.):

<p><br class="clear" /></p>

egal für was du dich entscheidest, momentan ist das semantischer blödsinn im quadrat.

4)
sehr nervig finde ich, dass du auf beinahe jede verlinkung ein target="_blank" gesetzt hast. wäre ich ein normaler user, würde ich die seite nicht lange anschauen, weil ich nämlich keinen bock darauf hätte, dass sich (fast) jede seite in einem neuen fenster bzw. (je nach usereinstellung) tab öffnet und ich am ende alle wieder schließen müsste, sofern ich nicht mit zig fenstern/tabs surfen will.

5)
nur weil es native html5 elemente sind, würde ich persönlich sie nicht einsetzen, wenn explizit der ie7 mit unterstützt werden soll. was haben nur alle gegen die good ol' divs? der sinn von elementen wie <nav> oder <footer> wird doch ad absurdum geführt, wenn ich für den einsatz doch wieder ein <div>-tag darum setzen muss, damit die browser es verstehen. dann kann ich auch gleich darauf verzichten (ok, ausnahme wären hier screenreader. der wird aber mit deiner page so oder so nicht viel anfangen können, da die enthaltenen informationen hauptsächlich aus bildern bestehen. und es gibt keine spezifikation* beim w3c, dass screenreader das <nav>-tag identifizieren und als mehr oder weniger irrelevanten inhalt nur auf nachfrage zur verfügung stellen müssen – dass sie sich so verhalten ist ein vorschlag).

*: genau genommen gibt es für html5-elemente noch gar keine richtige spezifikation. die ist nämlich noch "working draft". demnach ist die aktuellste offizielle version von html: v4!

6)
der sinn des "preloads" der bilder innerhalb des sliders entzieht sich mir vollständig. das ist keine technik um bilder vorzuladen, sondern einfach verdoppelter content. sowas mag der google-bot eigentlich nicht sonderlich gerne.
um bilder vorzuladen könntest du einen javascript-code einsetzen, der vor dem DOMContentLoaded (und damit auch vor einem window.onload, $(document).ready() oder document.onreadystatechange) ausgeführt wird. dazu kannst du (in kurzform, hier bei psd-tutorials gibt's dazu auch ein tut) z. b. solchen code nutzen:

JAVASCRIPT

PHP-Code:

// images vorladen mit dieser function
function createImagesList (images_names_as_string_separated_by_pipe) {
    var imgs_array = document.createDocumentFragment(), // interner temporärer zwischenspeicher
        imgs_names = images_names_as_string_separated_by_pipe.split('|'), // namen als array
        current_image = null, // enthält beim erzeugen das aktuelle bild
        current_li = null, // enhält beim erzeugen das jeweilige <li>-tag
        i = 0, len = imgs_names.length; // schleifenvariablen

    while (i < len) {
        // <li>-tag erzeugen
        current_li = document.createElement('li');
        // bilder via schleife erzeugen
        current_image = document.createElement('img');

        // src-attribut zuweisen
        current_image.src = ['images/auge/', imgs_names[i], '.jpg'].join('');
        current_image.alt = '';

        // bild in <li> integrieren
        current_li.appendChild(current_image);

        // in temporären zwischenspeicher schieben
        imgs_array.push(current_li);

        // schleifenvariable erhöhen
        i = i+1;
    }

    // zwischenspeicher zurückgeben
    return imgs_array;
};

// images einfügen mit dieser function
function insertImagesList (target_node, images_fragment) {
    // alle bilder einfügen
    target_node.appendChild(images_fragment);

    // fadeSlideShow registrieren
    $(target_node).fadeSlideShow();
};

// vorladen
var all_images = createImagesList('auge+dom|auge+dom-1|auge+dom-2|auge+dom-orange|auge+dom-ende');

$(document).ready(function () {
    // vorgeladene bilder einfügen
    insertImagesList(document.getElementById('slideshow'), all_images);

    // weiterer code...
}); 


der code ist so geschrieben, dass du ihn eigentlich schon direkt so einsetzen kannst. denk aber daran, dass du sowohl das "preload"-div nicht benötigst, als auch die "slideshow"-ul leer sein muss.

---------

ok, im großen und ganzen: kann man so machen. punkt 5) ist subjektiv, daher fällt er einfach relativ wenig ins gewicht. punkt 6) ist ein opt-in. die restlichen punkte würde ich ändern bzw. überdenken.

gruß

EDIT: hatte vergessen die slideshow nach dem einfügen der bilder in das dom zu registrieren. hab es nachgezogen.

[cocodina]

@mindraper
Vielen, vielen Dank für deine ausführliche Analyse...

Die Funktion Preload habe ich mir zusammen mit der Slideshow aus einer Anleitung zum jquery-Script geholt... damit das ganz vor dem Aufbau der Seite geladen wird...

Ich werde deine Kommentare durcharbeiten und ggf umsetzen...

Erst mal vielen Dank für deine Mühe

[Matte]

Hallo

Deine Seite liegt schon weit über dem was ich könnte. Allerdings würd ich gerne auch was kritisieren :o) (nur optisch)

Deine verschiedenen Seiten "springen" wenn man sie mal einzeln durchgeht.
Am stärksten fällt das auf, wenn man auf "Bilder" geht, da dort die Überschrift komplett fehlt.

Ansonsten: Mach wigge su, et hät' noch immer joot jejange ;o)

Gruß

Matte

[cocodina]

@mindraper:
Deine Ausführungen habe ich teilweise (wg. fachchinesisch z.B. "deprecated" - kann man das nicht auch deutsch ausdrücken?) nicht so ganz nachvollziehen können > habe aber schon einiges umgesetzt.
@matte: danke für das Lob, die Sache mit der fehlenden Überschrift hatte ich schon absichtlich gemacht, meinst du, es wäre besser, wenn das überall gleich ist?
Schön, daß du dich damit beschäftigt hast.
Das Einbinden von Slide-Shows mit Jquery und Javascript finde ich spannend, und ich bin froh, daß ich es schon ein paar mal hinbekommen habe... zuletzt habe ich einer befreundeten Grafik-Designerin damit geholfen, die zwar HTML/CSS Kenntnisse hat, aber null Ahnung von Scripts etc. - selbst mit meinem Halbwissen konnte ich da punkten... Aber die ganze Materie ist doch sehr komplex und deshalb weiß ich, daß bestimmt noch nicht alles TOP ist - v.a. im Quellcode habe ich noch einige Schwächen... Da es aber oft nur Freundschaftsdienste zum Sonderpreis sind, kann ich mich nicht 20 Std. mit Fine-Tuning aufhalten, sondern habe es halt so hochgeladen, um mich weiter anderen Dingen zu widmen... Ich werde mir aber bei der nächsten Gelegenheit noch ein Tut zum Thema HTML5/CSS3 runterladen - leider funktioniert die Suchfunktion in den Tuts momentan nicht!!! Ich lande immer bei PS-Tuts...
Ne schöne Jruss ins Forum