CSS font-size Bug

Lord Alien

Lt. Junior Grade
Registriert
Apr. 2007
Beiträge
258
Hallo Community,

wie die Überschrift schon sagt habe ich ein Problem mit der Auszeichnung "font-size". Sie verursacht bei mir nämlich einen Anzeigebug, oder mein Quellcode ist einfach falsch :p Da ich eher an zweiters glaube möchte ich euch bitten, das ganze mal anzuschaun.

Und zwar habe ich einen Header definiert:

Code:
/* Header */
.header
{
	margin: 1em;
	padding: 1em;
	background-image:url(pics/header_back.jpg);
	text-align: center;
}

Wie man sieht, hat er zu allen Seiten hin (oben,unten,links,rechts) denn gleichen Abstand. Wenn ich jetzt allerdinigs "font-size" hinzufüge:

Code:
/* Header */
.header
{
	margin: 1em;
	padding: 1em;
	background-image:url(pics/header_back.jpg);
	text-align: center;
	font-size: 44pt;
}

vergrößert sich der Abstand zu allen Seiten. Und das interessante dabei ist: Umso größer die Schriftgröße umso größer auch der Abstand zu den Seite hin.

Wenn ich jetzt das ganze über HTML mach, also mit

HTML:
<font size="44"></font>

wird wirklich nur die Schrift größer und der Div Container wird in Ruhe gelassen. Also genau so wie ichs haben will.

Hier nochmal der komplett valide CSS Code (hab ihn über WC Validator checken lassen):
Code:
@charset "ISO-8859-1";
/*  Alls erstes deshalb stehts wirklich als erstes die Kodierungsinformation */

/* Content */
.content
{
	margin: 0em 1em 1em 14em;
	padding: 1em 1em 1em 1em;
	background-color: #800040;
}
/* Header */
.header
{
	margin: 1em 1em 1em 1em;
	padding: 1em 1em 1em 1em;
	background-image:url(pics/header_back.jpg);
	text-align: center;
	font-size:44pt;
}
/* Navigation */
.navi
{
	float:left;
	width: 10em;
	margin: 0 1em 1em 1em;
	padding: 1em 1em 1em 1em;
	background-image:url(pics/header_back.jpg);
}

Und noch der Code der Seite:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<?php
	// Variable definieren
	$root_path ="";
echo'
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<title>Aliens Admin Tool</title>
<link rel="stylesheet" type="text/css" href="'.$root_path.'css.css">
<style type="text/css">
</style>
</head>
';?>
<body>
<div class="header"><?include ($root_path.'header.php');?> </div>

<div class="navi">	<?include ($root_path.'navi.php');?> </div>

<div class="content">
</div>
</body>
</html>
in den Dateien "header.php" & "navi.php" steht jeweils nur "Header" und "Navigation" drin.

Bin für jeden Tipp dankbar !!

mfg
Alien
 
1. Ist es zu viel verlangt, wenn du einfach ein Link zu einer Beispielseite postest. Warum sollte ich erstmal umständlich deine Codefragmente zusammenkopieren um zu gucken woran es liegen könnte?

2. Du hast Glück, dass dein Problem einfach ist und ich deswegen nichts zusammenkopieren muss.

3. Rate mal, wie sich "1em" berechnet – richtig durch die Schriftgröße.
 
Natürlich hätte ich euch gerne einen Link gepostet, doch leider produziere ich meine Pages immer erst lokal und stelle sie dann erst auf meinen Server .....

Vielen Dank für die Antwort !!
 
Zurück
Oben