Schrift und Grafiken in IE größer als im Firefox

[hawkmaster]

Hallo zusammen,

ich versuche gerade meine Web Anwendung barrierefrei und mit validem Code zu gestalten.
Alle Tabellen wurden entfernt und das gesamte Layout soll über CSS passieren.

Wenn ich nun die Webseite auf dem gleichen PC einmal mit dem Firefox 3 aufrufe und dann wieder mit dem IE7, scheint beim IE alles etwas größer zu sein. Mir ist klar das auf unterschiedlichen PCs mit unterschiedlicher Auflösung es anders aussehen kann, aber warum auf dem gleichen PC?

Die Styleangaben für die Schrift mache ich so.

  
BODY  {  
color: #1C3382;  
font-family: arial;  
text-decoration: none;  
font-size: 100.01%;  
}  

Was mich noch mehr wundert. Auch Grafiken sind beim IE etwas vergrößert. Diese sollten doch eigentlich genauso aussehen wie beim Firefox oder?

  
<label for="image_remove">&nbsp;</label>  
<input name="image_remove" id="image_remove" type="image" onclick="return removeprn();"  alt="remove" src="../image/jobtk_new/Remove__Trash_48.gif"  title="<? echo $jbtk_39; ?>" />  
<span><?php echo $jbtk_39; ?></span>

Hat jemand eine erklärung warum der IE alles vergrößert?

vielen Dank und viele Grüße
hawk

[suit]

aber warum auf dem gleichen PC?

eventuell weil donnerstag ist oder weil der default zoomfaktor anders eingestellt ist, keine ahnung

Die Styleangaben für die Schrift mache ich so.
BODY  {

BODY != body - zumindest sieht das ein standardkonformer browser so, der ie nimmt das afaik nicht so genau

[code lang=html]
<label for="image_remove">&nbsp;</label>

&nbsp; war noch nie gut um irgendwas zu formatieren, ein geschütztes leerzeichen ist da um umbrüche bei zusammengehörigen dingen zu verhindern - zb werte und einheiten

[hawkmaster]

Hallo suit,
auch dir danke für die Hilfe.

eventuell weil donnerstag ist oder weil der default zoomfaktor anders eingestellt ist, keine ahnung

Nun es passiert leider auch Freitags und der rest der Woche :-)
aber vielleicht kannst du mir trotzdem sagen ob der IE die font-size Angabe mit 100.01% anders interpretiert als der Firefox?

BODY  {
BODY != body - zumindest sieht das ein standardkonformer browser so, der ie nimmt das afaik nicht so genau

OK, habe ich mir gemerkt und werde ich gleich korrigieren.

&nbsp; war noch nie gut um irgendwas zu formatieren, ein geschütztes leerzeichen ist da um umbrüche bei zusammengehörigen dingen zu verhindern -

Diesen Workarround habe ich gemacht, damit der Validator nicht meckert wenn das Label Tag leer ist. Ich möchte halt gerne den beschreibenden text unterhalb des Input bzw. Bildes haben.

vielen Dank und viele Grüße
hawk

[suit]

Nun es passiert leider auch Freitags und der rest der Woche :-)

ich habs mir gedacht :D

aber vielleicht kannst du mir trotzdem sagen ob der IE die font-size Angabe mit 100.01% anders interpretiert als der Firefox?

wäre mir nichts bekannt, ich meine aber gelesen zu haben, dass die 100.01%-schriftgröße irgendwelche bugs hervorruft - was das aber war, weiss ich nicht mehr - gesehen hab ich selbst jedenfalls nix

OK, habe ich mir gemerkt und werde ich gleich korrigieren.

das könnte eben dein problem verursachen, weil firefox das css dann icht anwendet, da BODY != body, der internet explorer zb schon

Diesen Workarround habe ich gemacht, damit der Validator nicht meckert wenn das Label Tag leer ist. Ich möchte halt gerne den beschreibenden text unterhalb des Input bzw. Bildes haben.

was hindert dich daran, in das label etwas sinnvolles zu schreiben und dieses dann per css auszublenden oder an geeignete stelle zu verschieben?

[hawkmaster]

Hallo

wäre mir nichts bekannt, ich meine aber gelesen zu haben, dass die 100.01%-schriftgröße irgendwelche bugs hervorruft - was das aber war, weiss ich nicht mehr - gesehen hab ich selbst jedenfalls nix

Ich dachte gerade durch die 100.01% angabe wird der IE Bug beseitigt oder umgangen der bei 100% passiert?

das könnte eben dein problem verursachen, weil firefox das css dann icht anwendet, da BODY != body, der internet explorer zb schon

Leider brachte eine Änderung auf "body" keine Änderung bei der Schriftgröße.

By the way: Im Firefox kann man wunderbar die Standard Schriftgröße herauslesen. bei mir ist die Standard Schrift Times New Roman Größe 16.
Wie aber kann man das beim IE herausfinden. Habe alles mögliche versucht aber ich finde keine exakte Größenangabe.

was hindert dich daran, in das label etwas sinnvolles zu schreiben und dieses dann per css auszublenden oder an geeignete stelle zu verschieben?

