WCM Forum - css Darstellungsproblem

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - css Darstellungsproblem (http://www.wcm.at/forum/showthread.php?t=160105)

css Darstellungsproblem

Hallo,

Ich bin gerade dabei die Textgestaltung meiner Homepage css konform zu ändern, habe jedoch das Problem, daß 7punkt große Schrift im IE genauso groß wie 10 punkt Schrift dargestellt wird.

Definiert habe ich folgende Formatvorlagen:

Code:

H2 {

        MARGIN-TOP: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 10pt; MARGIN-BOTTOM: 1pt; COLOR: #ffffff; FONT-STYLE: italic; FONT-FAMILY: Helvetica

}

(Wird bei normalen Überschriften verwendet)

Code:

normal {

        FONT-WEIGHT: normal; FONT-SIZE: 7pt; COLOR: #ffffff; FONT-STYLE: normal; FONT-FAMILY: Verdana

}

(normale Schrift)

Bei mir daheim im Firefox ist alles in Ordnung. Normale Schrift wird ca 1/3 kleiner als der Rest dargestellt.
Wisst ihr, woran das liegt?

Am Browser. Bei den meisten kannst Du definieren, dass er z.B. keinen Font kleiner als 10 Punkte machen soll, da der Text sonst unlesbar wird.

Siehe auch: http://www.w3.org/TR/2002/REC-UAAG10...control-styles Punkt 4.1

pt ist für den Bildschirm nicht wirklich geeignet. 12pt entspricht bei Windows/Linux ungefähr 12 px; beim Mac aber zum Beispiel nur ungefähr 9px! Nimm anstatt "px", wenn du wirklich eine feste Größe vergeben willst; die wird auch von den unterschiedlichen Browsern "richtiger" angezeigt. Noch besser wären aber relative Angaben wie "em" oder "%".

http://aktuell.de.selfhtml.org/artikel/css/fontsize/

gruss,
snowman

Danke für die Tips vorab mal.
Ich habe das Stylesheet testweise mal auf px umgemodelt; allerdings weigert sich der IE immer noch, die Schrift kleiner als die headings anzuzeigen. Dafür jedoch lässt sie diese, wie im link beschrieben nicht mehr verkleinern oder vergrössern, was ja logisch ist.

Der footer bei mir (dessen Schriftgrösse dem normalen Text nur kursiv dargestellt entspricht) allerdings wird in der richtigen Größe dargestellt, läßt sich dem Schriftgrad anpassen, wird allerdings NICHT kursiv dargestellt.

Irgendwie drängt sich bei mri der Verdacht auf, daß das Mistvieh macht, was es will und ihm egal ist, was man definiert.

Kann es ev. daran liegen, daß ihm der Schriftstil Verdana nicht gefällt?

Eher daran, dass irgendwo anders auch noch eine Schriftgroesse definiert wird (man beachte das "cascading" in Cascading Stzle Sheets).

Poste mal den HTML & CSS Source.

Den css source kann ich gleich posten, eine html datei erst am Nachmittag wenn ich wieder daheim bin.

Code:

BODY {

        FONT-SIZE: 14px; BACKGROUND: url(/gfx/1.jpg) #000066 fixed no-repeat right 50%; COLOR: #ffffff; FONT-FAMILY: Helvetica

}

H1 {

        MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 17px; MARGIN-BOTTOM: 6px; COLOR: #ffffff; FONT-STYLE: normal; FONT-FAMILY: Helvetica

}

H2 {

        MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; MARGIN-BOTTOM: 1px; COLOR: #ffffff; FONT-STYLE: italic; FONT-FAMILY: Helvetica

}

normal {

        FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #ffffff; FONT-STYLE: normal; FONT-FAMILY: Verdana

}

kursiv {

        FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #ffffff; FONT-STYLE: italic; FONT-FAMILY: Verdana

}

bold {

        FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #ffffff; FONT-STYLE: normal; FONT-FAMILY: Verdana

}

commenthead {

        FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: red; FONT-STYLE: normal; FONT-FAMILY: Verdana

}

commenttext {

        FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #99ff66; FONT-STYLE: normal; FONT-FAMILY: Verdana

}

nix {

        BORDER-RIGHT: white 3px solid; PADDING-RIGHT: 15px; BORDER-TOP: white 3px solid; PADDING-LEFT: 15px; FONT-WEIGHT: normal; FONT-SIZE: 10px; BACKGROUND: url(/gfx/2.jpg) #000066 fixed no-repeat right 50%; MARGIN-BOTTOM: 15px; PADDING-BOTTOM: 15px; BORDER-LEFT: white 3px solid; COLOR: #ff0000; PADDING-TOP: 15px; BORDER-BOTTOM: white 3px solid; FONT-STYLE: normal

}

A:link {

        COLOR: #dddddd; TEXT-DECORATION: none; x-text-underline: Off

}

A:hover {

        BACKGROUND-COLOR: #0000ff; TEXT-DECORATION: none; x-text-underline: off

}

A:active {

        COLOR: #dddddd; TEXT-DECORATION: none; x-text-underline: Off

}

A:visited {

        COLOR: #dddddd; TEXT-DECORATION: none; x-text-underline: Off

}

Hier nun der Quellcode einer Seite am beispiel der index Seite:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

       "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Statictune - music productions</title>

<meta name="description" content="Statictune - music productions">

<meta name="keywords" content="Music, Musik, Gamemusic, Soundtracks, MT2, Madtracker, Tracker, eAnic, Xenosonic, Ambient, Dance, Trance, Samples, retro">

</head>



<link rel=stylesheet href="/css/default.css" type="text/css">

<table border="0" cellpadding="0" cellspacing="0" width="100%">

  <tr> 

    <td width="100%"> 

<h1>Willkommen 

        auf unseren Seiten!</h1><normal>Wie 

        ihr hierher gefunden habt, ist eigentlich nebens&auml;chlich - wichtiger 

        ist, da&szlig; ihr nun hier seid und hoffentlich ein wenig hier verweilt. 

        Ihr fragt euch nun aber wahrscheinlich ...</normal>

      <hr>

    </td>

  </tr>

  <tr> 

    <td>

<h2>Was bitte ist Statictune?</h2>

      <blockquote> 

        <normal>Statictune sind 

          im Grunde genommen nur 2 Personen, welche beide mittels eines Trackers 

          Musik machen und seit Dezember 2000 gemeinsam Songs mit dem Schwerpunkt 

          Dance/Trance produzieren. Beide Personen und ihre Interessen k&ouml;nnt 

          ihr hier genauer kennenlernen.</normal>

      </blockquote></td>

  </tr>

  <tr> 

    <td height="2"><hr></td>

  </tr>

  <tr> 

    <td> 

<h2>Songs</h2>

      <blockquote>

        <normal>Songs gibt es hier 

          nat&uuml;rlich ebenfalls und zwar hier. 

          Euch steht dabei frei die Songs vorab mal probezuh&ouml;ren um sie danach 

          runterzuladen.</normal>

      </blockquote></td>

  </tr>

  <tr> 

    <td height="2"><hr></td>

  </tr>

  <tr> 

    <td> 

<h2>Forum</h2>

      <blockquote> 

        <normal>Das Forum ist derzeit noch nicht

        er&ouml;ffnet.</normal>

      </blockquote></td>

  </tr>

  <tr>

    <td height="2"><hr></td>

  </tr>

  <tr> 

    <td> 

<h2>Guestbook</h2>

      <blockquote> 

        <normal>Ein G&auml;stebuch 

          gibt es nat&uuml;rlich auch. Bitte nutzt diese auch um eure Kommentare 

          zur Page und ung&uuml;ltige Links zu platzieren!</normal>

      </blockquote></td>

  </tr>

  <tr> 

    <td height="2"><hr></td>

  </tr>

  <tr> 

    <td> 

<h2>thats all</h2>

      <blockquote> 

        <normal>So, damit w&auml;ren 

          die wichtigsten Bereiche mal kurz aufgez&auml;hlt. Falls ihr hier etwas 

          vermisst, dann lasst es uns bitte wissen. Feedback zur Seite bitte an folgende Mail richten: [img]gfx/mail.gif[/img]</normal>

      </blockquote></td>

  </tr>

  <tr> 

    <td height="2"><hr></td>

  </tr>

</table>

</body>

</html>

Also einen Tag "<normal>" kenn ich in HTML 4.01 nicht.

<normal> kommt mir auch leicht spanisch vor.

Wie auch immer, du kannst es auch mal mit font-size:xx-small,small,etc. probieren, dann ist zumindest auch mal relativ zur Standardgröße.

mfg Thomas

Mir fällt grundsätzlich mal auf dass du zwar den </body> tag drin hast, aber <body> nach dem </head> total fehlt.

Unter Umständen kann das am komischen Verhalten Schuld sein.

ad <normal>:

Was der "brauser" nicht kennt, ignoriert er. Der Tag hat somit überhaupt keine Wirkung.