Problem mit Schriftgröße in Tabellen - Seite 2

raf · #11 (**permalink**) 23.03.2004, 11:31

Hallo,

das tut ja schon langsam weh deine Beiträge zu lesen gg, nein Spass bei seite also, versuchen wir mal es zu lösen.

Wenn ich es richtig aus deinem Quelltext ersehen habe, ist dein maindiv dieser hier

Code:

#pagewidth {
	width:1000px;
	min-width:500px;
	background-color : #fff;
	color: #000;
}

Ok also, das ist sozusagen der container in meinen Augen.
Gut dann füge diesen Container die font-größe hinzu.

Code:

#pagewidth {
	width:1000px;<------ warum das?
	min-width:500px;
	background-color : #fff;
	color: #000;
        font-size:0.8em;

}

So nun sind alle fonts die du nicht definiert hast in der Größe.

pospiech · #12 (**permalink**) 23.03.2004, 12:47

Auf die Idee die Fontsize in den div zu packen bin ich ehrlich gesagt schlicht nicht gekommen

Die Größe mit 1000px habe ich gemacht, damit die Seite auf großen Bildschirmen nicht zu breit ist, und umgekehrt bei kleinen (800) das Menu nicht zerrissen wird.

Ich hoffe ich nerve nicht...
Matthias

raf · #13 (**permalink**) 23.03.2004, 14:02

Nein du nervst nicht, keine Sorge deswegen bin ich ja in diesem Forum um zu helfen, in anderen helfe ich auch aber da geht es nicht um css.

Wie auch immer mach folgendes:

Gibt das Menu eine feste pixelgröße, das linke Menü, dann float:left, und den Inhalt auch float left.

Also brauchts du 2 container
simpel ausgedrückt.

<div id="leftbox">linke seite</div>
<div id="Mainbox">rechte seite</div>

Kannst sie ja auch anders benennen egal.

so, beide boxen float:left, die linke box einen festen wert in px, die rechte in %, alles klar?

ulle · #14 (**permalink**) 23.03.2004, 15:05

http://www.xhtmlforum.de/viewtopic.php?p=3253

schau Dir das mal an, wegen den 1000px Breite

gerrit · #15 (**permalink**) 23.03.2004, 22:02

Zitat:

Zitat von ulle

line-heigh: 100%

ist die Höhe einer Zeile bezogen auf die errechnete / angegebene font-size. [100% = DEFAULT]

Nope. 100% ist keinesfalls default, sondern 133% beim body, jedenfalls laut default-Stylesheet des W3C. Bei einzelnen Implementation kann das geringfügig abweichen, ist jedoch nie 100%.

Bei line-height lassen sich entweder längenangaben (zB in px) angeben, oder Faktoren. Bei letzterer Möglichkeit gibt es 3 Alternativen: direkt einen Faktor angeben, mit dem die Schriftgröße des Elements multipliziert wird, oder eine Prozentangabe (die auf die Schriftgröße bezogen ist!) angeben, was aufs selbe hinaus kommt.

Beispiel:

body {font-size: 12px;line-height: 1.33}
entspricht einer line-height von 16px, ebenso wie
body {font-size: 12px;line-height: 133%}

Bei einer line-height von 100% wäre kein Abstand zwischen den einzelnen line-boxes, was sehr unschön zu lesen ist (bei Fließtext)

ulle · #16 (**permalink**) 24.03.2004, 09:22

Zitat:

Zitat von gerrit

Nope. 100% ist keinesfalls default, sondern 133% beim body, jedenfalls laut default-Stylesheet des W3C. Bei einzelnen Implementation kann das geringfügig abweichen, ist jedoch nie 100%.

Stimmt was Gerrit schreibt

Angeregt durch den Einwand von Gerrit habe ich mal einen kleinen Workaround veranstaltet, und siehe da meine CSS-Literatur hat gelogen.

So kann es jeder mal nachvollziehen

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
<head><title>Titel</title> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 

