CSS Stylesheet - Schrift

Hallo zusammen,

ich habe mal eine richtig "dumme" Anfängerfrage. Die Seite die ich bauen soll ist sehr CSS lastig.
Hier erstmal eines der Templates:

<!-- DOKUMENT_BODY start-->
<!-- wrapper -->

<div id="wrapper">
	<!-- sub menu containing nonpublic areas -->
	<div id="submenu">

		<div id="search">
			<form action="#" method="post">
				<span>Search:</span>
				<input type="text" name="" value="" />
				<input type="submit" value=" Go " />
			</form>
		</div>

	<ul id="navtop">
			###BLUEMENU###
	</ul>
</div>

	<!-- main menu -->
	<div id="mainmenu">
		<table cellpadding="0" cellspacing="0">
			<tr>
					<!-- linkes Menu -->
				<td id="mainmenu-td-left">		
						###MAINMENU-L###
				</td>
					<!-- Mittleres Menu -->
				<td id="mainmenu-td-center">
						###MAINMENU-C###	
				</td>
					<!-- Rechtes Menu -->
				<td id="mainmenu-td-right">
						###MAINMENU-R###
				</td>
			</tr>
		</table>	
	</div>

	<!-- header / logo -->
	<div id="header" style="background:#8FA0BA scroll repeat 0 0;"></div>
	
	<!-- content area containing floating div containers -->
	<div id="content">
		<table id="content-table" cellpadding="0" cellspacing="10">
			<tr>
				<td width="33%" id="content-left">
					<div id="textcolleft" class="scrollable">
						###CONTENT_LEFT###
					</div>
				</td>
				<td width="34%" id="content-center">
					<div id="textcolcenter" class="scrollable">
						###CONTENT_CENTER###
					</div>
				</td>
				<td width="33%" id="content-right">
					<div id="textcolright" class="scrollable">
						###CONTENT_RIGHT###
					</div>
				</td>
			</tr>
		</table>
	</div>
	
	<!-- footer -->
	<div id="footer1">###FOOTER_1###</div>
	<div id="footer2">###FOOTER_2###</div>
</div>
<script language="javascript" type="text/javascript">
<!--
	var scrheight = document.body.clientHeight - 363;

	document.getElementById('textcolleft').style.height = scrheight + "px";
	document.getElementById('textcolleft').style.overflow = "auto";

	document.getElementById('textcolcenter').style.height = scrheight + "px";
	document.getElementById('textcolcenter').style.overflow = "auto";

	document.getElementById('textcolright').style.height = scrheight + "px";
	document.getElementById('textcolright').style.overflow = "auto";
// -->
</script>
<!-- DOKUMENT_BODY ende-->

Das Menü und alles läuft wunderbar, bis auf die Schriftgröße. Die Farben, und Grafiken die im CSS definiert sind werden auch angezogen aber keine einzige Schrift, genau das selbe im Content!

In diesem Post ist ein Auszug aus dem CSS wie ich das Menü definiere:
#47379
und auch ein Auszug aus meinem Typoscript. Der Witz ist, im Firefox wird die Seite wunderschön dargestellt nur im IE nicht!

Ich glaube es liegt am CSS da ich z.B. #navlinks ul li wahrscheinlich nicht anspreche. Ist das korrekt, bitte ganz dringend um Hilfe.

Danke.

lG
Thomas

Also ich habe jetzt deine beiden Posts gelesen, aber ich werde nicht schlau daraus. Was genau meinst du mit "die Schriften werden nicht angezogen". In dem CSS Schnipsel in dem anderen Thread kann ich keine einzige Schriftdefinition entdecken. Also erklär nochmal was du meinst, dann versuche ich gerne zu helfen.

hallo sorry,

hier ist noch mehr aus dem CSS.

/*
   -------------------------------------------------------
    HTML Elements
   -------------------------------------------------------
*/
   html, body {
      margin:0;
      padding:0;
      width:100%;
      height:100%;
      font-size:10px;
      }
   body {
      font-family:Arial,Helvetica,sans serif;
      font-size:10px;
      margin:0;
      padding:0;
      }
      
   h1 {
      font-size:1.8em;
      margin:0.3em;
      }
   h2 {
      font-size:1.5em;
      margin:0 0 0.7em 0;
      color:#081A50;border-bottom:1px solid #081A50;
      text-indent:12px;
      background:transparent url(../images/background-bullet-h1-blue.gif) scroll no-repeat 0 3px;
      }
   h3 {
      font-size:1.3em;
      color:#00183F;
      }
   h4 {
      font-size:1.2em;
      color:#00183F;
      }
   p {
      font-size:1.1em;
      color:#00183F;
      }
   cite {
      font-size:1.2em;
      display:block;
      margin:0.5em 1em 0.5em 3em;
      }
   img {
      border:0;
      }
   table {
      width:94%;
      }
   td {
      font-size:12px;
      }

Kannst du damit mehr anfangen? ich schick sonst gern noch mehr.

Gruß

Also dein einziges Problem ist, dass die Schriften im IE nicht korrekt dargestellt werden? Speziell die Größe?

Das liegt daran, dass die Schriftgröße im body als px angegeben ist. Der IE kann die dann nicht mehr relativ in der Größe ändern.

Als Beispiel

deine h1 soll 1.8em groß sein, d.h. 10px mal 1,8 oder 18px, das geht im FF aber IE bleibt bei 10px. Du musst also entweder alles in px angeben ODER was die saubere Lösung ist, direkt im body eine relative Größe anzugeben. Dabei sollte mit font-size: 62.5%; bei den meisten Browsern in der Standardeinstellung genau 10px rauskommen, nur eben, dass der IE das auch skalieren kann.
Außerdem gibt es im IE einen Bug, der die Größe nicht in Tabellen vererbt, d.h. du müsstest mit deinen Tabellen ein bisschen experimentieren und denen vielleicht noch mal extra eine Schriftgröße zuweisen.

Ah super danke.

So im IE sind nun die Schriften beinahe schön. Nun habe ich ja meine Seite in einen <div id="wrapper"> gesteckt, damit sich die Höhe immer anpasst (über Java). Nur habe ich unter dem Footer noch einen Rand der ungefähr so hoch ist wie der footer.. ich dreh noch durch hier...

Aber vielen Dank für den Tip mit der Schrift!

Gruß
Thomas