IE6 macht mich wahnsinnig, DIVs zu groß

  1. DieTa

    DieTa Thread StarterMacUser Mitglied

    Mitglied seit:
    17.09.2003
    Beiträge:
    3.308
    Zustimmungen:
    32
    Hallo,

    um mein Projekt etwas moderner zu gestalten, hab ich das Design komplett erneuert und endlich damit begonnen auf Webstandards zu setzen. Ich verwende XHTML 1.1 und mein Code ist laut dem W3C-Validator auch "valid". Ebenso verhält es sich mit dem CSS.

    Mein Problem ist nun, dass die Seite wunderbar in eigentlich allen Browsern läuft bis auf - wie könnte es auch anders sein - dem IE6.

    Die DIVs werden zu groß angezeigt und wurden wiederholt. Das wiederholen konnte ich dem CSS abgewöhnen, aber die Abstände zwischen einem DIV und dem anderen bekomme ich nicht weg.

    Hier mal der Code einer dieser Fälle:
    HTML:
    .headertop
    	{
    		margin-top			: 20px;
    		background-image 	: url(images/top-top.png);
    		background-repeat 	: no-repeat;
    		width				: 708px;
    		height				: 14px;
    		text-align			: center;
    		border-width		: 0px;
    		padding 			: 0px;
    		margin-bottom		: auto;
    		margin-right 		: 0px;
    		margin-left 		: 0px;
    	}
    Ich habe schon alles möglich durchprobiert (wie man sieht)...

    Leider komme ich nicht drumherum einige DIVs ineinander zu schreiben, insgesamt bis zu 5 :-/

    Code:
    HTML:
    [...]
    <body>
    <div class="wrapper">
    <form action="upload/upload.php" method="post" enctype="multipart/form-data">
    <div class="headertop"></div>
    <div class="header">
    [...]

    Gruß
    Dennis
     
    DieTa, 23.03.2007
  2. lengsel

    lengselMacUser Mitglied

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53
    Hat zwar mit dem konkreten Problem nichts zu tun, hilft aber vielleicht trotzdem:
    Wenn es nicht anders geht, serviere ich dem IE ein eigenes Stylesheet in denen eben andere Werte stehen als in dem Stylesheet für alle anderen Browser. Mit Conditional Comments lässt sich ganz entspannt ohne großen Aufwand eine Stylesheetweiche implementieren.

    Grüße,
    Flo
     
    lengsel, 23.03.2007
  3. DieTa

    DieTa Thread StarterMacUser Mitglied

    Mitglied seit:
    17.09.2003
    Beiträge:
    3.308
    Zustimmungen:
    32
    Hi Flo,

    danke für die Idee :)

    Kleines Problem ist nur noch, ich bekomme es im IE gar nicht richtig angezeigt :-/ Über eine Browserweiche hatte ich alternativ auch schon nachgedacht...

    Das Bild ist übrigens 708x14 Pixel groß..
     
    DieTa, 23.03.2007
  4. heldausberlin

    heldausberlinMacUser Mitglied

    Mitglied seit:
    01.05.2004
    Beiträge:
    13.832
    Zustimmungen:
    302
    Wenn du vor deinen CSS-Klassen ein

    PHP:
    html 
    setzt, dann kannst du sie extra für IE6 und IE5 neu definieren, ohne dass andere Browser ihre Darstellung verändern, da diese Tags dann nur von IE5+6 interpretiert werden.
    So kannst du dann die Seite nochmal für IE anpassen.

    Wenn du dann IE 5 extra machen willst, geht das mit
    PHP:
    html body 
    vor dem jeweiligen Tag.

    Also angenommen, du hast ein DIV für alle Browser definiert:
    PHP:
    #Feld {...}
    Dann kannst du es für IE 5+6 ändern:
    PHP:
    #Feld {...}

    *html #Feld {anders}

    und anschließend für IE5, falls erforderlich, wieder rückgängig machen:
    PHP:
    #Feld {...}

    *html #Feld {anders}

    html body #Feld {wieder normal}
    So brauchst du nicht extra für jeden Browser ein eigenes Stylesheet entwerfen, sondern lediglich die fehlinterpretierten Klassen neu definieren.
     
    heldausberlin, 23.03.2007
  5. DieTa

    DieTa Thread StarterMacUser Mitglied

    Mitglied seit:
    17.09.2003
    Beiträge:
    3.308
    Zustimmungen:
    32
    heldausberlin:
    Ok das ist natürlich noch besser als 2 CSS-Files die man dann immer seperat pflegen muss.

    Frage: Du hast das Feld mit "#" definiert? Was bedeutet #? Ich kenne bis dato nur Direktformatieren von

    p {*} z.B.

    oder

    .text {*}
     
    DieTa, 23.03.2007
  6. heldausberlin

    heldausberlinMacUser Mitglied

    Mitglied seit:
    01.05.2004
    Beiträge:
    13.832
    Zustimmungen:
    302
    #Feld ist eine einmalig verwendete Klasse, .Feld kann man beliebig oft verwenden.

    In deinem Fall würde ich mit margin und padding etwas rumspielen, oder mal deine Seite verlinken, dann können wir uns das auch näher anschauen.
    Es wird auf jeden Fall eine Lösung geben, die du so eben isoliert lösen kannst, ohne andere Browser (die sich korrekt verhalten) wieder zu belasten.
     
    heldausberlin, 23.03.2007
  7. DieTa

    DieTa Thread StarterMacUser Mitglied

    Mitglied seit:
    17.09.2003
    Beiträge:
    3.308
    Zustimmungen:
    32
    Ok hier der Link zur Seite in Arbeit: http://www.spongedpics.com/index_2.php

    Das Problem im IE6 ist halt das ich z.B. im DIV von "headertop" immer etwas Abstand zum unteren DIV habe und das absolut nicht rausbekomme.

    Mit den Weichen zu arbeiten erleichtert das ganze ja schon beträchtlich.
     
    DieTa, 23.03.2007
  8. lengsel

    lengselMacUser Mitglied

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53
    # ist keine Klasse sondern eine ID.
    . ist eine Klasse

    Noch ein Wort zur Übersichtlichkeit:
    Sicherlich sind zwei CSS-Dateien kein allzu erstrebenswerter Zustand.
    Ich habe es in der Praxis jedoch als sehr viel einfacher und übersichtlicher erlebt zwei verschiedene Dateien zu pflegen, als eine vollgeramschte.

    Grüße,
    Flo
     
    lengsel, 23.03.2007
  9. Teichi

    TeichiMacUser Mitglied

    Mitglied seit:
    16.01.2005
    Beiträge:
    278
    Zustimmungen:
    6
    Oder anders gesagt, mit # spricht man id-Attribute an.
     
    Teichi, 23.03.2007
  10. lengsel

    lengselMacUser Mitglied

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53
    Rutsch doch das untere div mittels negativem top-margin nach oben.
    z.B.:
    Code:
    margin: -20px 10px 5px 30px;
    
    Abstände:
    top: -20
    right: 10
    bottom: 5
    left: 30

    Sicher nicht die feine Art, aber funktioniert meistens. :)

    Grüße,
    Flo (kein Validierungsfreak)
     
    lengsel, 23.03.2007
Die Seite wird geladen...
Ähnliche Themen - IE6 macht wahnsinnig
  1. gardenexpie
    Antworten:
    7
    Aufrufe:
    586
  2. msg
    Antworten:
    9
    Aufrufe:
    586
    Discovery
    06.12.2007
  3. cube82
    Antworten:
    1
    Aufrufe:
    406