Strohhalm

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Privat

 

Anmelde-Formular



Als Strohhalm-Mitglied registrieren.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Archiv

 

strohhalm.org / Archiv / (X)HTML & CSS / Eintrag lesen

Firefox und Elternelement

  1. Firefox und Elternelement

    Moorhead 05. November 2004, 21:00

    Hallo!

    Hab ein Problem. Vielleicht bin ich aber auch nur zu blöd, den Fehler zu sehen.

    Bei folgender Seite ist ein einfaches Tabellegerüst Basis des Layouts.

    Die Große Tabellenzelle habe ich relativ positioniert und damit müssten doch alle Elemente darin, die absolut positioniert sind, sich daran ausrichten können, oder?

    externer Linkhttp://www.die-putzteufelchen.de

    Es klappt auch in allen Browsern, die ich gerade installiert habe, außer dem Firefox. Der richtet sich bei den absolut left positionierten Elementen immer am Browserfenster und zerreißt damit das Layout.

    Sieht jemand den Fehler?

    VG MARKUS

  2. Re: Firefox und Elternelement

    Pedrito 05. November 2004, 22:34

    Ich verstehe nicht ganz,
    1.wieso du überhaupt eine Tabelle verwendest
    2.wenn du eine Tabelle verwendest, wieso du Elemente positionieren musst
    3. wenn du XHTML schreibst, wieso nicht gleich valide, damit du sicher bist, das es nirgends Anzeigeprobleme gibt
    4. das CSS auch nicht über alle Zweifel erhaben ist.

    Ich würde da nochmals darüber nachdenken, bevor du weitermachst.

    mfG
    Pedrito

  3. Re: Firefox und Elternelement

    Evita 06. November 2004, 09:43

    Hallo!

    Bei LayoutTabellen braucht man kein "position" - die braucht man nur bei divs.
    Nimm die Angaben raus und es sollte bei allen Browsern funktionieren.

    Es grüßt, Evita

  4. Re: Firefox und Elternelement

    Moorhead 07. November 2004, 23:21

    Hallo!

    @pedrito

    zu1 Ich verwende eine umgebende Tabelle, weil ich auch nach intensivem Probieren keinen Weg gefunden habe, per CSS dieses Layout mit dem Footer an der unteren Seitenkante umzusetzen.
    Ich weiß dabei aber grad nicht mehr, woran es dabei immer gescheitert war. Das Problem war wohl irgendwie, dass ich den Footer immer an der unteren Browserkante haben wollte, solang der Inhalt kürzer als die Seite ist. Wenn die Seite länger ist, soll der Fotter natürlich runterrutschen. Ich hatte dazu auch einen thread hier, gaube ich. Auf jeden Fall geht es mit einer einfachen Tabelle so leicht, dass ich mich nicht mehr motivieren konnte weiter zu forschen. Und es hat ja auch keinen gravierenden Nachteil.

    zu2 Ich habe die Elemente innerhalb der umgebenden Tabelle per CSS positioniert, weil ich auf die Dokumentenstruktur Wert gelegt habe, die einfach sein soll, jedoch auch eine genaue Layoutvorstellung hatte.

    zu3 Leider gibt es selbst mit validem Code keine Garantie für die Lösung aller Anzeigeprobleme...
    Aber die Seiten sind nahezu valide, glaub ich. Bis auf das height-Attribut der Tabelle. Na gut, aber das brauch ich halt.

    zu4 ..das versteh ich nicht so ganz. Was meinst Du damit? Ist es ein Bug im Firefox?

    zum Nachsatz: Ich mache eigentlich kaum noch weiter, da ich eigentlich schon fast fertig bin. Nur noch diese Kelinigkeit mit dem Firefox... ;-)


    @Evita

    Das hab ich nicht so richtig glauben können, denn es heißt doch, dass sich alle absolut positionierten Elemente am Browserfenster orientieren, es sei denn es gibt ein Elternelement, mit einer position-Definition. Und das ist die Tabelle bei mir. Habs aber trotzdem mal ausprobiert. Geht aber auch nicht. Firefox positioniert alles immer am Browserrand.

    Viele Grüße,
    MARKUS

  5. Re: Firefox und Elternelement

    Juggler 08. November 2004, 03:02

    > zu3 Leider gibt es selbst mit validem Code keine Garantie für die Lösung aller Anzeigeprobleme...
    Nein, eine Garantie gibt es leider nicht... das stimmt schon, aber wenn dein Code nicht valide ist, dann provozierst du geradezu Ausgabefehler. Ich sage "Ausgabefehler", nicht "Anzeigefehler", weil es eben noch mehr gibt, als nur grafische Browser.
    Wenn ein Browser trotz validem Code Fehler macht, kannst du dich vermutlich auf einen Bug des Browsers berufen. Wenn der Code nicht valide ist, dann ist eben das - und nur das - der Grund für Ausgabeprobleme.

    > zu4 ..das versteh ich nicht so ganz. Was meinst Du damit? Ist es ein Bug im Firefox?
    Auch das bezieht sich sicherlich wieder auf die Validität. Der CSS-Validator kreidet da einiges an.

    MfG
    Juggler
    Der sich vorkommt, als würde er in letzter Zeit immer nur noch das selbe predigen...

  6. Re: Firefox und Elternelement

    Pedrito 08. November 2004, 07:57

    Hi, Moorhead,
    sogar ich bin inzwischen davon abgekommen, einen Footer zweifelsfrei am unteren Fensterende zu positionieren, sondern mache den Kunden darauf aufmerksam, das eine Seite genug Inhalt haben muss, und das Problem ist gegessen, das ergab nie weitere Fragen. Zusätzlich gebe ich einfach grosszügig padding-top auf den Footer und padding-bottom auf den Content.

    Zur Validität: beim letzten Mal waren da noch mehr Fehler. Aber gerade height="100%" wird bemängelt, das sollte zu denken geben, da es ein zentrales Elment deines Inhalts ist.

    Es mag jetzt noch Gründe geben, kein valides HTML zu schreiben, beim CSS gilt das auf KEINEN Fall. Auch heute noch probieren Browser, fehlerhafte Tabellen auszubügeln, beim CSS weniger.

    Nochmals zur Positionierung: Du hast eine sehr strange Struktur deines Inhalts. Zuerst kommt ein Block der nach rechts muss, dann einer, der nach links muss, dann wieder einer, der nach rechts muss , und das alles damit die Hierarchie deiner Titel gewahrt bleibt. Das sieht mir eher danach aus, das du ohne Rücksicht auf Verluste eine fixe Idee durchsetzen möchtest.

    Wenn du wirklich auf deine Dokumentenstruktur Wert legst, verwendest du keine Tabellen zum Layouten, wenn du bereit bist, kleine Einschränkungen auf dich zu nehmen, was spricht dagegen, eine zweite Spalte einzusetzen?

    Nur damit du mich nicht falsch verstehst, ich denke keinesfalls so: Der verwendet Tabellen, also helfe ich ihm nicht. Aber schön wäre, wenn zuerst alle nicht validen Faktoren ausgeschlossen sind.

    "font: Geneva,Arial," ergibt "font-family: Geneva,Arial,"

    font: bold normal 15px;
    Entscheide dich :-)

    mfG
    Pedrito

  7. Re: Firefox und Elternelement

    Ingo40 08. November 2004, 13:27

    Hi,
    > Aber die Seiten sind nahezu valide, glaub ich. Bis auf das height-Attribut der Tabelle. Na gut, aber das brauch ich halt.

    gerade dann solltest Du das valide definieren. Im Gegensatz zu HTML kann man auch einer table eine Höhe über CSS zuweisen.
    Ansonsten sollten Deine fehlerhaften font-Angaben von standardkonformen Browsern völlig ignoriert werden.
    Gruß
    Ingo

  8. Re: Firefox und Elternelement

    Moorhead 08. November 2004, 14:29

    @Juggler

    also ich konnte mir wirklich nicht vorstellen, dass fehlerhafte font-Deklarationen im Stylesheet Ursache für den Anzeigefehler bei der Positionierung sein sollten. Und das waren die einzigen Fehler, die mein CSS-Validator angezeigt hat.
    Hab es jetzt geändert und es macht auch wirklich keinen Unterschied.

    Gruss, MARKUS
    dem es gerade vorkommt als wenn du eher aus Prinzip auf Validität pochst, und über das gefragte Problem nicht so sehr nachgedacht hast... ;-)


    @Pedrito

    Deine Footerlösung ist vielleicht wirklich ne gute Lösung, aber es ist halt nicht immer viel Inhalt da. Aber das werde ich in Zukunft vielleicht auch erwägen...
    Ich finde aber auch eine Tabellenzelle als umgebende Struktur nicht wirklich schlimm. Deswegen ist es ja auch "transitional" und nicht "strict" XHTML.

    Zur Validität. Ich habe alle Fehler beseitigt. Sogar die height-Angabe der Tabelle (zumindest vorübergehend) und wie ich auch vermutet hatte, haben die nichts mit dem Problem zu tun. Wie sollten auch fehlerhafte font-Deklarationen für die Positionierung verantwortlich sein?

    Ich finde nicht, dass ich eine strange Struktur des Inhalts habe. Ich habe mit der Überschrift 1.Ordnung angefangen und ende bei den Paragraphen.
    Und das Menü hab ich extra ans Ende des Quelltextes gesetzt, da mir das von einem Blinden für diesen Fall empfohlen wurde. Weil es wenig Inhalte gibt, die schnell vom Screenreader vorgelesen werden können, muss sich ein Blinder nicht auf jeder Seite zuerst mit dem Menü auseinandersetzen.
    Allerdings fällt mir gerade auf, dass ich die Adresse noch vor dem Menü habe. Das wollte ich noch ändern... ;-)

    Oder meinst du eher ein Stranges Layout? Was spricht denn dagegen, dass ich die Überschriften und das Menue rechts positioniert habe? mal abgesehen, vom persönlichen Geschmack?

    Gegen eine zweite Tabellenspalte spricht meiner Meinung nach, dass dann im Quelltext erst die Inhalte und danach die Überschriften kommen würden. Das fänd ich eher unlogisch.
    Außerdem wäre das dann ein unübersichtlicherer und unnötig längerer Quellcode.

    Noch mal zur Erklärung: Ich wollte das Projekt wirklich nur per CSS-Layout verwirklichen und es ist ja uch schon fast so. Ich müsste ja nur die Tabelle durch ein Container-DIV ersetzen. Aber ein Container-DIV ist ja genaugenommen eine ähnliche Behelfslösung wie eine umgebende Tabellenzelle, denn es wäre ja auch nur durch Vorteile beim Layout begründet.

    Grüße, MARKUS


    So, und jetzt zurück zum eigentlichen Problem.
    Hat vielleicht jemand noch eine Idee, warum der Firefox das Browserfenster und nicht das Elternelement TD als Basis für die absolute Positionierung nimmt? So sieht es nämlich echt scheiße aus... ;-)

    MARKUS

  9. Re: Firefox und Elternelement

    Evita 08. November 2004, 14:55

    Hallo!

    Vielleicht ist das eine Lösung für dich, oder zumindest ein Ansatz dafür. Keine Tabellen, keine absoluten/relativen Positionierungen. Das einzige Problem - bei zuwenig Inhalt mußt du dir mit <br> behelfen:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "externer Linkhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="externer Linkhttp://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Die Putzteufelchen - HOME | Reinigungsunternehmen | Raumpflegeservice</title>
    <style type="text/css">
    <!--
    body {background: #f70712 url(images/hintenalles2.gif) repeat-y 50%;
    font: 12px/1.5 Geneva,Arial,Helvetica,sans-serif; margin:0px; padding:0px;}

    #container
    {
    width:600px;
    margin:0px auto;
    padding:0px;
    text-align:left;
    border-bottom: 8px solid white;
    border-top: 8px solid white;
    background-color: transparent;
    color: #000;
    line-height: 130%;
    }


    #left
    {
    float: left;
    width: 260px;
    margin: 0;
    padding: 1em;
    }

    #right
    {
    margin-left: 265px;
    padding-right: 40px;
    max-width: 36em;
    text-align:right;
    }

    h1 {
    font-family: Geneva,Arial,Helvetica,sans-serif;
    font-size: 22px;
    color: #036b9e;
    margin-top:20px;
    margin-bottom:0px;
    }

    h2 {
    font: normal 15px Geneva,Arial,Helvetica,sans-serif;
    line-height: 18px;
    color: #036b9e;
    margin-top: 6px;
    }

    h3 {
    font: normal 15px Geneva,Arial,Helvetica,sans-serif;
    color: #ce0004;
    }

    p {margin-top:8px; margin-bottom:8px;}

    #menu {margin-top:80px;margin-bottom:40px; margin-right:42px;}
    #menu ul {margin:0; padding:0; list-style-type: none;}
    #menu li {margin-bottom:6px; padding:0; list-style-type:none; font-size:20px;}
    #menu li a {display: block; width:150px; line-height:30px; border:2px solid black; background:#0591D5; color:#fff; text-align:center;}
    #menu li a:visited {display: block; width:150px; line-height:30px; border:2px solid black; text-align:center;}
    #menu li a:hover {display: block; width:150px; line-height:30px; border:2px solid black; background:#F70712; color:#fff; text-align:center;}

    #footer
    {
    clear: both;
    margin-top: 20px;
    margin-bottom:0px;
    color: #000;
    background-color: transparent;
    }


    #footer ul, #footer li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    #footer li {
    display:block;
    float: left;
    width: 19%;
    text-align: center;

    }

    #footer li a{
    color: #e20f28;
    font: 11px Arial, Verdana, "Trebuchet MS", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;

    }
    #footer li a:visited {
    color: #e20f28;
    font: 11px Arial, Verdana, "Trebuchet MS", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    }

    #footer li a:hover {
    font: 11px Arial, Verdana, "Trebuchet MS", sans-serif;
    font-weight: bold;
    color: #089cdc;
    text-transform: uppercase;
    text-decoration: none;
    }

    -->
    </style>
    </head>
    <body>


    <div id="container">

    <div id="left">
    <img src="images/putzteufel_logo.gif" alt="" border="0">
    <h3>Herzlich Willkommen auf den Seiten der Putzteufelchen!</h3>
    <p>Wir bieten Ihnen f&uuml;r Ihre Wohnungen, Praxen, B&uuml;ros und Feriendomizile in und um Flensburg einen zuverl&auml;ssigen Reinigungsservice.</p>
    <p>Schauen Sie sich gerne kurz auf unseren Seiten um oder nutzen Sie unser Kontaktformular f&uuml;r genauere Anfragen!</p>
    <p>Viele Gr&uuml;&szlig;e,<br />
    Johannes Sondermann
    </p>
    </div>

    <div id="right">
    <div align="right" id="menu">
    <ul>
    <li id="l1"><a href="ueberuns.htm"><span>über uns</span></a></li>
    <li id="l2"><a href="leistungen.htm"><span>Leistungen</span></a></li>
    <li id="l3"><a href="kontakt.htm"><span>Kontakt</span></a></li>
    </ul>
    </div>
    <h1>Die Putzteufelchen</h1>
    <h2>Der nette Raumpflegeservice aus Flensburg</h2>
    <div id="address">
    Johannes Sondermann e.K.<br />
    Friesische Str. 82<br />
    24937 Flensburg<br />
    Tel: 0461/90960515<br />
    Mobil: 0172/4053616<br />
    </div>
    </div>

    <div id="footer">
    <ul>
    <li id="l4"><a href="index.htm"><span>Home</span></a></li>
    <li id="l5"><a href="ueberuns.htm"><span>über uns</span></a></li>
    <li id="l6"><a href="leistungen.htm"><span>Leistungen</span></a></li>
    <li id="l7"><a href="kontakt.htm"><span>Kontakt</span></a></li>
    <li id="l8"><a href="impressum.htm"><span>Impressum</span></a></li>
    </ul>
    <br clear="left">
    </div>

    </div>
    </body></html>

    Es grüßt, Evita

  10. Re: Firefox und Elternelement

    Ingo40 08. November 2004, 17:54

    Hi,
    > Hat vielleicht jemand noch eine Idee, warum der Firefox das Browserfenster und nicht das Elternelement TD als Basis für die absolute Positionierung nimmt?

    nur eine Idee. In den Specs heißt es
    "These properties specify offsets with respect to the box's containing block."
    Vielleicht sehen standardkonforme Browser eine TD nicht als containing _block_ an?
    Ich finde die Mischung aus absoluter Posituierung und Tabellen ohnehin sehr gewagt.
    Gruß
    Ingo

  11. Re: Firefox und Elternelement

    wahsaga 08. November 2004, 18:46

    > nur eine Idee. In den Specs heißt es
    > "These properties specify offsets with respect to the box's containing block."
    > Vielleicht sehen standardkonforme Browser eine TD nicht als containing _block_ an?

    scheint 'ne gute idee zu sein.

    externer Linkhttp://www.w3.org/TR/CSS21/visudet.html#containing-block-details

    2. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block-level, table cell or inline-block ancestor box.

    table-cell elemente wären der containing block für relative oder static positionierte elemente, aber für absolute positionierte gilt:

    If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
    In the case that the ancestor is inline-level, the containing block depends on the 'direction' property of the ancestor:
    If the 'direction' is 'ltr', the top and left of the containing block are the top and left content edges of the first box generated by the ancestor, and the bottom and right are the bottom and right content edges of the last box of the ancestor.
    If the 'direction' is 'rtl', the top and right are the top and right edges of the first box generated by the ancestor, and the bottom and left are the bottom and left content edges of the last box of the ancestor.
    Otherwise, the containing block is formed by the padding edge of the ancestor.

    If there is no such ancestor, the containing block is the initial containing block.


    hier ist, wie man sieht, nur noch von inline-level vorfahren die rede, nicht aber mehr von table-cell ...

  12. Re: Firefox und Elternelement

    Moorhead 09. November 2004, 00:16

    @Evita
    Vielen dank für deine Mühe! Das scheint wirklich ganz gut zu klappen. Bis auf den Footer - das alte Problem. Und vielleicht auch noch bis auf die Tatsache, dass in deinem Quelltext auch erst der Inhalt und dann die Überschriften kommen. Das stört mich eigentlich. Aber das könnte man ja umdrehen.

    Leider hab ich keine Zeit mehr für so ein totales umkrempeln, und ich bin ja auch schon fertig eigentlich.

    Aber ich werd dein beispiel trotzdem mal abspeichern für nächstes Mal! ;-)


    @Ingo und Wahsaga

    Vielen Dank. das scheint es zu sein. Zumindest wäre das ne plausible erklärung. Obwohl der IE und auch Opera es auch so in meinem Sinn angezeigt haben.

    Ich habe nun als erstes dem TD ein display:block verpasst und das hat auch schon einigermaßen gewirkt, aber mit vielen Schönheitsfehlern, die ich dann wieder hätte ausmergeln müssen.
    daher hab ich in meiner Not und meiner Unlust noch lange an diesem Projekt weiter zu doktorn einfach ein eher unschönes Mittel benutzt und in die TD ein DIV gesetzt, das nun als Elternelement arbeitet. Und das funktioniert nun ganz gut glaub ich.

    Vielen dank an euch!

    Falls jemand ne einfachere Lösung hat, gerne her damit!

    Viele grüße,
    MARKUS

 
Nach oben springen

.(c) 2002 - 2019 strohhalm.org Community.Server powered by Manitu.Software powered by Mathias Bank
.Impressum + Team.Datenschutz