Page 1 of 1

Schriftgrößen im Internet Explorer

Posted: Thu Feb 23, 2006 7:48 pm
by cherchri
Hallo Joomla!-Freunde!

Nach längerer Zeit "Template"Abstinenz bin ich wiedermal an einem neuen Template dran. Und wie meistens (immer?) schlägt der IE für Windows aus der Reihe. Ich habe versucht eine Art Liqid Design zu probieren und die Schriftgröße für die Seite mittels einer absoluten px Angabe im übergeordneten Div "#all" und einer weiteren relativen %Angabe im untergeordneten KindDiv "#around" definiert. So - dachte ich - kann ich die Schriftgröße (vom Benutzer) dynamisch verändern lassen, die relativen Größenverhältnisse stimmen aber immer. Dachte ich.
Aber:
Schon jetzt, wo ich vorerst noch mit unterschiedlichen Schriftgrößen für die gesamte Seite experimentiere, lässt nur der IE die Schriftgröße im "#main" Div immer gleich. Alle anderen Browser ändern je nach %Angabe im "#around" Div die Schriftgröße für die gesamte Seite, inklusive aller %Größenverhältnisse. Nur beim IE wird diese Angabe quasi nicht in das "#main" Div hinein vererbt. Was mir besonders interessant erscheint: In diesem Div wird der "mainbody" angezeigt, und Joomla gibt den Inhalt bekanntlich (noch) in Tabellen gepackt aus.
Ich habe noch nie davon gehört, dass Tabellen im IE die Vererbung unterbrechen würden. Hat jemand eine Idee oder einen Hinweis, Links, etc..?
Ich danke schon mal für eure Hilfe!

cherchri

Hier der HTML Code ... nur das Wichtigste...

Code: Select all

<body>
<div id="all">
<div id="around"><!-- container rund herum-->
		<div id="top">
			<div id="user1"><?php mosLoadModules ( 'user1', -2 ); ?></div>
			<div id="user2"><?php mosLoadModules ( 'user2', -2 ); ?></div>
			<div id="user3"><?php mosLoadModules ( 'user3', -2 ); ?></div>
		</div>
		<div id="second">
			<div id="sec_left"><?php echo $mosConfig_live_site;?></div>
			<div id="sec_right">
				<div id="pathway"><?php mosPathWay(); ?></div>
				<div><?php mosLoadModules ( 'sec_right', -2 ); ?></div>
			</div>
		</div>
		<div id="inhalt">
			<div id="left"><!-- container links-->
				<?php mosLoadModules ( 'left', -2 ); ?>
			</div>
			<div id="main"><!-- container mit inhalt-->
				<?php mosMainBody(); ?>
			</div>
		</div>
		<div id="footer">
			<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
		</div>
</div>
</div>
</body>
und der CSS Code, ebenso nur in den Ausschnitten, die betroffen sind:

Code: Select all

body {
	width: 100%;
	font-family: "Tahoma", sans-serif; /*schriftarten*/
	height: auto;
	}
table {
	width: auto !important; /*bringt alle tabellen in die container */
	}
#all {
	font-size: 12px;
	}
#around { /*rundherum - zentriert mit negativen rand*/
	position: absolute;
	width: 90%;
	left: 50%;
	margin-left: -45%;
Da ist die Einstellung, die ich verändere, ohne das der IE irgendwelche Änderungen zeigt. Egal, welchen %Wert oder EM Wert ich angebe, Im IE bleibt immer alles gleich.

Code: Select all

font-size: 100%;
	}
#main  {/*keine angaben von nöten - hier ist der mainbody eingehängt*/

	}
Zu den Attachments:
1. Firefox: Divs hervorgehoben, Schriftgröße 100%
2. IE: Schriftgröße 100%... soweit so gut, abgesehen von den "normalen" Unterschieden.
3. IE: Schriftgröße kleiner 100% ... alle Modulinhalte werden verkleinert angezeigt, nur im "#main" Div bleibt alles gleich groß
4. Firefox: Schriftgröße kleiner 100%, alle Schrift wird verkleinert. So soll's sein.

Re: Schriftgrößen im Internet Explorer

Posted: Thu Feb 23, 2006 10:44 pm
by StephanK
Soweit ich weis skaliert der IE keine Angaben die in px gemacht werden. Oft wird als Ausgangsschriftart 101% angegeben (101% wegen eines darstellungsfehlers in Opera).
Wenn dann die nachfolgenden Angaben in % oder em engegeben werden, sollte es eigendlich funktionieren.

Re: Schriftgrößen im Internet Explorer

Posted: Fri Feb 24, 2006 5:38 am
by MadeMyDay
Hi,
Alle anderen Browser ändern je nach %Angabe im "#around" Div die Schriftgröße für die gesamte Seite
.

Das tun sie auch wenn Du strikt alles in Pixel angibst.
Nur beim IE wird diese Angabe quasi nicht in das "#main" Div hinein vererbt.
Würde es wahrscheinlich schon, aber erst 12 px, dann 100%... sind immer noch 12px :D  Nein, mal im Ernst. Abgesehen von Deinen unnötigen DIVs (was bringt #all und dann #around wenn sie direkt ineinander verschachtelt sind und sich sonst nichts ändert? Genauso mit
#main  {/*keine angaben von nöten - hier ist der mainbody eingehängt*/

}
wenn nichts nötig ist, lass es weg. Je mehr unnötige Angaben da stehen, desto eher verliert der IE die Lust bzw verlässt den Standard.
Ich habe noch nie davon gehört, dass Tabellen im IE die Vererbung unterbrechen würden.
Auch wenn Du nicht davon gehört haben solltest... Schau´s Dir mal im 5er an, da wird spätestens nach dem dritten Table Tag alles vergessen... Und der 6er ist auch nur marginal besser was Standards angeht. btw:
Warum ein DIV außenrum wenn Du mit -2 eh eins generierst?

Gruß Marc

Re: Schriftgrößen im Internet Explorer

Posted: Fri Feb 24, 2006 8:50 am
by cherchri
Hallo Stephan, hallo Marc!
Hallo Leser!

Danke für die Inputs! Der Hinweis mit den überflüssigen DIVs hat mich auf die Lösung gebracht.

Die Schriftgrößenangabe habe ich ganz oben in der ersten Angabe gemacht:

Code: Select all

	* {
	margin: 0;
	padding: 0;
	font-size: 101.01%;
	font-family: "Tahoma", sans-serif; /*schriftarten*/
	}
Da darf - logischerweise - keine Angabe in px stehen.
Und die relative Angabe steht dann im "#around" DIV:

Code: Select all

#around { /*rundherum - zentriert mit negativen rand*/
	position: absolute;
	width: 90%;
	left: 50%;
	margin-left: -45%;
	font-size: 67%;
	}
"#all" hat sich damit erledigt ... das Experiment war also unnötig (man lernt dazu!) Bezüglich der anderen "überflüssigen" DIV's sind noch nicht alle Einstellungen getroffen, sodass diese vielleicht noch nötig werden (könnten).
Aber die Lektion ist mir jetzt klar: Unnötiges raus...

Danke
cherchri

Re: Schriftgrößen im Internet Explorer

Posted: Thu Mar 09, 2006 10:34 am
by steinefrenz
Zum Internet Explorer gibt es mehrere Dingen zu beachten:
(1) Beachte das die relativen Angaben immer zusammen 100% ergeben (Padding wird oftmals vergessen !).
(2) Bei Vererbung unbedingt den ganzen KlassenPfad angeben

Code: Select all

#meindiv ul.nav li a.active {color: #abc; } 


Herzliche Grüße

Michael
http://www.24ix.de