Formatproblem im IE..

Loon3y · 14 Juli 2008

wie nicht anders zu erwarten...mag der IE mal wieder nicht...habe eine art "steckbrief" gemacht und im internetexplorer will dich nicht so wie ich es will ! wenn ich über firefox in die fehlerkonsole gehe bringt er mir keinen fehler...woran kanns liegen das der ie nicht will? im mozilla ist es zweispaltig, im IE alles untereinander....

hier mal ein stück:

.htm

Code:

<div style="width: 141px; float: right;">
                    <p class="profil_picture"> </p>
                </div>

                <div class="profil_person">
                    <!-- Name -->
                    <div class="profil">
                        <p class="profil_info"> </p>
                        <p class="profil_description">Name</p>
                    </div>

                    <!-- Spitzname -->
                    <div class="profil">
                        <p class="profil_info"> </p>
                        <p class="profil_description">Spitzname</p>
                    </div>
                    
                    <!-- Geburtstag -->
                    <div class="profil">
                        <p class="profil_info"> </p>
                        <p class="profil_description">Geburtstag</p>
                    </div>
                
                    <!-- Geschlecht -->
                    <div class="profil">
                        <p class="profil_info"> </p>
                        <p class="profil_description">Geschlecht</p>
                    </div>
                    
                    <!-- Wohnort -->
                    <div class="profil">
                        <p class="profil_info"> </p>
                        <p class="profil_description">Wohnort</p>
                    </div>
                    
                    <!-- Herkunft -->
                    <div class="profil">
                        <p class="profil_info"> </p>
                        <p class="profil_description">Herkunft</p>
                    </div>
                    
                    <!-- Beruf -->
                    <div class="profil">
                        <p class="profil_info"> </p>
                        <p class="profil_description">Beruf</p>
                    </div>
                    
                    <!-- Familienstand -->
                    <div class="profil">
                        <p class="profil_info"> </p>
                        <p class="profil_description">Familienstand</p>
                    </div>

                </div>     

                    <br />&nbsp;

                <!-- Über Mich -->
                <h2>Über mich</h2><br />
                <div class="profil_about">        
                    <p class="profil_me">
  
                    </p>     
                </div>

.css

Code:

        .profil { 
            width: 48%; 
            margin: 0 1% 10px 1%; 
            padding: 0; 
            float: left; 
            }

        .profil_person {
            margin: 0 141px 0 0;
            padding: 0;
            }
    
        .profil_me     {
            width: 98%;
            height: 100%;
            margin: 0 1% 10px 1%; 
            padding: 0;
            }

        .profil_loves     {
            width: 95%;
            margin: 0 1% 10px 1%; 
            padding: 0;
            }        
        
        .profil_picture {
            width: 114px; 
            height: 170px; 
            border: solid 1px #000000; 
            padding: 2px; 
            text-align: center;
            background: url("me.jpg") no-repeat;
            background-position: center center;
            }

        .profil_info { 
            border-bottom: dotted 1px #000000; 
            padding: 0 0 3px 0; 
            }

        .profil_about { 
            width: 98%;
            margin: 0 200px 0 0; 
            padding: 0; 
            min-height: 105px; 
            }

        .profil_description { 
            font-size: 0.8em; 
            color: #999; 
            font-weight: bold; 
            }

Körnerbrötchen · 14 Juli 2008

Please give me a link!

Efchen · 14 Juli 2008

Ich hätte auch gerne einen Link.

Übrigens sieht das für mich auf den ersten Blick aus, wie der Fall für eine Tabelle :-)
(weil es tabellarische Daten zu sein scheinen, nicht weil etwas tabellarisch ausgegeben werden soll).

prm · 14 Juli 2008

Zunächst mal:
Wozu denn die vier Klassen?

Code:

 <div class="profil_person">
                    <!-- Name -->
                    <div class="profil">
                        <p class="profil_info"> </p>
                        <p class="profil_description">Name</p>
                    </div>

Das ist Div-Suppe pur und das kann man doch sicher alles in eine packen.

Wenn das alles untereinander soll, dann nimm einen Div und pack alles rein.

Das könnte u.U. auch helfen:

<div style="margin-left: 50%; width: 141px; float: right;">
<p class="profil_picture"> </p>
</div>

Efchen · 14 Juli 2008

prm schrieb:
Wozu denn die vier Klassen?
Das ist Div-Suppe pur und das kann man doch sicher alles in eine packen.

