XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   Noch einmal floating (http://xhtmlforum.de/showthread.php?t=33087)

SimonWpt 31.08.2004 15:25

Noch einmal floating
 
Hallo zusammen,

wieso entsteht beim IE eine Abstand zwischen Menü und Content, Firefox & Opera dagegen machen alles richtig? Ich glaube, es liegt am floating, bin mir aber nicht sicher...


Ich finde einfach den Fehler nicht, es liegt nicht an fehlenden "padding:0"...

Danke


Bertram

toscho 31.08.2004 16:38

Das ist der 3-Pixel-Jog: http://www.positioniseverything.net/...reepxtest.html

Gruß
Thomas

SimonWpt 31.08.2004 18:58

Zitat:

Zitat von toscho

Hallo Thomas,

danke für den Link. Aber entweder ich habe den Hack nicht richtig implementiert oder es ist nicht der 3-Pixel-Jog.

Code:

/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #content {
  height: 1%;
  margin-left: 0;
  }
 
/* End hide from IE5/mac */

Hack von positioniseverything:
http://www.positioniseverything.net/...html#haslayout

Code:

* html #content {height: 1%;} /* for IE/Win */
*>html #content {height: auto;} /* for IE5/Mac */

usw. Was übersehe ich?

Danke


Bertram

terrikay 31.08.2004 19:27

Ich hab das auch schon mal probiert. Das hilft nur für diese Textverschiebung, die den Text dann immer weiter nach links schiebt und so einen unschönen Treppeneffekt hinterläßt.

Die eigentliche Lücke entsteht aber schon beim Container an sich. Und dagegen hilft die Angabe der Höhe irgendwie nicht. Am besten positionierst Du beide Container floatend, dann legen sie sich aneinander.

toscho 31.08.2004 19:42

Zitat:

Zitat von SimonWpt
Was übersehe ich?

Dasselbe wie ich vermutlich, denn ich sehe den Fehler auch nicht. Und zum Debuggen fehlt mir jetzt irgendwie die Zeit. Nimm mal Stück für Stück Teile aus dem Stylesheet und deinem Markup, bis nur noch der nackte Fehler übrig ist. Dann kann man sich das nochmal ansehen.
Oh, vielleicht der linke Abstand der <h1>?

Was anderes: Gib die Breite von Containern mit Textinhalt immer in »em« an! Die »Kooperationspartner« laufen bei mir in den benachbarten Text. Und den Hintergrund für die Linkliste würde ich dringend auf »no-repeat« setzen. Im Moment sehe ich da lauter Bildfragmente.

Gruß
Thomas

terrikay 31.08.2004 20:20

Hallo Thomas,

ich hab mal eine ganz simple Testseite gebastelt. Extra im Quirksmode! ;) (ist aber egal - macht keinen Unterschied). Ohne Text, nur zwei bunte Container. Und trotz explizit angegebener Höhe (hier 500px), entsteht eine Lücke von drei Pixeln in allen IEs. Im Opera oder Mozilla nicht.

Was macht man da? -> dagegen hab ich noch nix gefunden außer beide Container floaten lassen.

Hier der Code (wollte es auch hochladen, aber das klappte grad nicht.....):

Zitat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>IE-Floatbug</title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:red;
height:300px;
}
#zweiter {
margin-left:180px;
margin-right:200px;
background-color:blue;
height:500px;
}
</style>
</head>
<body>
<div id="left"> </div>
<div id="zweiter"> </div>
</body>
</html>

ulle 31.08.2004 22:29

Schaut Euch mal diesen CODE im IE an. Ich glaube nicht das dies der 3 Pixel-Bug ist.

Beachte im 2. Beispiel habe ich margin-left auf Null gesetzt, trotzdem der Abstand.

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">   
/*<![CDATA[*/

html,body  {
  margin: 0;
  padding: 0;
  background-color: #FF9933;
  color: #000000;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 100.01%;
}

.left {
        float:left;
        width:180px;
        background-color:red;
        height:20px;
}

#zweiter {
        margin-left:180px;
        margin-right:200px;
        background-color:blue;
        height:90px;
}

#zweiter2 {
        margin-left:180px;
        margin-right:200px;
        background-color:blue;
        height:90px;
}

div.ie-float-bug {
  width: 100%; /*ie-float-bug*/
  margin: 0;
  border: none;
  padding: 0;
  background-color: #FFFFFF;
}

* html #zweiter2 {
        margin-left: 0;
  }
 
 .clear {
  clear: both;
  line-height: 0px;
  font-size: 0px;
  height: 0px;
}


