blackbird
Anmeldungsdatum: 19. November 2004
Beiträge: 3396
Wohnort: Hermagor, Kärnten - Österreich
|
Hallo User, Ich dreh langsam durch. Jetzt habe ich meine Homepage für XHTML extra neu gemacht, was passiert? Der IE zeigt das nicht richtig an. Kann mir jemand sagen, was an diesem Stylesheet gegen den Standard ist? /*
screen Design for active-4 homepage
*/
/* :::: default tag design :::: */
body {
background-color: #f8f8f8;
font-family: 'Bitstream Vera Sans', 'Verdana', 'Arial';
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
color: #54763f;
text-decoration: none;
border-bottom: 1px dotted #54763f;
}
a:hover {
color: #96ae45;
border-bottom: 1px dotted #96ae45;
}
.page {
border: 1px solid black;
width: 720px;
padding: 0px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #fff;
}
p {
margin: 0px;
padding: 0px;
margin-bottom: 8px;
}
.print {
display: none;
}
/* :::: header :::: */
#header {
background-color: #c8c8c8;
background-image: url('images/banner.png');
height: 60px;
width: 720px;
}
#header>h1 {
display: none;
}
#main-navigation {
background-color: #444;
font-color: #000;
width: 720px;
position: absolute;
margin: 0;
margin-top: 40px;
padding: 0px;
list-style: none;
}
#main-navigation>li {
float: left;
margin: 0px;
padding: 4px;
margin-left: 8px;
border-bottom: 2px none;
}
#main-navigation>li:hover {
background-color: #777;
}
#main-navigation>li>a {
float: left;
display: block;
padding: 1px;
font-weight: bold;
color: #fff;
text-decoration: none;
border: none;
}
/* :::: catnav :::: */
#cat {
background-image: url('images/banner.png');
background-position: bottom;
height: 24px;
width: 720px;
border-bottom: 1px solid black;
}
#cat-navigation {
font-color: #000;
width: 720px;
position: absolute;
margin: 0;
margin-top: 5px;
padding: 0px;
list-style: none;
}
#cat-navigation>li {
float: left;
margin: 0px;
padding: 1px;
margin-left: 8px;
border: 1px none;
}
#cat-navigation>li>a {
float: left;
display: block;
padding: 1px;
font-weight: bold;
color: #000;
text-decoration: none;
border: none;
}
#cat-navigation>li>a:hover {
color: #fff;
}
/* :::: content :::: */
#content {
background-color: #fff;
padding: 10px;
width: 700px;
min-height: 300px;
}
/* :::: footer :::: */
#footer {
background-image: url('images/bar.png');
width: 720px;
padding-top: 3px;
font-size: 9px;
font-weight: bold;
text-align: center;
color: #fff;
border-top: 1px solid black;
}
.break {
display: none;
}
/* :::: Headlines :::: */
h1, h2, h3, h4 {
margin: 0px;
padding: 0px;
}
/* :::: Content Tags :::: */
#content>ul {
margin: 0px;
}
|
Apollon
Anmeldungsdatum: 27. Oktober 2004
Beiträge: 724
Wohnort: Darmstadt
|
IE ist gegen den Standard.
|
MaV
Anmeldungsdatum: 12. Dezember 2004
Beiträge: 68
|
Hallo! Apollon hat recht, IE ist alles andere als true zum CSS-Standard. Tja, im Grunde genommen hast du den richtigen Weg begangen, zuerst standard-konformes CSS schreiben, und dann, wenn es notwendig ist, die Seiten an die IE-Bugs 'anpassen'. Das ist auch die zermürbendste Arbeit daran ... Ich hab mir einmal ein paar Seiten zu Browser-Bugs gespeichert, weiß jetzt aber nicht mehr, ob die alle wirklich nützlich waren. Schau sie dir einfach mal an: http://css.nu/pointers/bugs-ie.html http://www.positioniseverything.net/explorer.html http://piology.org/ie/ http://www.mezzoblue.com/archives/2004/02/25/sidestepping/ http://www.dracos.co.uk/web/css/ie6floatbug/ Im schlimmsten Fall versuch die Seite unter IE so weit hinzukriegen, dass sie noch einigermaßen dem originalen Entwurf entspricht. Haargenaue Anpassung wirst du wohl ohnehin nicht schaffen. Grüße, MaV
|
blackbird
(Themenstarter)
Anmeldungsdatum: 19. November 2004
Beiträge: 3396
Wohnort: Hermagor, Kärnten - Österreich
|
Apollon hat geschrieben: IE ist gegen den Standard.
Leider. Jetzt hab ich endlich den Standard, sogar die Blöcke hab ich per PHP einrücken lassen, aber der will halt nicht. Dann beginnen wir mal beim schlimmsten. Die Seite ist diese hier: http://www.active-4.com. 1.) Der IE zeigt das Menü nicht als Leiste an und er versteckt die Seite. 2.) IE kennt wohl kein margin:auto; ⇒ was macht man für den IE?
|
MaV
Anmeldungsdatum: 12. Dezember 2004
Beiträge: 68
|
blackbirdXXX hat geschrieben:
- snip - Dann beginnen wir mal beim schlimmsten. Die Seite ist diese hier: http://www.active-4.com. 1.) Der IE zeigt das Menü nicht als Leiste an und er versteckt die Seite. 2.) IE kennt wohl kein margin:auto; ⇒ was macht man für den IE?
IE kennt margin: auto; aber verarbeitet es fehlerhaft. IIRC, wenn du Tabellen zentrieren willst, musst du für das Element text-align:center; verwenden. Das wirkt sich in anderen Browsern auf den Text aus, deswegen sollten untergeordnete Elemente - etwa td - wieder ein text-align: left; oder Ähnliches enthalten. Grüße, MaV
|
blackbird
(Themenstarter)
Anmeldungsdatum: 19. November 2004
Beiträge: 3396
Wohnort: Hermagor, Kärnten - Österreich
|
Ich habe nur mit div und ol (li) gearbeitet. Aber margin:auto geht nicht...
|
drunkVoodoo
Anmeldungsdatum: 17. November 2004
Beiträge: 66
Wohnort: $HOME
|
Ok, ich habe jetzt kein Windows-System zur Hand, aber ich bin mir jetzt ziemlich sicher, das IE den Kind-Selektor (">") nicht unterstützt, also das Folgende als unbekannte Regel ignoriert:
#cat-navigation>li>a:hover {
color: #fff;
} Der Nachfahrselektor wird vom IE erkannt, also das sollte funktionieren:
#cat-navigation li a:hover {
color: #fff;
} margin: auto funktioniert ab IE6 korrekt, aber nur im "Standard"-Modus – der "Quirks"-Modus verhält sich wie IE5. Das nennt sich "DOCTYPE-Switching" und wird z.B. hier genauer erklärt. Hoffe das hilft ein wenig weiter...
|
blackbird
(Themenstarter)
Anmeldungsdatum: 19. November 2004
Beiträge: 3396
Wohnort: Hermagor, Kärnten - Österreich
|
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> Schaut leider nicht nach Quirks aus.
Macht der Nachfolgeselector das gleiche wie der Kindselector?
|
drunkVoodoo
Anmeldungsdatum: 17. November 2004
Beiträge: 66
Wohnort: $HOME
|
Der XML-Prolog am Anfang schmeisst den IE aus der Bahn, den sollte man bis auf weiteres weglassen.
|
MaV
Anmeldungsdatum: 12. Dezember 2004
Beiträge: 68
|
drunkVoodoo hat recht. Elemente mit dem Selektor > unterzuordnen funktioniert im IE nicht, er ignoriert die Angaben dann einfach. Die Lösung, die er vorgeschlagen hat, mag Nachteile haben, denn es gibt ja einen Unterschied zwischen > und einem Leerzeichen zwischen zwei Elementen, aber anders geht's nicht, wenn's der IE verstehen soll. Und wenn ich davon spreche, dass margin:auto; funktioniert, nehme ich grundsätzlich an, dass DOCTYPEs verwendet werden. Das kann man nur wärmstens empfehlen, weil du dem Browser deutlich sagst, was er wie zu interpretieren hat. Lese dir auch unbedingt die Links durch, die ich gepostet habe! Da steht genug zum Thema Browserbugs. Grüße, MaV PS: Der Link enthält aber nicht den XHTML-Code, von dem du gesprochen hast, ist also als Hilfe nutzlos. :-/
|
MaV
Anmeldungsdatum: 12. Dezember 2004
Beiträge: 68
|
blackbirdXXX hat geschrieben:
- snip - Macht der Nachfolgeselector das gleiche wie der Kindselector?
Der Nachfolgeselektor gilt für alle so bezeichneten Elemente unterhalb des Hauptelements, ganz egal in welcher Ebene darunter es liegt. Der Kindselektor gilt nur für Elemente genau eine Ebene unterhalb des Hauptelements. Grüße, MaV
|
blackbird
(Themenstarter)
Anmeldungsdatum: 19. November 2004
Beiträge: 3396
Wohnort: Hermagor, Kärnten - Österreich
|
Dann kann ich den Nachfolgeselektor wohl nicht verwenden. Ich verschachtle ihn
#main-navigation li a wäre dann ja auch a ohne li gemeint.
Das <?xml... ?> kommt erstmal raus.
|
drunkVoodoo
Anmeldungsdatum: 17. November 2004
Beiträge: 66
Wohnort: $HOME
|
blackbirdXXX hat geschrieben:
Dann kann ich den Nachfolgeselektor wohl nicht verwenden. Ich verschachtle ihn
#main-navigation li a wäre dann ja auch a ohne li gemeint.
Nur unterhalb von li-Elementen in einem Element mit der id main-navigation. Kleines Beispiel – folgende Stylesheet: #bla li a {
color: red;
}
#bla > li > a {
font-style: italic;
} Das ergäbe folgende Effekte (in den Kommentaren) im HTML:
<div id="bla">
<ul>
<li><a href="#">bla</a></li> <!-- rot und kursiv -->
<li><p>Ein Link: <a href="#">blabla</a></p></li> <!-- nur rot -->
</ul>
</div> Der Kindselektor greift halt nur bei *direkten* Nachfahren – im 2. li ist noch ein <p> dazwischen. Ich hoffe, ich habe Dich jetzt endgültig verwirrt 😉
|
blackbird
(Themenstarter)
Anmeldungsdatum: 19. November 2004
Beiträge: 3396
Wohnort: Hermagor, Kärnten - Österreich
|
Die Seite wird jetzt auch vom IE sogut als ob angezeigt. Beim Surfen bin ich aber auf das da gestoßen: http://support.microsoft.com/default.aspx?scid=kb;DE;833786
Klicken Sie nicht auf nicht vertrauenswürdige Hyperlinks. Geben Sie sie selbst in der Adressleiste ein.
Sicher lustig 😀
|
dejot
Anmeldungsdatum: 23. Oktober 2004
Beiträge: 610
Wohnort: Osnabrück
|
lol!! wie geil das klingt. Wenn sie einen Dialer wollen, müssen sie schon selbst die Seitenadresse eintippen. 🤣 🤣
|