nicht angemeldet
Richtiges DOCTYPE für alle Browser
AugeHallo,
ich versuche gerade das Layout von meinen HTML-Codes so zu gestalten, dass sie in allen Browsern gleich aussehen.
Je nachdem, was ich für ein DOCTYPE benutze, bekomme ich verschiedene Darstellungen. Z.B. dieses:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
und dieses:
<!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">
ergeben verschiedene Dartellungen unter FF 1.0.7. Wobei der IE 6.0 alle meine Wünsche erfüllt und sowohl mit einem als auch mit dem anderen DOCTYPE die gleiche Darstellung ergibt.
Die CSS-Datei binde ich im HEAD-Tag so ein:
<style type="text/css" title="currentStyle" media="screen">@import "../outlook/01.css";</style>
Was mache ich falsch?
Danke
-
Hi,
ich versuche gerade das Layout von meinen HTML-Codes so zu gestalten, dass sie in allen Browsern gleich aussehen.
wieso das? Wir befinden uns im World Wide Web!
ergeben verschiedene Dartellungen unter FF 1.0.7.
Dann kannst Du davon ausgehen, dass Du Fehler im Code hast. Validieren HTML und CSS?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
wieso das? Wir befinden uns im World Wide Web!
Es ist ein Wunsch von oben... ;)
Dann kannst Du davon ausgehen, dass Du Fehler im Code hast. Validieren HTML und CSS?
Die Ergebnisse von beiden sind grün! B-)
-
Tachchen!
Es ist ein Wunsch von oben... ;)
Mal sehen, wie weit sich der erfüllen lässt.
Die Ergebnisse von beiden sind grün!
Dann zeige doch mal beides her, vielleicht findet sich dann der Haken.
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
Smartbytes Webdesign in Oberhausen-
Dann zeige doch mal beides her, vielleicht findet sich dann der Haken.
8<---------HTML----------8<
<!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"><head>
<title>WEBSERVER</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="expires" content="now" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="no-store" />
<meta name="author" content="WEBSERVER" />
<meta name="description" content="WEBSERVER" />
<meta name="date" content="2005-11-21 12:19:20" />
<meta name="robots" content="index,follow" />
<style type="text/css" title="currentStyle" media="screen">
@import "/outlook/01.css";
</style>
</head><body class="all">
<div id="container">
<div class="langList">
<form action="/cgi-bin/choice.cgi" method="post">
<fieldset class="langButton">
<input type="submit" value="Deutsch" class="blueButton" />
<input type="hidden" name="language" value="de" />
</fieldset>
</form>
<form action="/cgi-bin/choice.cgi" method="post">
<fieldset class="langButton">
<input type="submit" value="English" class="blueButton" />
<input type="hidden" name="language" value="en" />
</fieldset>
</form>
</div></div>
</body>
</html>
8<----------CSS---------8<
/*--------------------------------------------------------------------------*/
/* BACKGROUND: transparent url(../bilder/hg.png) repeat-x top left; */.all {
background-color: #FFFFFF;
color: #058FE7;
margin: auto;
width: auto;
height: auto;
font-family: tahoma, verdana, monospace;
font-size: 85%;
font-weight: normal;
text-align: center;
position: relative;
}/*--------------------------------------------------------------------------*/
#container {width: 1000px;
background-color: #EEEEEE;
color: #058FE7;
border: 2px solid #058FE7;
text-align: center;
position: relative;
top: 20px;
left: 0px;
padding: 2px 0px 2px 0px;
margin: 20px 0px 20px 0px;
top: 2%;
left: 2%;
}.langList {
width: 380px;
background-color: #E0FFFF;
color: #058FE7;
border: 1px solid #058FE7;
text-align: center;
position: relative;
padding: 4px 0px 4px 0px;
margin: 0px 0px 0px 0px;}
.langButton {
width: 180px;
height: 24px;
background-color: #A0FFFF;
color: #EDF3FF;
border: 1px dotted #FF0000;
text-align: center;
position: relative;
top: 7px;
left: 0px;
bottom: 7px;
right: 0px;
padding: 3px 0px 1px 0px;
margin: 1px 0px 0px 0px;}
.blueButton {
width: 120px;
background-color: #EDF3FF;
color: #058FE7;
text-align: center;
font-family: tahoma, verdana, monospace;
font-size: 85%;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}Danke.
-
Hi,
Dann zeige doch mal beides her, vielleicht findet sich dann der Haken.
8<---------HTML----------8<[...]
gemeint war: Verlinke doch mal beide (in Worten: _beide_) Seiten.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Dann zeige doch mal beides her, vielleicht findet sich dann der Haken.
8<---------HTML----------8<
[...]gemeint war: Verlinke doch mal beide (in Worten: _beide_) Seiten.
Es geht leider nicht, weil ich es lokal mache. Kein Webspace und keine Berechtigung die IP nach draußen zu geben. :-(
-
-
Tachchen!
Dann zeige doch mal beides her, vielleicht findet sich dann der Haken.
Ich habe dann mal den ganzen Kram per Copy & Paste getestet
(Sieh zu, dass du dir Test-Webspace für sowas anlegst!) und
kann durch Ändern des Doctypes keine Darstellungsunterschiede
in Geckos provozieren.Im Internet Explorer sieht es etwas anders aus, aber das war zu erwarten.
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
Smartbytes Webdesign in Oberhausen-
Ich habe dann mal den ganzen Kram per Copy & Paste getestet
(Sieh zu, dass du dir Test-Webspace für sowas anlegst!) und
kann durch Ändern des Doctypes keine Darstellungsunterschiede
in Geckos provozieren.Mit welchem DOCTYPE?
-
Ich habe dann mal den ganzen Kram per Copy & Paste getestet
(Sieh zu, dass du dir Test-Webspace für sowas anlegst!) und
kann durch Ändern des Doctypes keine Darstellungsunterschiede
in Geckos provozieren.Wenn ich dashier verwende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
dann sehe ich eine Linksbündige formatiereung...
Mit dem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
alles untereinander... :-( und ohne farbige DIVs...
-
Tachchen!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Diese beiden Doctypes habe ich auch verwendet, weil du sie vorgegeben hattest.
dann sehe ich eine Linksbündige formatiereung...
Blockelemente links, Inlineelemente zentriert. Scheint mir korrekt.
alles untereinander... :-( und ohne farbige DIVs...
Kann ich nicht nachvollziehen. Und was ist in diesem Zusammenhang "alles"?
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
Smartbytes Webdesign in Oberhausen-
Diese beiden Doctypes habe ich auch verwendet, weil du sie vorgegeben hattest.
Es ist ok.
Blockelemente links, Inlineelemente zentriert. Scheint mir korrekt.
Unter IE sind bei mir die 2 Buttons zentriert positioniert. D.h. im id="container" und unter FF linksbündig...
Kann ich nicht nachvollziehen. Und was ist in diesem Zusammenhang "alles"?
2 Buttons
-
-
-
-
Hallo
8<---------HTML----------8<
<body class="all">
<div id="container">
<div class="langList">
<form action="/cgi-bin/choice.cgi" method="post">
<fieldset class="langButton">
<input type="submit" value="Deutsch" class="blueButton" />
<input type="hidden" name="language" value="de" />
</fieldset>
</form>
<form action="/cgi-bin/choice.cgi" method="post">
<fieldset class="langButton">
<input type="submit" value="English" class="blueButton" />
<input type="hidden" name="language" value="en" />
</fieldset>
</form>
</div></div>
</body>
</html>
8<----------CSS---------8<
/*--------------------------------------------------------------------------*/
.all {
Im Normalfall brauchst du keine Klasse für den
<body>. die Angabe vonbody {...}reicht....
font-family: tahoma, verdana, monospace;Die generische Schriftfamilie, die Tahoma und Verdana beinhaltet, ist "sans-serif". Monospace ist die Familie für diktengleiche Schriften wie Courier.
text-align: center;
}#container {
text-align: center;
}.langList {
text-align: center;
}.langButton {
text-align: center;
}.blueButton {
text-align: center;
}Überall gibst du
text-align: center;an. Dann brauchst du dich auch nicht wundern, dass der MSIE alle Elemente zentriert, da er text-align fälschlicherweise auch auf Blockelemente anwendet, dies aber im FF nicht funktioniert (dort brauchst dumargin:auto;gegebenenfalls mit -left und -right), da dieser den Fehler nicht macht. Denn deine Formulare (warum eigentlich derer zwei für die gleiche Aufgabe (Sprachwahl)) sind Blockelemente, die du nicht explizit zentriert hast. Daher werden sie im FF linksbündig dargestellt.*btw*
#container {
...
top: 20px;
left: 0px;
...
top: 2%;
left: 2%;
}Warum dieses?
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1
-
-
-
Hi,
wieso das? Wir befinden uns im World Wide Web!
Es ist ein Wunsch von oben... ;)auch "die oben" müssen sich mit der Realität abfinden. Das World Wide Web ist kein Printmedium.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
auch "die oben" müssen sich mit der Realität abfinden. Das World Wide Web ist kein Printmedium.
Tja, aber im Netz gibt's viele Seiten, die mehr oder weniger identisch in verschiedenen Browser aussehen...
-
-
-
Je nachdem, was ich für ein DOCTYPE benutze, bekomme ich verschiedene Darstellungen. Z.B. dieses:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
und dieses:
<!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">
ergeben verschiedene Dartellungen unter FF 1.0.7.Dann kannst Du davon ausgehen, dass Du Fehler im Code hast.
Wie kommst du darauf? Es ist völlig normal, dass die beiden DOCTYPEs eine unterschiedliche Darstellung im Firefox zur Folge haben. Stichwort Almost Standards Mode:
http://www.ltrebing.de/interessen/www/devedge-almost-standards/
http://www.carsten-protsch.de/zwischennetz/doctype/luecken/bsp_luecken_almost-standard.htmlMathias
-
Hi,
Wie kommst du darauf? Es ist völlig normal, dass die beiden DOCTYPEs eine unterschiedliche Darstellung im Firefox zur Folge haben. Stichwort Almost Standards Mode:
der hat nur minimale Auswirkungen. Ich habe noch nie erlebt, dass sich dadurch ein bemerkenswert unterschiedliches Layout ergeben hätte.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-