/*]]>*/
</style>


</head><body>

        <div class="ie-float-bug">
                <div class="left"> </div>
                <div id="zweiter"> </div>
        </div>
        <br class="clear" />
       
       

       
        <div class="ie-float-bug">
                <div class="left"> </div>
                <div id="zweiter2"> Ich habe im IE margin-left: 0; </div>
        </div>
        <br class="clear" />

</body></html>


terrikay 31.08.2004 22:44

Zitat:

Zitat von ulle
Schaut Euch mal diesen CODE im IE an. Ich glaube nicht das dies der 3 Pixel-Bug ist.

Was soll das sonst sein?

Probier mal folgendes aus: Schieb mal das Browserfenster soweit zu, bis er zweite Container runterhüpft - im unteren Beispiel ist er dann ganz links -> klar.
Im oberen Beispiel ist dann der 3-pixel-Abstand weg und die Box schließt direkt an die andere an (halt darunter).
Genau das gleiche passiert ja mit dem Text, der schiebt sich dann um 3 pixel nach links.

Mach noch mal folgendes: gib keine Höhe an im ersten Beispiel und schreib statt dessen Text rein!
Dann passiert dies: Die blaue Box ist dann linksanliegend - nur der Text hat den 3px-jog - wenn das Menü zuende ist, rutscht dann eben der Text in der bekannten Manier nach links.

Wenn die Boxen verschiedene Farben oder Bilder haben und anliegen sollen dann funktioniert der Holly-Hack nicht. Der klappt nur, wenn die 3 pixel ansich eh nicht auffallen und man nur diese Textverschiebung beheben will.

toscho 31.08.2004 23:48

Es ist doch der 3-Pixel-Sprung! So funktioniert's:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>IE-Floatbug</title><style type="text/css">
#left {
        float:          left;
        width:          180px;
        background:    red;
        height:        300px;
}
#zweiter {
        margin-left:    180px;
        margin-right:  200px;
        background:    blue;
        height:        500px;
}
* html #left {
        /* \*/
        margin-right:  -3px;
        /* */
}
* html #zweiter {
        /* \*/
        margin-left:    177px;
        /* */
}</style>
<div id="left"> </div>
<div id="zweiter"> </div>

Wie man sieht, muß auch der Abstand der zweiten Box um drei Pixel »korrigiert« werden.
Was für ein Gewurstel wegen drei Pixeln!

Gruß
Thomas

ulle 01.09.2004 10:25

Zitat:

Zitat von toscho
Mach noch mal folgendes: gib keine Höhe an im ersten Beispiel und schreib statt dessen Text rein!

Das mit dem Text hatte ich ja probiert, nur habe ich die Höhenangabe nicht herausgenommen, deshalb war ich ein wenig verwirrt :?

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">   
/*<![CDATA[*/

html,body  {
  margin: 0;
  padding: 0;
  background-color: #FFCC33;
  color: #000000;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 100.01%;
}

#left {
  float:left;
  width:180px;
  background-color: #FF0000;
  height:20px;
}

#zweiter {
  margin-left: 20px; /* ACHTUNG */
  margin-right:300px;
  background-color: #2299FF;
  /* height:200px; */
}

* html #left {
        margin-right: -3px;
  }
 
* html #zweiter {
        margin-left: 17px;
  }


/*]]>*/
</style>


</head><body>
       
        <div id="left"> </div>
        <div id="zweiter">Der kurzeitige Besitzerwechsel der Domain ebay.de könnte eine Klagewelle von Verkäufern zur Folge haben, die in dieser Zeit Waren unter Wert verkaufen mussten, weil die Auktionsplattform nicht erreichbar war. </div>

</body></html>

:arrow: so geht es auch :roll:

Problem entsteht im IE wenn der 2. Container ein Höhe erhält :!:

SimonWpt 01.09.2004 15:31

Zitat:

Zitat von terrikay
Am besten positionierst Du beide Container floatend, dann legen sie sich aneinander.

Ja, das habe ich jetzt auch gemacht und es funktioniert auch. Schade, wenn man das Verhalten der Browser nicht wirklich nachvollziehen kann.

Danke

Bertram

SimonWpt 01.09.2004 15:39

Hallo Thomas,

Zitat:

Zitat von toscho
Was anderes: Gib die Breite von Containern mit Textinhalt immer in »em« an! Die »Kooperationspartner« laufen bei mir in den benachbarten Text. Und den Hintergrund für die Linkliste würde ich dringend auf »no-repeat« setzen.