Ob etwas div-Suppe ist, hat nichts damit zu tun, wieviele Klassen verwendet werden.
div-Suppe zeichnet sich durch Verwendung des div-Tags zu etwas anderem als dem Gruppieren mehrerer Elemente aus.

Code:
Wenn das alles untereinander soll, dann nimm einen Div und pack alles rein.

Code:

<div style="[COLOR=red][B]margin-left: 50%;[/B][/COLOR] width: 141px; float: right;"> <p class="profil_picture"> </p> </div>

Das ist div-Suppe. Weil die Angaben aus dem div alle auch ins p rein können und das div völlig überflüssig ist, wenn nur ein Element drin steht.

Loon3y · 14 Juli 2008

prm schrieb:
Zunächst mal:
Wozu denn die vier Klassen?

wegen der formatierung..

Wenn das alles untereinander soll, dann nimm einen Div und pack alles rein.

es soll zweispaltig sein, wie oben erwähnt. allerdings macht der IE dadraus eine liste und nichts so wirklich zweispaltig.

------------

Leider bin ich noch im momenta uf arbeit und kann es erst heute abend hochladen. hier nur ein bild wie es aussehen sollte (und es auch im Firefox aussieht):

ImageShack - Hosting :: steckimk3.png

Efchen · 14 Juli 2008

Loon3y schrieb:
allerdings macht der IE dadraus eine liste und nichts so wirklich zweispaltig.

Aus einem Haufen aneinandergereihter Block-Elemente mit Textabsätzen drin wird nicht automatisch eine Liste.

Loon3y · 14 Juli 2008

Efchen schrieb:
Aus einem Haufen aneinandergereihter Block-Elemente mit Textabsätzen drin wird nicht automatisch eine Liste.

wie muss ich das auffassen?
das ich einen fehler in der formatierung habe und deshalb eine liste statt etwas zweispaltiges im IE entsteht?

Efchen · 14 Juli 2008

Du hast gesagt, der IE macht aus Deinem Code eine Liste. Dein Code besteht aber doch aus mehreren Block-Elemente mit Textabsätzen drin. Also sind es mehrere Block-Elemente mit Textabsätzen drin und keine Liste, denn eine Liste ist <ol>, <ul> oder <dl>. Wenn Du eine Liste willst, brauchst Du auch ein Listentag. Und kein Browser verändert die Auszeichnung; wenn ein Element nicht als Liste ausgezeichnet ist, ist es keine Liste und kein Browser ändert was daran.

Mehr sollte das nicht heißen.

neuroleptika · 14 Juli 2008

Loon3y schrieb:
wie muss ich das auffassen?
das ich einen fehler in der formatierung habe und deshalb eine liste statt etwas zweispaltiges im IE entsteht?

Nein, das hat mit den verwendeten Elementen nichts zu tun.
Es wird sich vermutlich um ein Rundungsfehler vom Internet Explorer handeln.
Um sowas Bei vertikalen Angaben in % zu vermeiden, solltest kein padding, margin oder border für Elemente mit width-Angabe nutzen:

Code:

  .profil { 
            width: 48%; 
            margin-bottom: 10px; 
            float: left; 
            }

Bei Elementen ohne Breitenangaben kannst du die Werte ohne Browser-Hacks verwenden:

Code:

        .profil_info { 
            border-bottom: dotted 1px #000000; 
            margin: 0 1% 3px 1%; 

            }

Jetzt müsste es in Allen Browsern passen.
Ich würde aber noch eine minimale Breite für das gesamte Konstrukt angeben damit es bei kleineren Browserfenstern nicht verrutscht.

Vielleicht würde ich auch eine Liste verwenden. An dem Problem würde das aber nichts Ändern.

Loon3y · 14 Juli 2008

Vielen Dank für die Hilfe. Will jetzt ohne Probleme funktionieren !

Allerdings hat doch der IE wieder seine probleme mit min-width und min height, oder irre ich mich da?

Wie könnte man alternativ das problem lösen? Das selbige problem hab ich bei meinen main-div auch. Er ist im IE etwas weiter nach unten verschoben, im Mozilla und Opera passt er wunderbar.

Grüße

neuroleptika · 14 Juli 2008

Ab Vers. 7 versteht der IE min-width und max-width.
Für ältere Versionen kannst du eine feste Breite in Kauf nehmen oder width: expression() nutzen.
Zu dem anderen Problem solltest du eine Beispielseite hochladen.
Es wird könnte ein clear-Fehler sein...

Loon3y · 14 Juli 2008

