CSS-Anzeige funktioniert nicht

bluefox

Aus irgendeinem Grund interpretiert der Firefox 1.0 bei mir keine CSS-Elemente.
Beispiel-Code-Fragment dazu :

Code

<head>
		<meta http-equiv='Content-Type' content='text/html; charset='utf-8'>
		<!-- ... -->
		<style type='text/css'>
			<!--
			 a.black09             { font-family:Arial; color:#000000; font-size:9px; font-weight:normal; }
			 a.red10b              { font-family:Arial; color:#9D3229; font-size:10px; font-weight:bold; }
			 a.red11               { font-family:Arial; color:#9D3229; font-size:11px; font-weight:normal; }
			 .texthead             { font-family:Arial; color:#9D3229; font-weight=bold; line-height=14px; }
			 -->
		</style>
	</head>

Alles anzeigen

Geht leider nicht (IE zeigts richtig an)
Wer weiß eine Antwort ?

Belly

Hast du vielleicht einen Link zur kompletten Seite für uns?
Ins Blaue zu raten ist immer so schwierig.

Spontan fällt mir auf, dass man üblicherweise <style type="text/css"> schreibt, allerdings bin ich mir gerade nicht sicher, ob die Variante mit einfach Strichen statt Hochkommas nicht auch erlaubt ist.
Kannst es ja mal probieren.

Edit:
font-weight=bold; line-height=14px; --> Da ist der Fehler. Statt der "=" gehören Doppelpunkte.

bluefox

Hi Belly,

danke für die schnelle Antwort.
Die " haben nicht funktioniert. Hätte mich auch gewundert ...
Die Seiten sind noch nicht online.
Anbei ein ausführlicherer Code. Ein Vergleich mit FF1.0 und IE zeigt bei mir deutlich, dass die class-Attribute alle nicht ziehen ...

HTML

<html>
	<head>
		<title>www.pixolver.com - Kontakt</title>
		<meta http-equiv='Content-Type' content='text/html; charset='iso-8859-1'>
		<meta name='author' content='Martin Quedzuweit'>
		<meta name='keywords' lang='en' content='piXolver,HTML,ASCII,pic2HTML'>
		<meta name='keywords' lang='de' content='piXolver,HTML,ASCII,pic2HTML'>
		<meta name='date' content='2004-10-19'>
		<meta name='robots' content='index'>
		<style type='text/css'>
			<!--

			 a.titleblack          { font-family:Arial; text-decoration:none; color:#000000; font-size=20px; font-weight=bold; }
			 a.titleshadow         { font-family:Arial; text-decoration:none; color:#909090; font-size=20px; font-weight=bold; }
			 a.menulink            { font-family:Arial; text-decoration:none; color:#444444; background-color:#E8E8E8; font-size=10px; font-weight=bold; width=140px; height=14px; padding-left=3px; border-top-width:3px; border-color:#D0D0D0; border-top-style:solid; }
			 a.submenulink         { font-family:Arial; text-decoration:none; color:#444444; background-color:#E8E8E8; font-size=10px; font-weight=normal; width=140px; height=14px; padding-left=15px; border-top-width:3px; border-color:#D0D0D0; border-top-style:solid; }
			 a.menulinkX           { font-family:Arial; text-decoration:none; color:#444444; background-color:#E8E8E8; font-size=10px; font-weight=bold; width=10px; height=14px; border-top-width:3px; border-color:#D0D0D0; border-top-style:solid; }
			 a.toplink             { font-family:Arial; text-decoration:none; color:#555555; background-color:#BBBBBB; font-size:10px; font-weight:bold; width=auto; height=14px; padding-left=5px; padding-right=5px; padding-top=1px; padding-bottom=2px; border-top-width:2px; border-right-width:2px; border-color:#D0D0D0; border-top-style:solid; border-right-style:solid; }
			 a.toplink:hover       { font-family:Arial; text-decoration:none; color:#FFFFFF; background-color:#BBBBBB; font-size:10px; font-weight:bold; width=auto; height=14px; padding-left=5px; padding-right=5px; padding-top=1px; padding-bottom=2px; border-top-width:2px; border-right-width:2px; border-color:#D0D0D0; border-top-style:solid; border-right-style:solid; }
			 a.toplinkleft         { font-family:Arial; text-decoration:none; color:#555555; background-color:#BBBBBB; font-size:10px; font-weight:bold; width=auto; height=14px; padding-left=5px; padding-right=5px; padding-top=1px; padding-bottom=2px; border-top-width:2px; border-right-width:2px; border-left-width:2px; border-color:#D0D0D0; border-top-style:solid; border-right-style:solid; border-left-style:solid; }
			 a.toplinkleft:hover   { font-family:Arial; text-decoration:none; color:#FFFFFF; background-color:#BBBBBB; font-size:10px; font-weight:bold; width=auto; height=14px; padding-left=5px; padding-right=5px; padding-top=1px; padding-bottom=2px; border-top-width:2px; border-right-width:2px; border-left-width:2px; border-color:#D0D0D0; border-top-style:solid; border-right-style:solid; border-left-style:solid; }
			 a.toplinkact          { font-family:Arial; text-decoration:none; color:#555555; background-color:#D0D0D0; font-size:10px; font-weight:bold; width=auto; height=14px; padding-left=5px; padding-right=5px; padding-top=1px; padding-bottom=2px; border-top-width:2px; border-right-width:2px; border-color:#D0D0D0; border-top-style:solid; border-right-style:solid; }
			 a.black09             { font-family:Arial; color:#000000; font-size:9px; font-weight:normal; }
			 a.red10b              { font-family:Arial; color:#9D3229; font-size:10px; font-weight:bold; }
			 a.red11               { font-family:Arial; color:#9D3229; font-size:11px; font-weight:normal; }
			 a.actsite             { font-family:Arial; color:#000000; background-color:#BBBBBB; font-weight=bold; font-size=10px; height=14px; width=140px; padding-left=3px; border-top-width:3px; border-color:#D0D0D0; border-top-style:solid; }
			 a.actsiteX            { font-family:Arial; color:#9D3229; background-color:#BBBBBB; font-weight=bold; font-size=10px; height=14px; width=10px; border-top-width:3px; border-color:#D0D0D0; border-top-style:solid; }
			 a.headline            { font-family:Arial; color:#9D3229; background-color:#FFFFFF; font-weight=bold; font-size=10px; height=14px; width=446px; border-top=10px solid #D0D0D0; border-bottom=2px solid #D0D0D0;}
			 a.text                { font-family:Arial; text-decoration:none; color:#000000; background-color:#E8E8E8; font-weight=normal; font-size=10px; height=auto; width=446px; padding-left=8px; padding-right=8px; padding-top=8px; padding-bottom=12px; }
			 a.mail                { font-family:Arial; text-decoration:none; color:#000000; background-color:#E8E8E8; font-weight=bold; font-size=10px; height=auto; width=446px; padding-left=8px; padding-right=8px; padding-top=8px; padding-bottom=12px; }

			 .texthead             { font-family:Arial; color:#9D3229; font-weight=bold; line-height=14px; }

			 -->
		</style>
	</head>
<body bgcolor="#D0D0D0">


<div style="position:absolute; top:0px; left:0px; background-color:#BBBBBB; width='800px'; height='75px'" >
<!-- hier fehlt noch was -->
</div>
<!-- piXolver -->
<div style="position:absolute; top:22px; left:73px;">
<div style="position:absolute; top:3px; left:3px;">
<a class="titleshadow">piXolver</a>
</div>
<div style="position:absolute; top:0px; left:0px;">
<a class="titleblack">piXolver</a>
</div>
</div>
<!-- nothing but HTML -->
<div style="position:absolute; top:43px; left:85px;">
<a class="red11">nothing&nbsp;but&nbsp;HTML</a><br/>
</div>
<!-- copyright -->
<div style="position:absolute; top:5px; left:693px;">
<a class="black09">©&nbsp;October&nbsp;2004</a>
</div>
<div style="position:absolute; top:15px; left:713px;">
<a class="black09">by&nbsp;M.Quedzuweit</a>
</div>
<!-- top menu -->
<div style="position:absolute; top:58px; left:188px;">
<div style="position:absolute; top:0px; left:0px;">
<a class="toplinkleft" href="index.html">Startseite</a><a class="toplink" href="ueberpixolver.html">Über&nbsp;piXolver</a><a class="toplink" href="download.html">Download</a><a class="toplink" href="gallerien.html">HTML&#x2011;Gallerien</a><a class="toplink" href="onlinehilfe.html">Online&#x2011;Hilfe</a><a class="toplink" href="lizenz.html">Lizenz</a><a class="toplinkact">Kontakt</a>
</div>
</div>
</div>
<!-- =========================================================================================================	site header end -->
<!-- =========================================================================================================	site body begin -->
<!-- body menu -->
<div style="position:absolute; top:90px; left:23px;">
<div style="position:absolute;top:0px; left:0px;">
<table width="160px" cellspacing="0px" cellpadding="0px" border="0">
	<tr><td width="10px"><a name="menu0" class="menulinkX"> </a></td><td><a class="menulink" onMouseOver="menu0.innerHTML='&#x25BA;'" onMouseOut="menu0.innerHTML=' '" href="index.html">Startseite</a></td></tr>
	<tr><td><a name="menu1" class="menulinkX"> </a></td><td><a class="menulink" onMouseOver="menu1.innerHTML='&#x25BA;'" onMouseOut="menu1.innerHTML=' '" href="ueberpixolver.html">Über&nbsp;piXolver</a></td></tr>
	<tr><td><a name="menu2" class="menulinkX"> </a></td><td><a class="menulink" onMouseOver="menu2.innerHTML='&#x25BA;'" onMouseOut="menu2.innerHTML=' '" href="download.html">Download</a></td></tr>
	<tr><td><a name="menu3" class="menulinkX"> </a></td><td><a class="menulink" onMouseOver="menu3.innerHTML='&#x25BA;'" onMouseOut="menu3.innerHTML=' '" href="gallerien.html">HTML&#x2011;Gallerien</a></td></tr>
	<tr><td><a name="menu4" class="menulinkX"> </a></td><td><a class="menulink" onMouseOver="menu4.innerHTML='&#x25BA;'" onMouseOut="menu4.innerHTML=' '" href="onlinehilfe.html">Online&#x2011;Hilfe</a></td></tr>
	<tr><td><a name="menu5" class="menulinkX"> </a></td><td><a class="menulink" onMouseOver="menu5.innerHTML='&#x25BA;'" onMouseOut="menu5.innerHTML=' '" href="lizenz.html">Lizenz</a></td></tr>
	<tr><td><a class="actsiteX">&#x25BA;</a></td><td><a class="actsite">Kontakt</a></td></tr>
</table>
</div>
</div>
<!-- body main -->
<div style="position:absolute; top:83px; left:190px;">
<a class="headline">&#x25BC;&nbsp;<font color="000000">Was mache ich, wenn ich Fragen zu piXolver habe ?</font></a><br/>
<a class="text"><span class="texthead">Bei allen Fragen zu piXolver wenden Sie sich bitte an folgende E-Mail-Adresse:<br/></a><br/>
<a class="mail" href="mailto:service@pixolver.com"><center>service@pixolver.com</center></a><br/>
<a class="text">Ihre Anfrage wird sobald wie möglich bearbeitet. Entweder erhalten Sie eine Antwort per E&#x2011;Mail oder wir nehmen in speziellen Fällen auch telefonisch Kontakt zu Ihnen auf, wenn Sie eine Telefonnummer angegeben haben.</a><br/>
</div>
<!-- =========================================================================================================	site body end -->
</body></html>

Alles anzeigen

Woran könnte es also liegen ?
Gruß Bluefox

wkraemer

In der Styledefinition darf nicht stehen:
font-size=20px;
sondern:
font-size:20px;

Der Fehler tritt bei vielen Definitionen auf.

Gruß
Wolfgang

bluefox

Hallo Wolfgang,

danke für den Hinweis. Nach Korrektur der Gleichheitszeichen sieht es zwar etwas besser aus, allerdings werden die style-Attribute height und width sowie diejenigen zur Positionierung wohl nicht richtig ausgewertet ? Auf jeden Fall überlappt die Anzeige der Zeilen und wird nicht exakt positioniert.
Muss man auf noch mehr achten ?

Gruß Bluefox

xeen

so wie sich das anhört: boxmodel.
Sagt dir das was? Nein? => Forensuche oder warten bis Bugcatcher die Links hier postet

wenn's das boxmodel ist, dann hast du falsch für den ie gecodetet (damit's der wie gewollt anzeigt), aber eigentlich ist es falsch - deswegen zeigt's der fx auch nicht so an wie dus haben willst.
verstanden?

wkraemer

Es sind immer noch viele '=' statt ':' in deinen Definitionen.

Dann glaube ich passen irgendwie die Schriftgröße und die Tabellenhöhen nicht richtig zusammen.

Mit folgenden Veränderungen wurden wenigstens die Dreiecke ansatzweise angezeigt:

Code

<table width="160" cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td width="100">
    <a class="menulinkX"
    id="menu0">	&nbsp;</a>
  </td>
  <td>
   <a class="menulink" onmouseover="menu0.innerHTML='&#x25BA;'"
        onmouseout="menu0.innerHTML=' '" href="index.html">Startseite</a>
  </td>
 </tr>

Alles anzeigen

Ob das aber zu einer befriedigenden Lösung führt, kann ich nicht sagen, da habe ich leider auch zu wenig Ahnung von CSS.

Gruß
Wolfgang

bugcatcher

Zitat von xeen

Sagt dir das was? Nein? => Forensuche oder warten bis Bugcatcher die Links hier postet

Immer ich. Ich hab keine ahnung was die seite da macht, oder was dran falsch ist. ist mir zuviel müll zum durchwühlen. bin ich heute zu faul dazu.... einen schönen link hab ich trotzdem ; )

http://www.howtocreate.co.uk/wrongWithIE/

HaMF

den link magst du, oder? :p

ehm ohne mir en code richtig angeschaut zu haben, und nur weil einer Boxmodell und Link gesagt hat:
http://www.css4you.de/wsboxmodell/index.html

bugcatcher

Na aber logo mag ich den. Jede Seite die zeigt wie inkompetent der IE mag ich. ; )

http://www.tantek.com/CSS/Examples/boxmodelhack.html

HaMF

oder auch http://piology.org/ie/

aber nu wieder ontopic^^

bluefox

Hi alle zusammen,

Boxmodel sagt mir schon was - da ich XSL:FO kenne ...
Was mir aber nicht so klar war, sind die "Inkompetenzen" vom IE - zumindest nicht in dieser Ausprägung.
Somit muss ich zugeben, dass ich mit dem Titel dieses Themas dem FF Unrecht getan habe.
Dank an Bugcatcher und HaMF für die Links !

Eine Sache ist mir noch aufgefallen (weiß nicht, ob das wieder an meiner HTML/CSS-Unzulänglichkeit liegt oder ob's der FF wirklich so darstellt):
Wenn man im HTML-Code z.B. ein <div>-Elemnt auf absolut 0 (Null) positioniert (horizontal und vertikal), dann wird horizontal wirklich auf 0 positioniert, aber vertikal bleibt ein kleiner Offset ...

Gruß an alle,
Bluefox

HaMF

kann ich ehrlich gesagt nicht nachvollziehen.

du meinst n code wie
...{position:absolute;
top:0px;
left:0px;}

den positionierts bei mir genau richtig links oben hin, und wenn man (mit der webdeveloper-toolbar) das ganz umrahmen lässt, dann sieht man auch, das das direkt anliegt.

Gruß HaMF

bluefox

Hallo HaMF,

anbei ein sehr einfacher Code, der bei mir den Offset verursacht

HTML

<html>
	<head>
		<title>test</title>
	</head>
	<body bgcolor="#FFFFFF">
		<div style="font-family:'Courier New'; font-size:8px; position:absolute; top:0; left:0;">
			<pre><span style="background-color:#FF0000"> test test test </pre>
		</div>
	</body>
</html>

Es gibt einen Offset von 9 Pixeln - selbst, wenn ich den kompletten Code in eine Zeile schreibe.
Gruß Bluefox

Edit: Jo, jetzt hab' ich's: Das pre-Tag erzeugt den Offset !!!

HaMF

lol MIST nu hab ich das extra abgespeichert, ausprobiert, komm hier zurück und will das mim pre psoten, aber dann les' ich dein edit

k.a. warum mozilla da nen abstand hinmacht, aber margin:0px uberlagert das ja schließlich *schulterzuck*

Gruß HaMF