mir ist noch nicht klar, wie ich Pixelgrößen und "em"-Angaben stimmig bekomme. Kannst du mir einen Link empfehlen?

Danke für die Hilfe!


Bertram

ulle 01.09.2004 15:45

Zitat:

...wie ich Pixelgrößen und "em"-Angaben stimmig bekomme......
Überhaupt nicht, toscho meinte es ja aus diesem Grund.

:idea: Du solltest Container mit width: ?em angeben, diese Einheiten werden beim Skalieren der Schrift berücksichtigt. Somit kann der Text nie über den BOXen-Rand geraten.

SimonWpt 01.09.2004 16:43

Zitat:

Zitat von ulle
:idea: Du solltest Container mit width: ?em angeben, diese Einheiten werden beim Skalieren der Schrift berücksichtigt. Somit kann der Text nie über den BOXen-Rand geraten.

Wenn ich aber mit einem Menü von 180px und einem content von 580px arbeite, muss ich das ganze doch in em umsetzen können.

Oder?

ulle 01.09.2004 16:58

Jetzt verstehe ich wie Du es meinst :arrow:

Du suchst eine Umrechnungsformel, ist mir so nicht bekannt - bzw. ist sinnfrei.

Fixe Einheiten in relative Einheiten umrechnen.

Das sind verschiedene Dinge......... :roll:

toscho 01.09.2004 17:35

Zitat:

Zitat von SimonWpt
Wenn ich aber mit einem Menü von 180px und einem content von 580px arbeite, muss ich das ganze doch in em umsetzen können.

Nein, du mußt dich von der Idee verabschieden, du bräuchtest ein 180px breites Menü. Dein Menü muß — sagen wir mal — 11em breit sein.
Wenn dann jemand kommt, der sich 20px als Schriftgröße eingestellt hat, funktioniert dein Layout immer noch tadellos, weil sich die Breite des Menü immer auf die Schriftgröße des Lesers bezieht.

Gruß
Thomas

terrikay 02.09.2004 11:20

Thomas,
ich fände es gut, wenn Du nochmal klar machen würdest, dass das Deine Meinung ist. Natürlich ist sie gut begründet und Du hast im Sinne der Barrierefreiheit auch Recht.

Aber es gibt Leute, die andere Designvorstellungen haben, und ich denke, auch die solltest Du respektieren. Es ist kein unumstößliches Gesetz, dass Container, die Text enthalten, nicht in pixel definiert werden dürfen. Wenn man ein Design hat, dass grafisch anspruchsvoller ist, wird sich eine Auszeichnung in Pixel kaum vermeiden lassen, da sich bisher im Web (zumindest Browserübergreifend ohne Plugin) nur pixelbasierte Dateiformate einsetzen lassen und keine vektorbasierten, die mitwachsen könnten.

Du kannst die Nachteile gerne aufzeigen, das Design wird sicher ab einer gewissen Schriftvergrößerung zerreißen, und man sollte dies wissen, wenn man es trotzdem macht. Dennoch klingt es bei Dir so, als sei Deine Meinung unumstößlich für alle gültig, und das ist sie IMHO nicht.

SimonWpt 02.09.2004 11:33

Zitat:

Zitat von terrikay
Thomas,
ich fände es gut, wenn Du nochmal klar machen würdest, dass das Deine Meinung ist.

Da möchte ich dir bepflichte. Thomas Beiträge finde ich sehr wertvoll, er weist oft auf Fehler hin, die andere übersehen und gibt sehr gute Anregungen. Allerdings fällt es mir manchmal bei den Beiträgen schwer, zwischen MUSS und KANN zu unterscheiden. Tatsächlich kann man das vorliegende Design mit Schatten und festen Bildgrößen nicht in ein flexibeles Design umsetzen. Trotzdem erfüllt es die WCAG P2 und Section 508 - Richtlinien und toppt 99,9% aller Websites in Sachen Barrierefreiheit.

toscho 02.09.2004 20:06

Zitat:

Zitat von terrikay
Thomas,
ich fände es gut, wenn Du nochmal klar machen würdest, dass das Deine Meinung ist.

Ich meinte, es sei klar, daß ich kein Produzent unumstößlicher Wahrheiten sei. ;)
Im aktuellen Fall ist mein »muß« doch an eine Bedingung geknüpft: Wenn die Schrift nicht auslaufen soll, dann muß der zugeordnete Container sich in seiner Breite auf die Schriftgröße beziehen, nicht auf eine davon ganz unabhängige Größe.
Muß ich den Kontext wirklich nochmal explizit hinschreiben, um das zu verdeutlichen? Die geneigten Leser können dazu doch einfach ein bißchen scrollen, oder?

