zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Universal Internet Explorer 6 CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.07.2009, 01:30
Benutzerbild von msinn
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2009
Ort: Offenburg
Beiträge: 14
msinn befindet sich auf einem aufstrebenden Ast
Standard Universal Internet Explorer 6 CSS

Hallo zusammen,

ich habe einen interessanten Artikel gefunden, worin dessen Verfasser der Meinung ist, dass man wohl den ganzen Schnickschnack für die neuen Browser programmieren dürfte, allerdings für ie6 den Kunden dazu zu überreden versuchen, lediglich eine ganz spartanische css-Datei einzusetzen, so dass die Webseite beinah wie bei Wikipedia aussehen würde.

Der originale Artikel ist hier zu finden:
Universal Internet Explorer 6 CSS | For A Beautiful Web

Verschiedene Versionen und Beispiele der css-Datei sind hier zu haben:
universal-ie6-css - Project Hosting on Google Code

Die css-Datei ie6.0.3.css :

HTML-Code:
/* -------------------------------------------------------------- 
Standardised Internet Explorer 6 stylesheet:
http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/

Author: Andy Clarke
Web site: http://stuffandnonsense.co.uk
Web site: http://forabeautifulweb.com
Web site: http://transcending.com
Twitter: http://twitter.com/malarkey

Version date : 22nd May 2009
Version: 0.3 Alpha

License: Creative Commons CC Zero Declaration. No Rights Reserved.

Based on the work of:
Mark Boulton: http://markboulton.co.uk
Eric Meyer: http://meyerweb.com
Cameron Moll: http://www.cameronmoll.com/
Richard Rutter: http://clagnut.com
Khoi Vinh: http://subtraction.com

-------------------------------------------------------------- */

html, 			body, 
div,			span, 
object, 		iframe, 
h1, h2, h3, h4, h5, h6, 
p, 				blockquote, 
pre, 			a, 
abbr, 			acronym, 
address, 		code, 
del, 			dfn, 
em, 			img, 
q, 				dl, 
dt, 			dd, 
ol, 			ul, 
li, 			fieldset, 
form, 			label, 
legend, 		table, 
caption, 		tbody, 
tfoot, 			thead, 
tr, 			th, td { 
margin : 0; 
padding : 0; 
border : 0; 
font-weight : inherit; 
font-style : inherit; 
font-size : 100%; 
font-family : inherit; 
vertical-align : baseline; }

/* Body ---------------------------------------------------- */