ein beispiel ist unter Welcome to my Page zu finden (allerdings ohne grafiken ^^)

habe vergessen zu sagen das es nicht widht sondern bezüglich dieser min-height ist und das div zu weit unten ist. hm.

neuroleptika · 14 Juli 2008

Loon3y schrieb:
....

habe vergessen zu sagen das es nicht widht sondern bezüglich dieser min-height ist und das div zu weit unten ist. hm.

Ich habe mir nicht alles angesehen, aber es scheint an einem falschen float/clear zu liegen.

Zum min-height:

Code:

        #over     {
            height: 100%;
            min-height: 800px;
            width: 950px;
            margin: 10px auto;
            background: url("graphics/body-over.png") repeat;
            }

height: 100% bezieht sich auf das Elternelement. Also 100% von body.
html und body haben auf deiner Seite aber keine Höhenangabe.
Das height: 100% kannst du streichen. Es wird nur das min-height: 800px, berücksichtigt.
Der IE6 interpretiert height wie min-height. Das kannst du dir zu nutze machen:

Code:

      * html #over     {
            height: 800px;
            }

* html selektor {...} wird nur von IE5-IE6 gelesen und überschreibt min-height: 800px;

Die floats sehe ich mir heute Abend vielleicht noch mal an.

Loon3y · 14 Juli 2008

height: 100% bezieht sich auf das Elternelement. Also 100% von body.
html und body haben auf deiner Seite aber keine Höhenangabe.
Das height: 100% kannst du streichen. Es wird nur das min-height: 800px, berücksichtigt.
Der IE6 interpretiert height wie min-height. Das kannst du dir zu nutze machen:

d.h. damit sich die seite an meiner textlänge anpasst, aber immer mindestens 800px groß ist muss ich ich im over-div "height: 100%;" haben und im main-div dann "height: 100%; min-height: 800px;" ? Oder wie soll ich das bewerkstelligen das das overfenster immer mindestens 800px groß ist und wenn der text länger wird es sich mit vergrößert?

neuroleptika · 14 Juli 2008

Loon3y schrieb:
d.h. damit sich die seite an meiner textlänge anpasst, aber immer mindestens 800px groß ist muss ich ich im over-div "height: 100%;" haben und im main-div dann "height: 100%; min-height: 800px;" ? Oder wie soll ich das bewerkstelligen das das overfenster immer mindestens 800px groß ist und wenn der text länger wird es sich mit vergrößert?

min-height: 800px ist schon satt bemessen. Footer und Header kommen ja auch noch hinzu. Außerdem wächst #main ja mit.
height:100% ist bei so einer Seite also überflüssig.

Zu dem unterschiedlichen margin-top:
Der erste Fehler ist, daß du #Navigation nicht gecleart hast.
Der IE6 und IE7 cleart deine Liste automatisch (warum habe ich nicht untersucht).
Für alle anderen Browser mußt du das Nachholen.
Ein Beispiel:

Code:

#Navigation:after {
    content: "ende"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#Navigation hatte ohne dieses clear keine Höhe. Die Liste schwebte sozusagen über den Nachfolgenden Inhalt.
Deswegen hast du wohl auch versucht margin-top für die drei Spalten jeweils zu erraten:

Code:

#main     {
...
margin: 50px auto; 
...

oder wie bist du auf 50px gekommen?

Drei Spalten lassen sich prima in einem <div> zusammenfassen.
Diesem Div kannst du ein einheitliches margin-top: 18px; geben.

Im Internet Explorer 6 passt #main nicht zwischen die beiden sidebars.
Irgend etwas stimmt nicht mit den margin-right: 30px / margin-left: 30px;.
Auch das habe ich nicht untersucht aber für den IE6 zurechtgepfuscht:

Code:

* html #sidebar_box {
margin-right: 15px;
}

und

Code:

* html #sidebar_links{
margin-left: 15px;
}

Wenn das jetzt unverständlich ist kann ich die geänderte Datei hochladen und hier im Forum verlinken.
Die Grafiken würde ich direkt-verlinken. Also zu lasten deines Webspaces.

Ich würde dir aber einen anderen Umgang mit margin und padding empfehlen.

Loon3y · 14 Juli 2008

neuroleptika schrieb:
min-height: 800px ist schon satt bemessen. Footer und Header kommen ja auch noch hinzu. Außerdem wächst #main ja mit.
height:100% ist bei so einer Seite also überflüssig.