<style type="text/css">	<!--
	html,body	{
		padding: 0px;
		margin: 0px;
		background-color: #FF9922;
		color: #000000;
/*		font-family: "Trebuchet MS",Verdana, Geneva, Arial, Helvetica, sans-serif;
*/		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 100%;
	}
	div {
		margin: 25px;
		border: 1px solid #000000;
		padding: 10px;
		background-color: #FFFFFF;
	}
	p {	
		padding: 1em 0;
		font-size: 0.7em;
	}
	p.l80 	{ line-height: 80%;	}
	p.l100 	{ line-height: 100%;}
	p.l133 	{ line-height: 133%;}
	p.l150 	{ line-height: 150%;}
	p.l200 	{ line-height: 200%;}
	span {	background-color: #FFCC00;}
	-->
</style>
</head><body><div>


[delault]

Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt</p>
<p class="l100">[line-height: 100%]

Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt</p>
<p class="l80">[line-height: 80%]

Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt</p>
<p class="l133">[line-height: 133%]

Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt</p>
<p class="l150">[line-height: 150%]

Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt</p>
<p class="l200">[line-height: 200%]

Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt
Es wird nicht nur der <span>Header</span> an den Browser geschickt</p>
</div></body></html>

jorainbo · #17 (**permalink**) 02.08.2005, 12:40

Ich habe aktuell einen anderen aber ähnlichen Fall.

ich muss ein Layout mit vorgegebenen Templates eines CMS machen (bitte keine Diskussion ob Tabellen sinnvoll sind, sie sind nunmal da und die Templates auch nicht veränderbar, zumindest nicht auf die Schnelle. Ist ein Mandantensystem bei dem 100 Mandanten die gleichen Templates verwenden, das kann man nicht einfach ändern, hat zu große Auswirkungen).

Nun aber zum Problem.

Der Komplette Inhaltsbereich ist mit einer Tabelle umgeben.

als body habe ich font-size: 101% genommen

Nun habe ich angegeben

td { font-size: 0.8em }

damit "normale" Schrift in einer Tabelle eben diese Größe hat und skalierbar ist.

Hat auch soweit im IE und Firefox gleich ausgesehen.

Nun wurde in den Templates etwas am Doctype geändert, und zwar wurde die URI eingefügt, also:

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

Seitdem sind die Schriften auf einer Seite winzig klein im Firefox!

Ich hab etwas rumgetestet....auf dieser einen Seite baut das Template eine weitere Tabelle in die erste Tabelle da dort zusätzliche Spalten verwendet werden. Die Inhalte stehen also in

Code:

<td><table><tr><td>.....

Was macht FF nun seit die URI drin steht. Selbst bei gleichen Tags wird die angegebene font-size abhängig vom Elternelement genommen.

Er rechnet also für die äußere Zelle (td) 0.8em x 0.8em (für die innere Zelle) und alles wird winzig klein.

Ist das schon jemand aufgefallen? Wie kann ich das umgehen? Der IE rechnet den 0.8em Wert nur einmal. Ich kann aber den Wert für td auch nicht auf 1.0 setzen, dann habe ich auf allen Seiten plötzlich viel zu große Schriften.

Bisher hatte ich das Problem mit dem Absatz Tag der ebenfalls auf 0.8em stand...hatte ich ein Absatz in einer Tabelle wurde die Schrift klein, da td = 0.8 und p = 0.8. Also habe ich in der CSS die abhängige Formatierung

td p { font-size: 1.0em;} verwendet. Das hat gut funktioniert.

Man kann ja aber nicht td td { font-size: 1.0em;} schreiben...man kann schon, bringt aber nichts..

Irgendwelche Ideen, wie ich da in beiden Browsern dieselbe Schriftgröße hinbekomme?

Danke und Grüße
Jorainbo

ulle · #18 (**permalink**) 02.08.2005, 12:56

Zitat:

als body habe ich font-size: 101% genommen

Die Evolution hat uns belehrt => 100.01%

Zitat:

Man kann ja aber nicht td td { font-size: 1.0em;} schreiben...man kann schon, bringt aber nichts..

Wieso nicht?

Falls Du nun ein Problem mit Schriftgrößenvererbung hast so kannst Du ein die Vererbung mit CSS wieder aufheben.

Code:

td
       { font-size: .8em; }

td td
       { font-size: 1em; }

Somit werden td-Elemente die innerhalb eines td-Elementes stehen nicht weiter verkleinert.

Hier ein weitere THREAD über Schriftgrößenvererbung

ulle · #19 (**permalink**) 02.08.2005, 13:05

So habe es nun getestet!

OS: WinXP SP2 / FF1.06

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/


*			{
			margin:  0;
			padding: 0;
			
			border-collapse:collapse;
			border-spacing: 0;
			}

		
html,
body		{
			color:		#000000;
			background:	#EEEEEE;
			
			line-height: 1.45;
			}

body		{
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}
			
			
td			{
			font-size: .8em;
			
			background-color: #FF9922;
			}			

td td		{
			font-size: 1em;
			
			background-color: #2299FF;
			}			


/*]]>*/
</style>

</head><body>

<table>
	<tr><td>font-size: .8em;</td></tr>
	<tr><td>
		<table>
			<tr><td>font-size: 1em;</td></tr>
		</table>
	</td></tr>
</table>

</body></html>

jorainbo · #20 (**permalink**) 02.08.2005, 14:19

Zitat:

Zitat von ulle

Die Evolution hat uns belehrt => 100.01%

Du hast natürlich recht, war auch ein vertipper

Zitat:

Wieso nicht?

Falls Du nun ein Problem mit Schriftgrößenvererbung hast so kannst Du ein die Vererbung mit CSS wieder aufheben.

Code:

td
       { font-size: .8em; }

td td
       { font-size: 1em; }

Somit werden td-Elemente die innerhalb eines td-Elementes stehen nicht weiter verkleinert.

Hier ein weitere THREAD über Schriftgrößenvererbung

Absolut krass, ich hatte das natürlich als erstes getestet, deshalb stand es auch in meinem ersten Beitrag und es hatte gar keinen Effekt....nun nach deinem Beitrag habe ich es nochmal versucht und siehe da.... es geht...

Danke, ohne dich hätte ich es nicht nochmal versucht!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
td Tags unterschiedlich für mehrere Tabellen	Michi_R	CSS	9	21.05.2013 18:24
Schriftgröße Ingame Problem	Mucke	Offtopic	7	22.02.2011 19:48
Tabellen Problem Firefox	JoergB	CSS	8	14.02.2011 23:07
Zweimal Span - Problem mit der Schriftgröße	greenslot	CSS	1	07.01.2011 22:04
Layout Problem ohne Tabellen	Alex	CSS	6	03.10.2003 15:26