body {
width : 60%;

/* http://www.cameronmoll.com/archives/000892.html */
width : expression(document.body.clientWidth < 640? "640px" : document.body.clientWidth > 120? "120em" : "auto");
margin : 0 auto;
padding : 2em 0;
background :  #fff;
font : 88% Georgia, Times, serif;
line-height : 1.4;
color : #333; }

/* Headings ---------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { 
font-weight : normal; }

h1 { 
margin-bottom : .5em;
font-size : 3em; 
line-height : 1; }

h2 { 
margin-bottom : .75em;
font-size : 2em; }

h3 {
margin-bottom : 1em;
font-size : 1.5em;
line-height : 1 ; }

h4 {
margin-bottom : 1.25em;
font-size : 1.2em;
line-height : 1.25; }

h5, h6 { 
margin-bottom : 1.5em;
font-weight : bold; 
font-size : 1em; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { 
margin : 0; }

/* Text elements -------------------------------------------------------------- */

p { 
margin : 0 0 1.5em; }

a {
color : #105cb6; 
text-decoration : underline; }

a:visited { 
color : #105cb6; }

a:focus, a:hover { 
color : #003; }

a img {
border : none; }

blockquote, q {
quotes : "" ""; }

blockquote { 
margin : 1.5em 1.5em 1.5em -1.5em;
padding-left : 1.5em;
border-left : 1px solid #666;
font : italic 1.2em "Times New Roman", Times, serif; }

blockquote:before, blockquote:after, q:before, q:after { 
content : ""; }

strong { 
font-weight : bold; }

em, dfn { 
font-style : italic; }

dfn { 
font-weight : bold; }

sup, sub { 
line-height : 0; }

abbr, acronym { 
border-bottom : 1px dotted #666; }

address {
margin : 0 0 1.5em;
font-style : italic; }

del { 
color : #666; }

pre, code, tt {
margin : 1.5em 1.5em 1.5em -1.5em;
padding-left : 1.5em;
border-left : 1px dotted #666;
font : 1em 'andale mono', 'lucida console', monospace;
line-height : 1.5; }

pre { 
white-space : pre; }

code { 
display : block; }


/* Lists -------------------------------------------------------------- */

li ul, li ol { 
list-style-type : circle;
margin : 0 1.5em .75em 1.5em; }

ul, ol {
margin : 0 1.5em 1.5em 0; }

ul { 
list-style-type : disc; }

ol {
list-style-type : decimal; }

dl {
margin-bottom: 1.5em; 
padding-top: 1.5em; 
border-top : 1px solid #ccc; }

dl dt {
margin-bottom : .75em;
font-size : 1.2em;
line-height : 1.25; }

dd {
margin-bottom: 1.5em; 
padding-bottom: 1.5em; 
border-bottom : 1px solid #ccc; }

/* Tables -------------------------------------------------------------- */

table {
border-collapse : separate; 
border-spacing : 0;
margin-bottom : 1.4em;
width : 100%; }

table, td, th { 
vertical-align : top; }

th, thead th {
font-weight : bold; }

th, td, caption {
padding : 4px 10px 4px 5px; 
text-align : left; 
font-weight : normal; }

th, td {
border-bottom : 1px solid #ccc; }

tfoot { 
font-size : .9em; }

caption {
margin-bottom : 1em;
font-size : 1.5em;
line-height : 1 ; }

/* Forms -------------------------------------------------------------- */

label { 
font-weight : bold; }

fieldset { 
margin : 0 0 1.5em 0; 
padding : 1.4em 1.4em 0 1.4em; 
border : 1px solid #ccc; }

legend {  
font-size : 1.2em; 
font-weight : bold; }

textarea { 
width : 390px; 
height : 250px; 
padding : 5px; }
Nun Fragen an euch:

Setzt schon jemand die Datei ein?

Hat jemand damit schon Erfahrung gemacht, eventuell die Datei auch für manch Schnickschnack erweitert.

Und vor allem was haltet euch davon, könnte das ein guter Ansatz sein um eine solche Datei nur für ie6 zu erstellen und einzusetzen?

Ich würde mich auf Antworten sehr freuen, dieses Forum hier ist Klasse, endlich fange ich an CSS zu verstehen ohne dabei unter Qual zu verrecken .
__________________
Viel Zeit hat wer keine verliert, insofern gebe ich dir ein definitives Vielleicht !
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.07.2009, 02:02
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von msinn Beitrag anzeigen
für ie6 den Kunden dazu zu überreden versuchen, lediglich eine ganz spartanische css-Datei einzusetzen, so dass die Webseite beinah wie bei Wikipedia aussehen würde.
Jeder wie er möchte. Aber ich werde meine Kunden garantiert nicht überreden, ihre teure Website zu opfern, um meinen persönlichen Feldzug gegen den IE 6 zu unterstützen. Sowas ist krasser Webdesigner-Egoismus.

Der Kunde will eine schöne und gut funktionierende Website, semantisch und so barrierefrei wie möglich, und all das bekommt man problemlos auch im IE 6 hin. Er ist natürlich ein schlechter Browser, aber es gibt ihn nunmal (nach Webhits immer noch satte 41%, plus 3% mit IE 5.x) und ich kann sehr gut mit seinen Macken umgehen, also werde ich meine Kunden sicher nicht zu solchem Unsinn überreden. Und meiner Meinung nach tut das auch kein seriöser Webdesigner, denn für diesen muss das Wohl seines Kunden an erster Stelle stehen, und eine spartanische Seite für fast die Hälfte aller Besucher hilft dem Kunden definitiv nicht.

Ein Kunde könnte einem solchen Vorschlag zurecht entgegnen, "wenn nur 56% aller Besucher das richtige Design zu sehen bekommen, damit mein Webdesigner schneller den lästigen IE 6 los wird, will ich auch einen spürbaren Preisnachlass bekommen". Das wäre dann eine Art Abwrackprämie für alte Browser. Aber wie gesagt, ich halte das für Unsinn.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.07.2009, 02:32
Benutzerbild von msinn
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2009
Ort: Offenburg
Beiträge: 14
msinn befindet sich auf einem aufstrebenden Ast
Standard

Danke dir sehr Heiko,

ja das klingt logisch und dazu noch profitabel .

Wie gehest du mit den IE-Hacks um, gibt es dafür schon eine ähnliche Datei, die die meisten davon beinhaltet, oder du hast deine eigene Snippets-Sammlung und je nach Fall setzt du sie dementsprechend ein?

Auf ein paar Links würde ich mich schon freuen.
Hier ist mein bester bislang:

Css Hack - css-discuss

jedoch habe ich noch keine einsetzbare css-Datei gefunden, die, wie oben erwähnt, den größten Teil davon enthält.

Danke dir Guru für deine Aufmerksamkeit und Gute Nacht, wenn du eine solche hast

Marius
__________________
Viel Zeit hat wer keine verliert, insofern gebe ich dir ein definitives Vielleicht !
Mit Zitat antworten
  #4 (permalink)  
Alt 23.07.2009, 03:07
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ich habe eine kleine Vorlage für ein IE-CSS, die die (wirklich immer nötigen) Regeln für hasLayout, andere (d.h. kleinere) hr-margins und den Zoom-Bug im IE 7 beinhaltet. Alles was sonst noch nötig ist, schreibe ich per Hand dazu. Hacks für IE-Probleme, die ich beim Schreiben des Standard-CSS' bereits voraussehe, schreibe ich sofort ins IE-CSS, alle anderen unmittelbar vor Abschluss des Projektes, wenn ich die Website in allen Browsern checke (inkl. allen IE-Win-Versionen ab 5.0).

Besondere Links zum Nachschauen habe ich nicht, denn ich habe grundsätzlich alles im Kopf, und tritt mal ein unbekanntes Problem auf, suche ich halt nach der Lösung (passiert aber zum Glück nur selten und geht dann meist auch sehr schnell). Aber es gibt natürlich hervorragende Links, z.B. brunildo.org oder den Standard-Link zum IE, Explorer Exposed! (und der von Dir genannte ist natürlich auch sehr gut).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 23.07.2009, 09:36
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

Hi,

ich habe, seit dem ich in das CSS von Gerrit van Aaken geschaut habe, mir diesen "hardreset" von Eric Meyer genommen und danach mein eigentliches CSS erstellt. Damit minimierten sich auch gleich meine nötigen Anpassungen für die IE-Käfer.

Hier die besagte Stelle:

HTML-Code:
/* CSS resetting work is done by famous Eric Meyer ------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background-repeat: no-repeat;
}
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden.

Mein aktuelles Projekt bei idealseiten.de
Mit Zitat antworten
  #6 (permalink)  
Alt 23.07.2009, 10:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

Mittlerweile binde ich auch per conditional statements grundsätzlich eine css-Datei für den IE ein.

Wenn ich so was hier sehe
Code:
html, 			body, 
div,			span, 
object, 		iframe, 
h1, h2, h3, h4, h5, h6, 
p, 				blockquote, 
pre, 			a, 
abbr, 			acronym, 
address, 		code, 
del, 			dfn, 
em, 			img, 
q, 				dl, 
dt, 			dd, 
ol, 			ul, 
li, 			fieldset, 
form, 			label, 
legend, 		table, 
caption, 		tbody, 
tfoot, 			thead, 
tr, 			th, td { 
...
Ist mir schon alles klar...
__________________
... Meine Meinung
Mit Zitat antworten
  #7 (permalink)  
Alt 23.07.2009, 10:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Von so einem "hardreset" nehme ich immer Abstand. Was bringt es mir, viel extra Code zu erzeugen, der zudem noch redundant ist und den ich in einem Projekt vielleicht garnicht benötige. Wenn ich dann doch ein Element benutze, was noch extra Einstellungen braucht, dann muss ich das sowieso einfügen und ggf. einige Eigenschaften "resetten".

Zudem ist outline: 0; wohl eher schlecht. Zumal das <a>-Element davon auch betroffen ist und dadurch der Focus bei Tastaturnavigation nicht angezeigt wird (zumindest in bestimmten Browsern). Klar kann man das wieder ändern, aber erstens kann man es vergessen und zweitens ist es überflüssig.

Wenn ein Element nicht richtig gestyled ist, dann nehme ich es einfach explizit ins CSS auf. Man muss ja meist sowieso noch andere Eigenschaften, die nur dieses Element betreffen, ändern.

Mein "Reset" sieht so aus:
Code:
* {
      margin: 0;
      padding: 0;

      /* Tabellen */
      border-collapse: collapse;
      border-spacing: 0;

}



html, body {
      line-height: 1.45;
}
Von Projekt zu Projekt varriert es natürlich auch ein wenig. Je nachdem, was für Elemente auf der Seite zum Einsatz kommen, bei denen man gleiche Eigenschaften zusammenfassen kann.
Mit Zitat antworten
  #8 (permalink)  
Alt 23.07.2009, 12:08
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von msinn Beitrag anzeigen
Wie gehest du mit den IE-Hacks um, gibt es dafür schon eine ähnliche Datei, die die meisten davon beinhaltet, [...]

Auf ein paar Links würde ich mich schon freuen.
Hier ist mein bester bislang:

Css Hack - css-discuss

jedoch habe ich noch keine einsetzbare css-Datei gefunden, die, wie oben erwähnt, den größten Teil davon enthält.
Wichtig ist es, zumindest die häufigsten IE-Macken, wie Peekaboo, Guillotine, 3px-Jog, doubled margins, und viele andere mehr, zu kennen. Da viele dieser Fehler durch das IE-eigene hasLayout-Konzept hervorgerufen oder beseitigt werden, würde ich mich zuerst mit den Detail-Beschreibungen dieser Bugs vertraut machen und dann den Grundlagen-Artikel über hasLayout lesen, lesen, lesen ..., der in deutscher Übersetzung verfügbar ist.

Wenn hasLayout verstanden wird, ist es relativ einfach mit IE-Bugs umzugehen. Eine CSS-Datei, die, ähnlich dem Reset von Mayer, bereits die häufigsten IE-Fehler auffängt, wird dann auch nicht nötig sein, und auch kaum Sinn machen, da es immer auf die Zusammenhänge ankommt, die sehr vielgestaltig sein können.

Du wolltest Links:

Wichtig und richtig hilfreich sind Positioniseverything.net, dort werden die Bugs quasi in Form von Datenblättern erfasst. Explorer Exposed!

Das Quirks-Blog auf quirksmode.org, das sich nicht nur mit dem IE, sondern auch mit den CSS-Fehlern anderer Browser beschäftigt.

satzansatz.de und brunildo.org beschäftigen sich "fast wissenschaftlich" mit den Bugs. Sie gehen dabei sehr detailliert vor und liefern eine ganze Menge an nützlichen Informationen, Anregungen und Aha!-Effekten..

Geändert von EvT (23.07.2009 um 12:18 Uhr) Grund: falscher Link zu positioniseverything.net
Mit Zitat antworten
  #9 (permalink)  
Alt 23.07.2009, 16:14
Benutzerbild von msinn
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2009
Ort: Offenburg
Beiträge: 14
msinn befindet sich auf einem aufstrebenden Ast
Standard

Hallo wieder,

ihr seid sehr freundlich und hilfsbereitschaft und die Fragen werden hier auch sehr schnell beantwortet, insofern einen riesigen Dank allen.

Die reset-Datei-Thematik habe ich mir auch näher angeschaut, hier im Forum sind dazu weitere Threads. Darauf bezogen habe ich mich für drei Stücke für die Snippets-Sammlung entschieden:

Multiflex-5.4 | Overview | (firebug)
Eric's Archived Thoughts: Reset Reloaded
Yahoo! UI Library: Reset CSS (die sind witzig mit der Lizenz)

Aber wie ich sehe, sind die Meinungen dazu sehr unterschiedlich. Ich vermute, dass eine solchen Datei auf einer Website in Frage kommt, worauf fast alle Elemente in verschiedenen Kontexten gebraucht werden und die Inhalte in ständiger Aktualisierung sind, also auf einer Site mit einigen guten Klicks am Tag. Vielleicht sparrt man sich bei der automatisierten Erstellung solcher Sites doch ein paar Kopfschmerzen.

Miao - Meow ist ein Superhinweis, danke euch tüchtig dafür. Die anderen sind auch gut, wobei ich einige schon aus anderen Threads hier kannte. Brunildo steht jetzt oben auf der Liste für das Wochenende und hasLayout in den Entspannungspausen auf Brunildo , denn ich möchte mich so schell wie möglich in CSS einarbeiten. Natürlich bei FAQ bin ich noch dabei, aber ich behandle das Thema ein bisschen gründlicher, deshalb verliere ich mich manchmal über die guten Links aus FAQ . Jedoch komme ich irgendwann auch wieder zurück.

@regloh

HTML-Code:
html, body {
      line-height: 1.45;
}
Ich habe mich schon oft gefragt, warum manche line-height: 1; wohingegen andere line-height:1.45; einsetzen. Auf eine kurze Antwort würde ich dir sehr dankbar sein.


OK Jungs, dieses Forum hier ist voll lebendig, hoffe, ich werde nach und nach auch zu den Stammbesuchern gehören.

Danke

Marius
__________________
Viel Zeit hat wer keine verliert, insofern gebe ich dir ein definitives Vielleicht !
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.07.2009, 17:01
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Line High > 1 setzt die Lesbarkeit eines Textes deutlich höher.
Ich nehme dazu meist Werte zwischen 1.5 und 2 - je nach Kontext kann es aber auch mal Elemente mit 1 geben.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
eine css für ie6, universal ie6 css

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Darstellung Listenelemente <ul><li> mit CSS funktioniert nicht im Internet Explorer 7 djleggins CSS 10 03.01.2009 21:34
Internet Explorer und Style-Klassen bei kopierten Nodes (DOM) loci Javascript & Ajax 5 03.07.2007 17:32
Internet Explorer 7 kümmert sich nicht um CSS height? Someday87 CSS 11 30.03.2007 11:24
Problem mit Darstellung von Bild im Internet Explorer Sp33dy G0nz4l3s CSS 4 27.05.2006 22:38
Float Layout Problem, Internet Explorer Azzy CSS 13 23.12.2005 17:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:57 Uhr.