@Simon: Ich bin davon überzeugt, daß man beinahe jedes Layout (nicht Design) flexibel umsetzen kann. Aber das ist hier wohl nicht die Frage.

Gruß
Thomas

rotsch 26.10.2004 15:15

aber laut css4you ist px auch eine relative längenangabe :roll:

Dieter 27.10.2004 14:45

Habt Ihr mal dran gedacht, wenn der neue IE kommt und der bringt vielleicht eine so bequeme und effektive Art der Schriftgrössenanpassung durch den User mit wie der Firefox - was dann mit pixelgenauem Design passiert?

Da ein neuer IE sich sehr schnell verbreiten wird, werden sehr viele Seiten "platzen"!

SimonWpt 27.10.2004 16:19

Zitat:

Zitat von Dieter Krautkraemer
Habt Ihr mal dran gedacht, wenn der neue IE kommt und der bringt vielleicht eine so bequeme und effektive Art der Schriftgrössenanpassung durch den User mit wie der Firefox - was dann mit pixelgenauem Design passiert?

Ich entwickele seit langer Zeit unter Windows auch normale Programme und die Probleme gibt, es seit ich denken kann. In 0,1% alle Fälle hat ein User eine andere DPI-Angabe eingegeben. Wieviele Entwickler interessiert das? Entwickeler > NULL :)

Man muss einfach bei diesem Thread berücksichtigen, dass sich im Forum viele Weltverbesserer tummeln. Das ist positiv zu sehen, weil aus dieser Richtung wichtige Impulse kommen. Im geschäftlichen Alltag wird das aber nicht als geldwerter Vorteil in Anspruch genommen.

Nur meine bescheidene Meinung


Bertram

Dieter 27.10.2004 16:28

Hier
Zitat:

In 0,1% alle Fälle hat ein User eine andere DPI-Angabe eingegeben.
wäre ich mir aber nicht so sicher!?

SimonWpt 27.10.2004 16:36

Zitat:

Zitat von Dieter Krautkraemer
Hier
Zitat:

In 0,1% alle Fälle hat ein User eine andere DPI-Angabe eingegeben.
wäre ich mir aber nicht so sicher!?

Sind aber meine Erfahrungen. Bitte beachte dabei, dass ich nicht

Code:

Eigenschaften -> Anzeige -> Darstellung
meine, sondern

Code:

Eigenschaften -> Anzeige -> Einstellungen -> Erweitert -> Allgemein
Du kannst ja mal die Einstellungen ändern und schauen, wieviele Programme noch gewünscht funktionieren...

Liebe Grüße


Bertram

andrepolo 23.11.2005 00:54

Wenn du für den body-Tag die Schriftgöße auf 62,5% festlegst kannst du die Schriftgröße in den anderen Anweisungen in px angeben in dem du Pixelzahl / 10 teilst:

Code:

body{
font-size: 62,5%;
}

.schrift12px{
font-size: 1.2em; /*entspricht 12px */
}

Gruß André

toscho 23.11.2005 01:49

Zitat:

Zitat von andrepolo
Wenn du für den body-Tag die Schriftgöße auf 62,5% festlegst kannst du die Schriftgröße in den anderen Anweisungen in px angeben in dem du Pixelzahl / 10 teilst

Das ist ein – sorry! – typischer Anfängerfehler. 1em entspricht eben nicht immer 16px. Wäre es so, bräuchte man die beiden unterschiedlichen Einheiten ja nicht. 1em kann auch 30px entsprechen, wenn der Leser es sich so eingestellt hat.
Außerdem ist es keine gute Idee, die Schrift für das Element »body« (das Tag ist nicht gestaltbar) zu ändern. Die vermutlich häufgste Angabe in Userstylesheets ist:
Code:

body {
    font-size:    1em    !important; /* Oder ein Pixelwert */
}

Wenn du dann später hochgehst, vergrößerst du die Schrift über die voreingestellte Größe. Das ist ebenso ekelhaft wie zu kleine Schrift.

Wenn man etwas unbedingt verkleinern will, dann so dicht am anzusprechenden Element wie nur möglich. Nur so lassen sich die schlimmsten Unfälle vermeiden.

Gruß
Thomas

columbine 26.02.2007 12:52

Danke
 
Mir haben die Lösungsansätze für die beschriebenen Probleme gerade bei einem Problem sehr weitergeholfen - dafür wollte ich nur mal "Danke" sagen ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:56 Uhr.

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

© Dirk H. 2003 - 2023