Ergebnis 1 bis 3 von 3

Thema: ich vs IE5/6

  1. #1
    HTML Newbie
    Registriert seit
    31.10.2008
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard ich vs IE5/6 (scrolling/fixed positioning)

    Hallo allesamt,

    der Grund, warum ich hier Frage ist offensichtlich... ich komme alleine nicht mehr weiter Habe leider auch nur wenig Erfahrung mit HTML/CSS Ich hoffe, es findet sich hier wer, der mir nen Denkanstoß geben kann, sodass ich das Problem gelöst kriege.

    Ich baue eine Webpage bestehend aus Frames und mehreren JSP Seiten um, sodass statt Frames Divisions mit fixed positioning genutzt werden (Das Java Framework JSF macht mir sonst unnötige Probleme... das ist aber ein anderes Thema).

    Meine Seite sieht in Firefox genau so aus und verhält sich genau so, wie ich es gerne hätte. Im Internet Explorer nicht. Version 6 eben dessen ist "glücklicherweise" Firmeninterner Standard...


    Um fixed positioning zu bekommen, habe ich http://code.google.com/p/ie7-js/ in die Seite eingebunden und auch versucht mit Hilfe der Lösung auf http://artikel.fabrice-pascal.de/posfixedie6/2/ die fest positionierten frames nachzubilden.

    Meine Probleme bestehen aus folgenden Punkten:
    - Scrolling des Datenbereichs (division: content (blau)) funktioniert im IE nicht oder es wird in unendliche Weiten gescrollt ohne Auswirkung auf den Content, was auch als nicht funktionieren durchgeht...
    - Der Datenbereich ist nicht wirklich da, wo er hingehört im IE. Er sollte links an die Navigation anschließen und zwischen der Division: content_head(rot) und bottom(helleres blau) angesiedelt sein.

    Hier ein paar Bilder:
    Firefox maximiert: http://i218.photobucket.com/albums/c..._maximized.jpg
    Firefox maximiert Scrollverhalten: http://i218.photobucket.com/albums/c..._scrolling.jpg
    IE maximiert: http://i218.photobucket.com/albums/c..._maximized.jpg
    IE maximiert (nicht)scrollverhalten: http://i218.photobucket.com/albums/c...oscrolling.jpg

    Hier mein CSS File zur Positionierung: (body bekommt in einer anderen CSS File für Styles overflow: hidden zugewießen, die files alle zu posten wäre wohl etwas zu viel des Guten)
    Code:
    #head {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 118px;
        width: 100%;
    }
    
    #navigation {
        position: fixed;
        top: 118px;
        left: 0;
        bottom: 21px;
        width: 175px;
        height: 100%;
        padding: 0 0.5em;
        padding: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 11px;
        background-color: #EBEFF6;
        color: #003399
    
    }
    
    #content_head {
        position: fixed;
        top: 118px;
        left: 176px;
        height: 20px;
        right: 0;
        padding: 0 0.5em;
        background-color: #ff0000;
        margin-left: 0;
        margin-top: 0;
        margin-width: 0;
        margin-height: 0;
    }
    
    #content {
        position: fixed;
        top: 139px;
        left: 176px;
        bottom: 21px;
        right: 0;
        padding: 0 0.5em;
        overflow: auto;
        background-color: #0000ff;
    }
    
    #bottom {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        height: 20px;
        width: 100%;
        /*border-top: 0.2em solid #ACA250;*/
        background-color:#007DD6;
        margin-left: 0;
        margin-top: 0;
        margin-width: 0;
        margin-height: 0;
    }
    Die Divisions heißen entsprechend in der html file. Neben eben diesen und ein wenig content und Einbindung von Scripts und CSS Files ist nicht viel in der Seite enthalten.

    Die CSS File für IE5/6 (bezüglich des 2. Lösungsansatzes) sieht wie folgt aus:
    Code:
    html, body {
        padding: 0;
        overflow-y: hidden;
        overflow: visible;
    }
    #container {
        height: 100%;
        width: 100%;
        overflow: scroll;
    }
    
    #head {
        z-index: 1;
        position: absolute;
        width: 100%;
    }
    
    #navigation {
        z-index: 1;
        position: absolute;
        background-color: #EBEFF6;
    }
    
    #content_head {
        z-index: 1;
        position: absolute;
        background-color: #00ff00;
        /
        position: static;
        margin-left: 176px;
        margin-top: 131px;
        margin-right: 0px;
        margin-height: 20px;*
    }
    
    #content {
        position: static;
        background-color: #0000ff;
        margin-left: 176px;
        margin-top: 132px;
        margin-right: 0px;
        margin-bottom: 21px;
    }
    
    #bottom {
        z-index: 1;
        position: absolute;
        background-color: #ff0000;
        /
        position: static;
        margin-left: 0px;
        margin-bottom: 0px;
        margin-right: 0px;
        margin-height: 20px;*
    }
    Für heute habe ich das Ganze ersteinmal aufgegeben und hoffe, dass wer von euch ne Idee hat, was ich falsch mache. Würde mich über jegliche Hilfe freuen

    Gruß Eldariel
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von eldariel87 (31.10.2008 um 19:54 Uhr)

  2. #2
    Meister(in)
    Registriert seit
    05.03.2006
    Alter
    29
    Beiträge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: ich vs IE5/6

    Ich hab mir zwar nicht alles angeschaut aber hier etwas Generelles:
    Ich würde auf diesen ganzen Javascript-Mist verzichten und alles barrierefrei halten. Für dieses Design brauchst du kein position:fixed, ich würde das anders lösen. Google ein wenig und du findest gute CSS Layouts (<- Suchbegriff), die genau dem Aufbau deiner Seite entsprechen.
    Für die scrollbaren Bereiche würde ich den divs (also in deinem Fall dem Content-div) einfach ein overflow:auto mitgeben. Mehr brauch man dafür nicht.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    31.10.2008
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: ich vs IE5/6

    Danke für den Tipp habe da nun ein paar Teile gefunden, die mir gezeigt haben, wie ich ein halbwegs brauchbares workaround baue...(ein layout, dass genau zu dem passt, was ich habe, habe ich leider nicht gefunden) nicht super schön, aber durchaus ausreichend, bis das IE7 update kommt

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •