XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   Problem mit Schriftgröße in Tabellen (http://xhtmlforum.de/showthread.php?t=32332)

raf 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 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 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 23.03.2004 15:05

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

schau Dir das mal an, wegen den 1000px Breite

gerrit 23.03.2004 22:02

Zitat:

Zitat von ulle
line-heigh: 100% :arrow: 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 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 :arrow:

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 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 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 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 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!


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:04 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019