ok, dann wird das height:100% rausgenommen und nur height:800px; genommen, sollte, wie du gemeint hast, ausreichen. und falls mal eine seite wirklich darüber hinauswächst kann ich ja ein extra main-div definieren für diese seite, oder?

Zu dem unterschiedlichen margin-top:
Der erste Fehler ist, daß du #Navigation nicht gecleart hast.
Der IE6 und IE7 cleart deine Liste automatisch (warum habe ich nicht untersucht).
Für alle anderen Browser mußt du das Nachholen.

Das mit dem "gecleart" habe ich jetzt nicht so wirklich verstanden, ok es ist auch spät.

Allerdings muss ich drauf hinweißen das die navigation extra in navigation.css festgelegt ist und nicht in der page.css . Aber das wirst du sicherlich schon mitbekommen haben.

Das die Linke+Rechte Sidebar ein anderes margin-top wie der Main-div haben, verstehe ich auch nicht so ganz ! das ist mir ein rießen rätsel...deswegen habe ich auch die margin-tops erraten, bzw rumgefummelt bis es gleichhoch ist. Habe zuerst das main-div ausgerichtet und als die linke+rechte sidebar zu niedrig waren habe ich sie einfach solange runtergesetzt bis es gleich hoch ist. Eigentlich nur gepfusche.. :roll: :(

Die Navigation ja auch über dem inhalt sein, denn wenn sich dsa dropdownmenu öffnet muss das menu auch über dem inhalt sein und nicht dahinter? Hoffe das war jetzt nicht völliger schwachsinn was ich geschrieben habe. Aber so war mein Gedankengang als ich es erstellt habe.

d.h. ich muss über main, sidebar-links, sidbar-box nocheinmal ein div klatschen? dann habe ich ja ewig viele divs auf der seite liegen? is das ratsam?

Im Internet Explorer 6 passt #main nicht zwischen die beiden sidebars.
Irgend etwas stimmt nicht mit den margin-right: 30px / margin-left: 30px;.
Auch das habe ich nicht untersucht aber für den IE6 zurechtgepfuscht:
.
.
.

Ist es da nicht ratsam speziell für den IE6 eine extra css einzubinden die dann geladen wird sobald ein user mit so nen oldie ankommt?

Wenn das jetzt unverständlich ist kann ich die geänderte Datei hochladen und hier im Forum verlinken.
Die Grafiken würde ich direkt-verlinken. Also zu lasten deines Webspaces.

Ich würde dir aber einen anderen Umgang mit margin und padding empfehlen.

Wäre es zuviel verlangt wenn du das mir mal veranschaulichen würdest? ISt ein bisschen viel aufeinmal für einen Anfänger.. Die Grafiken kannst du gerne vom server aus einbinden, bzw sowas wie background kannst du weglassen / leer lassen (ist ja nur eine farbe in form von 1px x 1px was auf repeat gesetzt ist.)

Vielen Danke schoneinmal das du dir bislang solch eine Mühe gegeben hast zu helfen. Das ist doch mal lobenswert !

Grüße und schönen Abend / Nacht

Loon3y

neuroleptika · 14 Juli 2008

Loon3y schrieb:
....
Wäre es zuviel verlangt wenn du das mir mal veranschaulichen würdest? ISt ein bisschen viel aufeinmal für einen Anfänger.. Die Grafiken kannst du gerne vom server aus einbinden, bzw sowas wie background kannst du weglassen / leer lassen (ist ja nur eine farbe in form von 1px x 1px was auf repeat gesetzt ist.)
...

min-height: 800px; nur für den IE6 height: 800px;.
Der IE6 ist zwar der älteste noch massenhaft verbreitete Browser aber noch weiter verbreitet wie der FF2.0 oder IE7.
Das der IE6 unter bestimmten Bedingungen den Außenabstand doppelt so groß darstellt ist ein bekannter Bug.
Ich weiß leider nicht wie diese Bugs heißen.
Normalerweise ergänzt mich an dieser Stelle ein anderes Forenmitglied (Welches zur Zeit im Urlaub ist).
Wenn niemand eine bessere Idee hat mußt du das erstmal so hinnehmen.
Hier der Link:
Welcome to my Page
Das css für die Navigation und die Bilder habe ich direktverlinkt.
Die Änderungen in der Datei "page.css" habe ich auf einem eigenen Webspace kopiert und geändert. Wenn du das nicht möchtest lösche ich die Datei wieder.

Richtig veranschaulichen kann ich es heute auch nicht mehr.
Im Grunde lassen sich viele IE-Bugs vermeiden wenn mann margin, padding und border nicht mit width-Angaben in einem Element vermischt (das kommt vor allem dem IE5 zugute).
Mit einer gewissen Erfahrung ist das sicher kein Problem. Aber zu Anfang würde ich das, zumindest im Grundgerüst, vermeiden.

Loon3y · 15 Juli 2008

neuroleptika schrieb:
min-height: 800px; nur für den IE6 height: 800px;.
Der IE6 ist zwar der älteste noch massenhaft verbreitete Browser aber noch weiter verbreitet wie der FF2.0 oder IE7.
Das der IE6 unter bestimmten Bedingungen den Außenabstand doppelt so groß darstellt ist ein bekannter Bug.
Ich weiß leider nicht wie diese Bugs heißen.

das ist schon ziemlich nervig, wenn man auf fehler anderer achten muss damit alles passt...aber es klappt ja jetzt..

Normalerweise ergänzt mich an dieser Stelle ein anderes Forenmitglied (Welches zur Zeit im Urlaub ist).
Wenn niemand eine bessere Idee hat mußt du das erstmal so hinnehmen.
Hier der Link:
Welcome to my Page
Das css für die Navigation und die Bilder habe ich direktverlinkt.

sieht soweit super aus, bzw klappt auch perfekt.Soll ich die "Navigation:after" bei der zuständigen .css mit rein tun oder in der page.css lassen?

habe mir alles gesichert was hochgeladen wurde, wenn du es nichtmehr auf deinen webspace haben möchtest, kannst du es gerne löschen ;)

