nicht angemeldet
andere Schriftformatierung in Firefox als im IE
2 
Der Martin
0 0 0 Der Martin
0
andere Schriftformatierung in Firefox als im IE
Hi
Ich habe das Problem, dass ich mit dem Scriptlx-Editor immer mit der IE-Vorschau geprüft habe, ob die Formatierung so ist, wie ich sie haben möchte. Jetzt habe ich die Datei im Firefox geöffnet und die Formatierung des Textes ist anders und ich weiß nicht, woran das liegt.
Im Anhang die Screenshots in den Browsern
hier der HTML-Code~~~html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Ingeniuerbüro Tragwerk Bauphysik Hans-Adolf Kurth Diplom-Ingeniur Bauwesen">
<meta name="description" content="Ingeniuerbüro für Bauphysik und Tragwerksplanung Hans-Adolf Kurth Diplom-Ingeniur für Bauwesen">
<meta http-equiv="content-language" content="de">
<title>Kontakt</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<link href="favicon.ico" type="image/x-ion" rel="shortcut icon">
</head>
<body>
<div id="kopfzeile">
<div id="kopfbild"><img src="bilder/HAKmittel.jpg" align="left" height="245" width="265" alt="Firmensymbol HAK">
</div>
<div id="headline">
<h1 class="header" id="kopf_erste_zeile"><a><font size="5em">Ingenieurbüro für Tragwerksplanung u. Bauphysik</font></a></h1>
<h1 class="header"><font size="6em"><font size="5em">Dipl.-Ing.</font> Hans-Adolf KURTH</font></h1>
<h1 class="header"><font size="4em">Diplom-Ingenieur für Bauwesen</font></h1>
<h1 class="header" id="kopf_letzte_zeile"><font size="5em">Am Schützenplatz 2 • 37434 GIEBOLDEHAUSEN</font></h1>
</div>
</div>
<div id="container">
<div id="sidebar1">
<ul class="nav">
<li><a href="../hansadolf_kurth_versuch1.html">Startseite</a></li>
<li><a href="preise.html">Unsere Preise</a></li>
<li><a href="bilder.html">Bilder von Projekten</a></li>
<li><a href="gaestebuch.html">Gästebuch u. Forum</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a class="unterpunkt" href="#anfahrtsskizze"> Anfahrtsskizzen</a></li>
</ul><!-- <li><script src=".php"></script> </li> nicht eingebunden -->
</div>
<div id="content">
<h1>Kontakt</h1>
<p class="adressblock">Ingenieurbüro für Tragwerksplanung und Bauphysik</p>
<p class="adressblock">Dipl. Ing. Hans-Adolf Kurth</p>
<p class="adressblock">Diplom-Ingenieur für Bauwesen</p>
<p class="adressblock">Am Schützenplatz 2</p>
<p></p>
<p class="adressblock">37434 Gieboldehausen</p>
<p></p>
<p>Termin nach Absprache</p><!-- Richtige E-Mail-Adresse? -->
<p></p><a href="mailto:mail@h-a-k.de">E-Mail an mich (ein E-Mail-Programm muss sich hierfür auf Ihrem Rechner befinden)</a>
<p></p><a name="anfahrtsskizzen" id="anfahrtsskizzen"></a>
<h2>Anfahrtsskizzen</h2>
<p></p>
<img src="bilder/anfahrt_weit.jpg" height="590" width="790" alt="Süd-West-Niedersachsen">
<p></p><img src="bilder/anfahrt_mittel.jpg" height="590" width="790" alt="Karte von Südniedersachsen">
<p></p><img src="bilder/anfahrt_nah.jpg" height="590" width="790" alt="Karte von Gieboldehausen">
<p></p>
<h2>Wegbeschreibung</h2>
</div>
</div>
</body>
</html>
der CSS-Code
~~~css
h1 {
background-color:#CCFFCC;
font-size:36px;
margin-left:10px;
margin-top:-10px;
}
#einleitung {
background-color:#00CC66;
border:#FFFFFF;
color:#333300;
margin-bottom:0;
margin-top:0;
}
ul {
color:#CC3300;
}
ol {
background:#00CC66;
color:#660000;
}
p .right {
text-align:right;
}
body {
background-color:#000000;
color:#330066;
font:100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
text-align:center;
}
ul,ol,dl {
margin:0;
padding:0;
}
h2,h3,h4,h5,h6,p {
margin-top:0;
padding-left:15px;
padding-right:15px;
}
a img {
border:none;
}
a:link {
color:#42413C;
text-decoration:underline;
}
a:visited {
color:#6E6C64;
text-decoration:underline;
}
a:hover,a:active,a:focus {
text-decoration:none;
}
#container,#kopfzeile{
width: 1240px;
}
#container,#sidebar1,#content {
min-height: 700px;
text-align: left;
margin:0px;
padding:0px;
}
#kopfzeile {
height:245px;
background-color:#CCFFCC;
border:#3300CC;
border: none;
border-bottom: double;
border-spacing:4px;
margin: 0px;
padding: 0px;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
#kopfbild,#headline,#obenrechts{
height: 245px;
}
#kopfbild{
float: left;
width: 265px;
}
#headline,#content{
width: 736px;
}
#headline {
background-color:#CCFFCC;
color:#3300CC;
margin:0px;
padding:0px;
float:left;
border:#3300CC;
font-size: 100.1%;
text-align: center;
}
.header {
margin-bottom:0;
margin-top:0;
text-align:center;
}
#kopf_erste_zeile{
padding-top: 1em;
}
#kopf_letzte_zeile{
padding-bottom: 1em;
}
#container {
background-color:#CCFFCC;
background-image:url(images/tue-farbverlauf-steuerung-bsp.gif);
margin:0 auto;
min-height:707px;
overflow:hidden;
text-align:left;
}
#sidebar1 {
float:left;
padding-bottom:10px;
padding-top:10px;
width:240px;
}
.nav_para {
background:#C6D580;
display:block;
padding:5px 5px 5px 15px;
width:225px;
}
.unterpunkt{
}
#content {
background-color:#CCFFCC;
float:left;
margin-left:24px;
padding:10px 0;
padding-top: 10px;
width:736px;
}
.adressblock {
font-style:normal;
font-size:medium;
margin:0;
}
#content ul,#content ol {
background-color:#33FF66;
padding:0 15px 15px 40px;
}
ul.nav {
border-top:1px solid #666666;
list-style:none;
margin-bottom:15px;
}
ul.nav li {
border-bottom:1px solid #666666;
}
ul.nav a,ul.nav a:visited {
background:#C6D580;
display:block;
padding:5px 5px 5px 15px;
text-decoration:none;
width:225px;
}
ul.nav a:hover,ul.nav a:active,ul.nav a:focus {
background:#ADB96E;
color:#FFFFFF;
}
/*Kantenabrundung versch. Browser (auf css 2.1 beruhend; wenn css3 standart: reicht border-radius..)*/
h1,ul,ol,body {
border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
-moz-border-radius:4px;
}
#einleitung {
border-bottom-left-radius:0;
-moz-border-bottom-left-radius:0;
-khtml-border-bottom-left-radius:0;
-webkit-border-bottom-left-radius:0;
-o-border-bottom-left-radius:0;
border-bottom-right-radius:0;
-moz-border-bottom-right-radius:0;
-khtml-border-bottom-right-radius:0;
-webkit-border-bottom-right-radius:0;
-o-border-bottom-right-radius:0;
border-top-left-radius:6px;
-moz-border-top-left-radius:6px;
-webkit-border-top-left-radius:6px;
-o-border-top-left-radius:6px;
-khtml-border-top-left-radius:6px;
border-top-right-radius:6px;
-webkit-border-top-right-radius:6px;
-o-border-top-right-radius:6px;
-khtml-border-top-right-radius:6px;
-moz-border-top-right-radius:6px;
}
.nav_param,ul.nav a,ul.nav a:visited {
border-bottom-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-o-border-bottom-right-radius:5px;
-khtml-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-top-right-radius:5px;
-webkit-border-top-right-radius:5px;
-o-border-top-right-radius:5px;
-khtml-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
}
Weiß jemand, woran das liegen kann. Danke im Vorraus für die Antworten
-
Hallo,
Ich habe das Problem, dass ...
... du CSS bunt mit alten, missbilligten HTML-Elementen und -attributen durcheinanderwürfelst.
Jetzt habe ich die Datei im Firefox geöffnet und die Formatierung des Textes ist anders und ich weiß nicht, woran das liegt.
Die Fehlerkorrektur der beiden Browser arbeitet wohl unterschiedlich.
<meta name="keywords" content="Ingeniuerbüro Tragwerk Bauphysik Hans-Adolf Kurth Diplom-Ingeniur Bauwesen">
<meta name="description" content="Ingeniuerbüro für Bauphysik und Tragwerksplanung Hans-Adolf Kurth Diplom-Ingeniur für Bauwesen">Warum verstümmelst du die Umlaute zu HTML-Entities, obwohl du behauptest, mit UTF-8 eine Zeichencodierung zu verwenden, bei der das überhaupt nicht nötig wäre? Und wenn du schon XHTML verwendest, solltest du auch die XML-Notation für leere Elemente verwenden.
<body>
<div id="kopfzeile">
<div id="kopfbild"><img src="bilder/HAKmittel.jpg" align="left" height="245" width="265" alt="Firmensymbol HAK">
</div>Mindestens das div#kopfbild ist schonmal überflüssig, da es nur ein einziges Kindelement enthält, also nichts gruppiert. Das img-Element ist nicht geschlossen, was aber in XHTML notwendig ist.
<div id="headline">
<h1 class="header" id="kopf_erste_zeile"><a><font size="5em">Ingenieurbüro für Tragwerksplanung u. Bauphysik</font></a></h1><h1 class="header"><font size="6em"><font size="5em">Dipl.-Ing.</font> Hans-Adolf KURTH</font></h1>
<h1 class="header"><font size="4em">Diplom-Ingenieur für Bauwesen</font></h1>
<h1 class="header" id="kopf_letzte_zeile"><font size="5em">Am Schützenplatz 2 • 37434 GIEBOLDEHAUSEN</font></h1>
</div>Und hier kriege ich einen Anfall. Mehrere h1-Elemente sind semantischer Unsinn, die kaputten Umlaute hatte ich schon erwähnt. Da alle Kindelemente von div#headline dieselbe Klasse haben, ist diese Klasse ebenfalls überflüssig. Das font-Element ist ein Relikt aus dem letzten Jahrtausend, und wenn man es schon verwendet, ist "4em" oder "6em" kein gültiger Wert für dessen size-Attribut.
<div id="container">
<div id="sidebar1">
<ul class="nav">
<li><a href="../hansadolf_kurth_versuch1.html">Startseite</a></li><li><a href="preise.html">Unsere Preise</a></li>
<li><a href="bilder.html">Bilder von Projekten</a></li>
<li><a href="gaestebuch.html">Gästebuch u. Forum</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a class="unterpunkt" href="#anfahrtsskizze"> Anfahrtsskizzen</a></li>
</ul><!-- <li><script src=".php"></script> </li> nicht eingebunden -->
</div>Again: Ein div-Element, das nur ein einziges Kindelement hat, ist sinnlos.
<div id="content">
<h1>Kontakt</h1>
...
<p></p><p class="adressblock">37434 Gieboldehausen</p>
<p></p>
Was sollen die leeren p-Elemente? Abstand? Dafür gibt's CSS.
<p></p><a href="mailto:mail@h-a-k.de">E-Mail an mich (ein E-Mail-Programm muss sich hierfür auf Ihrem Rechner befinden)</a>
Und das ist wohl ein Unfall, oder? Das a-Element sollte doch wohl *innerhalb* des Absatzes stehen.
<p></p><a name="anfahrtsskizzen" id="anfahrtsskizzen"></a>
Dito. Und wozu ein a-Element ohne href-Attribut?
<img src="bilder/anfahrt_weit.jpg" height="590" width="790" alt="Süd-West-Niedersachsen">
Again: img-Element nicht geschlossen.
<p></p><img src="bilder/anfahrt_mittel.jpg" height="590" width="790" alt="Karte von Südniedersachsen">
Again: Logischer Fehler, img-Element außerhalb des Absatzes. Und nicht geschlossen.
Korrigiere also am besten erst die HTML-Fehler. Dann sorge dafür, dass Formatierung und Gestaltung konsequent mit CSS geschieht. Und dann schauen wir uns das Ergebnis nochmal an.
So long,
Martin--
Elefant zum Kamel: "Sag mal, wieso hast du denn den Busen auf dem Rücken?"
Kamel: "Ziemlich freche Frage für einen, der den Penis im Gesicht hat."
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Om nah hoo pez nyeetz, Der Martin!
<p></p><a name="anfahrtsskizzen" id="anfahrtsskizzen"></a>
Dito. Und wozu ein a-Element ohne href-Attribut?
als Anker?
Matthias
--
1/z ist kein Blatt Papier.
-
Vielen Dank für die Informationen. Ich habe erst vor kurzem angefangen HTML und CSS zu lernen und komme teilweise noch mit den Befehlen durcheinander. Weiterhin habe ich den head-Teil vom Scriptly-Editor genommen und dieser ändert auch immer die Umlaute in diese Zeichen, wenn ich die Formatierung optimieren lasse und ich hatte vor kurzem, als ich die Umlaute direkt in HTML eingegeben habe, das Problem, dass ich die Datei geöffnet habe und in beiden Browsern wurde statt den Umlauten kleine Rechtecke angezeigt. Also habe ich die Zeichenfolge in Kauf genommen, wodurch die Umlaute richtig angezeigt wurden. Außerdem ist die Seite auch noch nicht fertig, weshalb ich z.B. in dem von Matthias Apsel beschriebenen Code-Fragment noch keinen Link eingefügt habe. Und was die Suche nach einem Validator angeht, so besitzt der genannte Editor für HTML und CSS einen und ich bekomme keine Fehler angezeigt.
Zu der Aussage von Der Martin
»»CSS bunt mit alten, missbilligten HTML-Elementen und -attributen durcheinanderwürfelst.
was genau meinst du damit und wie müsste ich es deiner Meinung nach richtig ausdrücken?»»Und wenn du schon XHTML verwendest, solltest du auch die XML-Notation für leere Elemente verwenden.
Was meinst du damit?zu den leeren p-Elementen: Einerseits soll man die Codes so übersichtlich wie möglich gestalten, anderer seits, soll sogar für einzelne Absätze eine id bzw class machen, um den Abstand zu der nächsten Zeile festzulegen. Ist das mit den p-Elementen nicht übersichtlicher?
div-Bereiche mit einem Element: Ich mache im Moment nur einen Entwurf wie es aussehen könnte. Ich habe mir überlegt, dass man mit einer sechsteilung der Seite durch div-Bereiche einzelne Elemente leichter ersetzen bzw. auslassen kann, ohne die Formatierung komplett abändern zu müssen.
img-Elemente: Wenn du mit schließen "/" am Ende des-Elementes meinst, so habe ich dies schlicht vergessen, da ich in dem HTML-Kurs auf dieser Seite gemacht habe und dies entweder nicht vorkommt oder ich übersehen habe.
MfG mp1111
-
Om nah hoo pez nyeetz, mp1111!
Vielen Dank für die Informationen.
Ich habe erst vor kurzem angefangen HTML und CSS zu lernen und komme teilweise noch mit den Befehlen durcheinander.
Es gibt keine HTML-Befehle
Weiterhin habe ich den head-Teil vom Scriptly-Editor genommen und dieser ändert auch immer die Umlaute in diese Zeichen, wenn ich die Formatierung optimieren lasse und ich hatte vor kurzem, als ich die Umlaute direkt in HTML eingegeben habe, das Problem, dass ich die Datei geöffnet habe und in beiden Browsern wurde statt den Umlauten kleine Rechtecke angezeigt. Also habe ich die Zeichenfolge in Kauf genommen, wodurch die Umlaute richtig angezeigt wurden.
Grundgerüst eines HTML-Dokumentes Angabe einer Zeichenkodierung
Außerdem ist die Seite auch noch nicht fertig, weshalb ich z.B. in dem von Matthias Apsel beschriebenen Code-Fragment noch keinen Link eingefügt habe.
Es ist sinnvoll, zuerst nur die Inhalte zu erzeugen und sich danach um die Darstellung zu kümmern.
Und was die Suche nach einem Validator angeht, so besitzt der genannte Editor für HTML und CSS einen und ich bekomme keine Fehler angezeigt.
Zu der Aussage von Der Martin »»CSS bunt mit alten, missbilligten HTML-Elementen und -attributen durcheinanderwürfelst. was genau meinst du damit und wie müsste ich es deiner Meinung nach richtig ausdrücken?
Inhalt ins HTML und Gestaltung vollständig mit CSS machen
Liste der missbilligten Attribute und Elemente
»»Und wenn du schon XHTML verwendest, solltest du auch die XML-Notation für leere Elemente verwenden. Was meinst du damit?
zu den leeren p-Elementen: Einerseits soll man die Codes so übersichtlich wie möglich gestalten, anderer seits, soll sogar für einzelne Absätze eine id bzw class machen, um den Abstand zu der nächsten Zeile festzulegen. Ist das mit den p-Elementen nicht übersichtlicher?
Gestaltung gehört ins CSS und da nicht jeder Absatz vollständig anders aussehen soll, wirst du auch kaum eine ID benötigen. Du denkst zu sehr in Word.
Matthias
--
1/z ist kein Blatt Papier.
-
-
Hallo,
Und wozu ein a-Element ohne href-Attribut?
als Anker?stimmt, das hat man vor über zehn Jahren wohl mal so gemacht ...
Aber heute??Ciao,
Martin--
Wenn zwei dasselbe tun, sind sie vielleicht bald zu dritt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
Hi
Jetzt habe ich die Datei im Firefox geöffnet und die Formatierung des Textes ist anders und ich weiß nicht, woran das liegt.
Der Martin hat ja schon einiges gesagt. Ich möchte nur noch ergänzen, dass du quellcode, hier vor allem CSS code verstehen solltest, wenn du ihn verwendest ohne ihn selbst geschrieben zu haben.
Desweiteren solltest du dich grundlegend erstmal in die Thematik Webentwicklung einlesen, da dein Quellcode vor Unwissenheit schreit.
Zuguter letzt solltest du nach html und css validator googeln. Dort bekommst du recht schnell die groben Fehler angezeigt und kannst sie dann ausbessern.
Wenn der Validator dir keine Fehler mehr anzeigt und du trotzdem ein Problem hast dann kannst du wieder fragen ;)