hmm, es ist schon eine Weile her das ich das versucht hatte. Irgendwie hatte ich das nie richtig hinbekommen mit dem Layout. Entweder war die Beschriftung rechts daneben oder darüber oder stimmte das "float" nicht mehr?
Ich werde es mir nochmals anschauen

vielen Dank und viele Grüße
hawk

[suit]

Ich dachte gerade durch die 100.01% angabe wird der IE Bug beseitigt oder umgangen der bei 100% passiert?

ich hab keine ahnung, ich nutze diese form der schriftgrößenvorgabe nicht

Wie aber kann man das beim IE herausfinden. Habe alles mögliche versucht aber ich finde keine exakte Größenangabe.

font-size: 1em; sollte der im browser festgelegten schrifgröße entsprechen

hmm, es ist schon eine Weile her das ich das versucht hatte. Irgendwie hatte ich das nie richtig hinbekommen mit dem Layout. Entweder war die Beschriftung rechts daneben oder darüber oder stimmte das "float" nicht mehr?

ggf kannst du auch ein beispiel herzeigen (eine grafik wies aussehen soll und einen beispielcode wo der fehler auftritt)

[hawkmaster]

Hallo

ich hab keine ahnung, ich nutze diese form der schriftgrößenvorgabe nicht

Darf ich fragen, wie du das dann machst?
Ich habe halt gelesen das man relative Schriftangaben machen soll.

font-size: 1em; sollte der im browser festgelegten schrifgröße entsprechen

habe ich auch versucht, dann ist es genauso wie mit der % Angabe.

vielen Dank und viele Grüße
hawk

[suit]

Darf ich fragen, wie du das dann machst?

siehe unten

Ich habe halt gelesen das man relative Schriftangaben machen soll.

ja

font-size: 1em; sollte der im browser festgelegten schrifgröße entsprechen
habe ich auch versucht, dann ist es genauso wie mit der % Angabe.

sollte auch keinen unterschied machen - zumindest wäre mir diesbezüglich nix aufgefallen

ingo schreibt von einem bug der mit 1em oder 100.01% aufritt, jedoch nich mit 100.1% - ich kann aber nicht nachvollziehen, welcher (und beschreiben tuts ingo leider auch nicht)

[Cheatah]

Hi,

Mir ist klar das auf unterschiedlichen PCs mit unterschiedlicher Auflösung es anders aussehen kann, aber warum auf dem gleichen PC?

jedes System kann andere Einstellungen haben, jedes Programm auch, und jeder Browser kann völlig legitim andere Default-Werte für CSS und die Darstellung an sich haben. Schau Dir mal ein paar verschiedene Schriftgrade mit und ohne Fettdruck im Safari an (egal ob Windows oder Mac).