Richtig veranschaulichen kann ich es heute auch nicht mehr.
Im Grunde lassen sich viele IE-Bugs vermeiden wenn mann margin, padding und border nicht mit width-Angaben in einem Element vermischt (das kommt vor allem dem IE5 zugute).
Mit einer gewissen Erfahrung ist das sicher kein Problem. Aber zu Anfang würde ich das, zumindest im Grundgerüst, vermeiden.

ok geht klar, vielen dank noch einmal für die hilfe. Habe nun soweit fast alles verstanden. Allerdings wäre ich noch sehr froh darüber, wenn du mir erklären könntest, welcher gedanke hinter dem "navigation:after" steckt.

Edit: ok doch, mir ist noch was aufgefallen..im "#main_me" hast du padding: 5px 10px; entfernt, aber im "#main" nicht, wieso das?

Grüße
Loon3y

neuroleptika · 15 Juli 2008

#Navigation:after habe ich nur in die page.css geschrieben weil ich keine zwei css-Dateien bearbeiten wollte. Eigentlich gehört sie in die navigation.css.

clear hebt den Float auf. <ul id="Navigation" /> enthält nur gefloatete Elemente (<li>). Elemente mit float beeinflussen die Höhe ihres Elternelementes nicht. Deshalb konntest du die darunter stehenden Element nicht an der Unterkannte von <ul> ausrichten. Die Sitebars haben ebenfalls float und ließen sich deshalb unterhalb von <ul> ausrichten. Die mittlere "Spalte" ist nicht durch float positioniert und rutscht deshalb auf die gleiche Höhe wie <ul>.
Der Internet Explorer (zumindest bis Vers.7) cleart unter bestimmten Bedingungen automatisch. Daher die unterschiedliche Darstellung.

clearen mit :after

Code:

#Navigation:after {
    content: "ende"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

mit :after kann man einem Element einen Inhalt "anhängen" (content: "irgendwas"; )
Mit clear: both; bekommt dieser Anhang das nötige clear.
Ich habe diese Methode gewählt weil keine Weiteren Elemente außer <li> in <ul> erlaubt sind.
Die Internet Explorer bis Vers.7 kennen :after nicht, was ja in deinem Fall nicht stört.

Code:

        #main     {
                        width: 525px;
            height: 100%;
            min-height: 800px;
              margin: 0px auto; /*geändert*/
              padding: 5px 10px;
            border: #000000 2px solid;
            ...
            }

        #main_me {
            width: 525px;
            height: 100%;
            min-height: 900px;
              margin: 50px auto;
          /*    padding: 5px 10px; entfernt */
            border: #000000 2px solid;
            ...
            }

Verstehe ich selber nicht mehr.
Eigentlich ist das verkehrt.
width: 525px; in #main_me gehört eigentlich gelöscht.

Formatproblem im IE..

Neues Mitglied

Aktives Mitglied

Efchen

Guest

Aktives Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied