IE6 macht mich wahnsinnig, DIVs zu groß

Diskutiere mit über: IE6 macht mich wahnsinnig, DIVs zu groß im Web Page Design Forum

  1. DieTa

    DieTa Thread Starter MacUser Mitglied

    Beiträge:
    3.278
    Zustimmungen:
    30
    Registriert seit:
    17.09.2003
    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
     
  2. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    Registriert seit:
    25.11.2003
    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
     
  3. DieTa

    DieTa Thread Starter MacUser Mitglied

    Beiträge:
    3.278
    Zustimmungen:
    30
    Registriert seit:
    17.09.2003
    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ß..
     
  4. heldausberlin

    heldausberlin MacUser Mitglied

    Beiträge:
    14.081
    Zustimmungen:
    302
    Registriert seit:
    01.05.2004
    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.
     
  5. DieTa

    DieTa Thread Starter MacUser Mitglied

    Beiträge:
    3.278
    Zustimmungen:
    30
    Registriert seit:
    17.09.2003
    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 {*}
     
  6. heldausberlin

    heldausberlin MacUser Mitglied

    Beiträge:
    14.081
    Zustimmungen:
    302
    Registriert seit:
    01.05.2004
    #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.
     
  7. DieTa

    DieTa Thread Starter MacUser Mitglied

    Beiträge:
    3.278
    Zustimmungen:
    30
    Registriert seit:
    17.09.2003
    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.
     
  8. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    Registriert seit:
    25.11.2003
    # 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
     
  9. Teichi

    Teichi MacUser Mitglied

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

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    Registriert seit:
    25.11.2003
    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)
     
Die Seite wird geladen...
Ähnliche Themen - IE6 macht wahnsinnig Forum Datum
IE6 lade probleme bei bilder Web Page Design 04.12.2007
Internetseite am IE6 anders dargestellt Web Page Design 04.12.2007
Bin am Verzweifeln ... CSS-Navi Darstellungsproblem mit ie6 Web Page Design 10.04.2007

Diese Seite empfehlen

Benutzerdefinierte Suche