Die Styleangaben für die Schrift mache ich so.
BODY  {

Deinem HTML-Code nach zu urteilen benutzt Du XHTML. In XHTML gibt es kein <BODY>-Element, dieser Selektor führt also ins Leere. Verlasse Dich nicht auf Fehlerkorrekturen großzügiger Browser.

font-family: arial;

Wenn die installierte Schriftart "Arial" statt "arial" heißt, ist nicht mehr gewährleistet, dass sie hierdurch angesprochen wird. Darüber hinaus solltest Du *immer* und *überall* die Liste(!) der angegebenen Schriftarten auf eine generische Schriftfamilie enden lassen.

Was mich noch mehr wundert. Auch Grafiken sind beim IE etwas vergrößert. Diese sollten doch eigentlich genauso aussehen wie beim Firefox oder?

Sind die Grafiken vergrößert, oder haben sie Unterlängen, wie es bei Text üblich ist?

<label for="image_remove">&nbsp;</label>

Dieses Element ist inhalts- und damit offenbar wertlos. Entferne es oder bestücke es mit einem passenden Inhalt.

<input name="image_remove" id="image_remove" type="image" onclick="return removeprn();"  alt="remove" src="../image/jobtk_new/Remove__Trash_48.gif"  title="<? echo $jbtk_39; ?>" />

Ich glaube nicht, dass ein Nutzer mit einem (eventuellen) Tooltip etwas anfangen kann, der "<? echo $jbtk_39; ?>" lautet. Vielleicht solltest Du hier einen natürlichsprachlichen Beschreibungstext wählen.

<span><?php echo $jbtk_39; ?></span>

Gleiches gilt hierfür. Oder geht es darum, dass der Nutzer Code-Fragmente bearbeitet?

Hat jemand eine erklärung warum der IE alles vergrößert?

Vielleicht ist einfach ein anderer Schriftgrad eingestellt.

Cheatah

[hawkmaster]

Hallo Cheatah,

danke für deine Hilfe.

Deinem HTML-Code nach zu urteilen benutzt Du XHTML. In XHTML gibt es kein <BODY>-Element, dieser Selektor führt also ins Leere. Verlasse Dich nicht auf Fehlerkorrekturen großzügiger Browser.

Danke für den Hinweis. Werde ich korrigieren

font-family: arial;

Wenn die installierte Schriftart "Arial" statt "arial" heißt, ist nicht mehr gewährleistet, dass sie hierdurch angesprochen wird. Darüber hinaus solltest Du *immer* und *überall* die Liste(!) der angegebenen Schriftarten auf eine generische Schriftfamilie enden lassen.

Du meinst besser so?
font-family: Arial,Times New Roman,Times,serif;

Sind die Grafiken vergrößert, oder haben sie Unterlängen, wie es bei Text üblich ist?

Die Grafiken sind vergößert, also wie gestreckt.

<label for="image_remove">&nbsp;</label>

Dieses Element ist inhalts- und damit offenbar wertlos. Entferne es oder bestücke es mit einem passenden Inhalt.

Das habe ich absichtlich so gemacht damit die eigentliche Beschriftung unterhalb des Inputs bzw. der Grafik erscheint. Wenn ich es im Label angebe, erscheint sie oben oder rechts. Damit es valide ist habe ich es mit
&nbsp; befüllt. Laut dem Validator ok, ohne Label nicht.

Ich glaube nicht, dass ein Nutzer mit einem (eventuellen) Tooltip etwas anfangen kann, der "<? echo $jbtk_39; ?>" lautet. Vielleicht solltest Du hier einen natürlichsprachlichen Beschreibungstext wählen.

Es wird doch nicht jbtk_39 ausgegeben sondern der text der in der Variablen steckt. Das System ist mehrsprachig aufgebaut.
vielen Dank und viele Grüße
hawk

[Cheatah]

Hi,

Du meinst besser so?
font-family: Arial,Times New Roman,Times,serif;

ja, nur ist diese spezielle Liste etwas seltsam: Arial ist serifenlos, Times und Derivate sind serifenbehaftet. Diese Kombination entspricht üblicherweise nicht der eigentlichen Intention.

Die Grafiken sind vergößert, also wie gestreckt.

Bitte verlinke eine Seite, auf der dies nachvollzogen werden kann. Im Moment kann ich mir (zumindest auf Basis des genannten Codes) dafür keinen Grund vorstellen.

<label for="image_remove">&nbsp;</label>
Dieses Element ist inhalts- und damit offenbar wertlos. Entferne es oder bestücke es mit einem passenden Inhalt.
Das habe ich absichtlich so gemacht damit die eigentliche Beschriftung unterhalb des Inputs bzw. der Grafik erscheint.

Dann ist das <label>-Element also ohne Zweck, entferne es. Füge der eigentlichen Beschriftung ein <label>-Element hinzu.

Laut dem Validator ok, ohne Label nicht.

Der Validator ist nicht in der Lage, Sinnhaftigkeit zu überprüfen. Andernfalls hätte er hier kein OK gegeben.

Es wird doch nicht jbtk_39 ausgegeben sondern der text der in der Variablen steckt.

Eliminiere bei clientseitigen Problemen *immer* *jeden* serverseitigen Code *vollständig*. Er kann niemals helfen, eine Problemlösung jedoch wunderbar komplett verhindern.

Cheatah

[suit]

Du meinst besser so?
font-family: Arial,Times New Roman,Times,serif;

ich würde eher in der selben familie bleiben oder ähnliche schriften wählen

Arial, Verdana, sans-serif;
oder
"Times New Roman", Georgia, serif;

auch wenn es nicht erforderlich ist, solltest du <http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=schriftnamen mit leerzeichen in anführungszeichen setzen>

Das System ist mehrsprachig aufgebaut.

dass du bei clientseitigen problemen keinen serverseiten code posten sollst, solltest du inzwischen wissen :)

[hawkmaster]

Hallo,

ich würde eher in der selben familie bleiben oder ähnliche schriften wählen

Arial, Verdana, sans-serif;
auch wenn es nicht erforderlich ist, solltest du <http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=schriftnamen mit leerzeichen in anführungszeichen setzen>

Danke für den Hinweis. Ich bin nicht so der Schriften Experte, war mir nicht so bekannt. Werde ich gleich ändern.

dass du bei clientseitigen problemen keinen serverseiten code posten sollst, solltest du inzwischen wissen :)

Sorry, da habt ihr natürlich recht. war auch keine Absicht. Ich dachte halt das dies klar ist mit dem PHP Code. Aber das nächste mal werde ich mir das merken und einen "echten" Text reinschreiben.

vielen Dank und viele Grüße
hawk

[suit]

Sorry, da habt ihr natürlich recht. war auch keine Absicht. Ich dachte halt das dies klar ist mit dem PHP Code. Aber das nächste mal werde ich mir das merken und einen "echten" Text reinschreiben.

dass du dabei offensichtlich eine php-ausgabe machst ist klar, aber woher sollen wir wissen, was der server tatsächlich liefert

fehlerbeschreibung "warum springe ich mit meinem link nicht zum anker 'top'?"

folgendes sieht ganz in ordnung aus
<a href="#top"><?php echo '$foo'; ?></a>

aber wenn ich folgendes ergänze, ist die sache um einiges klarer

<?php  
  $foo = '</a><a href="#ganzwoanders">nach oben springen';  
?>

und wenn man gleich folgendes postet, dann nochmal um einiges
<a href="#top"></a><a href="#ganzwoanders">nach oben springen</a>