Ergebnis 1 bis 9 von 9

Thema: Problem mit CSS und Firefox / IE

  1. #1
    Siggi
    Gast

    Standard Problem mit CSS und Firefox / IE

    Hallo!

    Habe zwei Probleme mit der Darstellung meiner Homepage im IE6! Im firefox funktioniert alles so wie ich es mir vorstelle, nur der IE spinnt ein wenig...

    www.erdeanthomas.de

    Der Content-div erstreckt sich im IE über die gesamt breite des Bodys, soll aber wie im FF zwischen den beiden sidebars sein...

    die beiden Bilder (unten) sind im IE genau mittig, sollen aber so wie im FF angezeigt werden.
    Der Footer enthält noch einen div Namens footer-inside, und an disem sind die beiden Bilder mit position:absolute angeheftet...FF interpretiert das richtrig nur der IE nicht.

    Hier ist mein CSS:

    body {
    font-family: Verdana;
    font-size: 62.5%;
    text-align: center;
    background-color: #101010;
    color: #000;
    padding: 0;
    margin: 10 10 10 10;
    }

    #page {
    width: 900px;
    background-color: black;
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    margin: 10px auto;
    }

    #rsidebar {
    padding: 0;
    border: none;
    margin: 0;
    width: 165px;
    float: right;
    overflow: auto;
    }

    #rsidebar-inside ul {
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    background-color: #101010;
    list-style: none;
    padding: 5px;
    margin: 10px;
    text-align: left;
    }

    #rsidebar-inside ul ul {
    border: none
    }

    #rsidebar-platzhalter {
    padding: 0;
    margin: 0;
    height: 512px;
    }

    #content {
    background-color: black;
    padding: 0;
    border: none;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    overflow: auto;
    }

    #content-inside {
    background-color: #101010;
    padding: 5px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: gray;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: gray;
    margin: 10px 0 0 0;
    }

    #lsidebar {
    padding: 0;
    border: none;
    margin: 0;
    width: 165px;
    float: left;
    overflow: auto;
    }

    #lsidebar-inside ul {
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    background-color: #101010;
    list-style: none;
    padding: 5px;
    margin: 10px;
    text-align: left;
    }

    #lsidebar-inside ul ul {
    border: none
    }

    #lsidebar-platzhalter {
    padding: 0;
    margin: 0;
    height: 512px;
    }

    #header {
    background-color: black;
    padding: 0;
    border: none;
    margin: 0;
    width: 100%;
    heigth: 150px;
    overflow: auto;
    }

    #header-inside {
    background-color: black;
    padding: 0;
    border: none;
    margin: 0;
    color: #FF0000;
    }

    #footer {
    background-color: black;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    margin: 10px;
    height: 20px;
    clear: both;
    overflow: auto;
    }

    #footer-inside {
    background-color: black;
    color: white;
    position: absolute;
    padding: 0;
    border: none;
    margin: 0;
    }

    #lsidebar-pic {
    background-image: url(boarder_l.jpg);
    position: absolute;
    bottom: 3px;
    left: 0px;
    padding: 0;
    margin-bottom: 10px;
    width: 138px;
    height: 512px;
    }

    #rsidebar-pic {
    background-image: url(boarder_r.jpg);
    position: absolute;
    bottom: 3px;
    left: 742px;
    padding: 0;
    margin-bottom: 10px;
    width: 138px;
    height: 512px;
    }

    #thumbs {
    padding 0;
    border: none;
    margin: 0 auto;
    }

    #wp-calendar {
    font-size: 90%;
    word-spacing: 0px;
    display: inline-table;
    border-collapse: collapse;
    width: 130px;
    margin: 0px auto;
    text-align: center;
    color: #CCCCCC;
    }



    /* Classes */



    h1, h2, h3 {
    font-family: Garamond, 'Copperplate Gothic Light', Georgia, 'Times New Roman', Serif;
    font-weight: bold;
    }

    h1 {
    font-size: 3.5em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    color: #993300;
    }

    h2 {
    font-size: 1.6em;
    color: #FF0000;
    }

    h3 {
    font-size: 1.3em;
    color: #E4D3A6;
    }

    p {
    font-size: 1.2em;
    text-align: justify;
    }

    .entry img {
    margin-left: 5px;
    margin-right: 5px;
    }

    .entry p.meta a {
    font-size: 1em;
    }

    .entry p a {
    font-size: 1em;
    }

    .entry a {
    font-size: 1.5em;
    }


    #header-inside a {
    color: #FF0000;
    }

    a {
    color: #FF6600;
    text-decoration: none;
    }

    p {
    color: #cccccc;
    }

    .entry {
    text-align: left;
    color: #cccccc;
    padding-top: 5px;
    }

    #lsidebar-inside ul ul li:before {
    content: "\00BB \0020";
    color: white;
    }

    .thumbs img {
    position:relative;
    padding-top: 5px;
    margin:0;
    }

    .thumbs img:hover{
    background: url(images/flash.gif); /* Delete this line to remove the blinkingblue frame around the thumbnails */
    }

    und hier ist meine index.php:

    http://www.erdeanthomas.de/wp-conten...mas/index.phps

    Hoffe mir kann da jemand helfen!
    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 !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Setz mal bei #lisidebar-platzhalter und bei #residebar-platzhalter die height auf ca. 700px.
    Du musst nach unten immer soviel Platz frei halten wie der content lang ist.

    Die bessere Alternative ist es, die Platzhalter ganz wegzulassen und dafür dem content eine bestimmte Breite zuzuweisen mit
    Code:
    width:550px;
    oder 60% kommt das in etwa hin.

    Nimm die Bilder aus dem footer raus und mach sie in die sidebars. Das ist von der Anordnung her konsequenter. Mit position:absolute; kommt der IE nicht immer zurecht.

  3. #3
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Siggi,
    yupp und im IE7 sind die "sonnenuntergangsbilder" auch nicht dort wo sie sein sollen.
    Viel zu viel Code und sehr unübersichtlich.-->Footer -->footerinside usw.
    Den Footer habe ich mal als Bsp. zu #footer gekürzt. Wie Sejuma habe ich auch in die Richtung gedacht und die Bilder aus dem footer in die sidebars gepackt. Läuft in FF/IE7/Opera andere konnte ich noch nicht testen.

    Das Manco sollte auch nicht verschwiegen werden a) Zentrierung und b) das das Bild noch nicht auf dem footer aufsitzt.
    sejumas Vorschlag mit festem px Wert funktioniert leider nur bei fixem Content hier ist es aber dynamisch ausgelegt.

    Gruß yeti66
    Angehängte Dateien Angehängte Dateien
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    @yeti: du bringst mich da auf eine Idee - gemeinsam sind wir stark!
    @Siggi:

    Erstelle eine Sicherungskopie deiner Datei.

    Nimm den css und html-Code von yeti.

    Weise dem #content wie beschrieben eine feste Breite zu, etwa 550px

    Ändere den #footer wie folgt (height rausnehmen):
    Code:
    #footer {
    background-color: black;
    padding: 0;color: white;
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    margin: 10px;
    Füge in die css 2 neue Klassen ein:
    Code:
    .left
    {float:left;
    margin-top:-512px;}
    
    .right
    {float:right;
    margin-top:-512px;}
    Ändere im HTML den footer-code wie folgt:

    Code:
     <div id="footer">
      [img]boarder_l.jpg[/img]
      [img]boarder_r.jpg[/img]
        Bier Trinken!
      </div>
    Passe in der CSS noch die borders im footer an oder lass sie ganz weg.

    Betrachte das Zwischenergebnis.

    Wenn's so passt, dann lösche in den sidebar-pics die background url bzw. die kompletten container.

    Viel Erfolg!

  5. #5
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    sejuma,
    das war Spitze ,
    Einzig die Höhenangabe würde ich auf -516px setzen wegen der Überdeckung mit dem footer.
    Im FF1.5/IE7/Opera9.01 ist dann alles sauber und schließt mit dem unteren Contentabschlußstrich sauber ab.

    Gruß yeti66
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Danke für die Blumen, yeti, warst schließlich der Initialfunke!
    Mit -530px schließt der untere Bildrand in etwa mit der Linie über "Bier Trinken" ab. Aber das soll der Siggi mal selbst austüfteln, wie's ihm am besten gefällt. In dieser Zeit kann er uns ja ein Bier kalt stellen

  7. #7
    Siggi
    Gast

    Standard

    Hallo!

    Danke für die Prompte Hilfe! Habe leider erst am Montag wieder Zeit das auszutesten

    Der Grund das ich die Bilder an den Footer drangeheftet habe, ist folgender: die sidebars sind ja dynamsich und deshalb meistens nicht gleich hoch, und wenn ich die Bilder in die Sidebars packe, sind die dementsprechend auch nicht auf gleicher Höhe. Und es sith ja blöd aus wenn das eine bild auf halber Höhe zu dem anderen steht... das ist der Grund gewesen, wieso ich das so kompliziert gemacht habe.

    Zum Content: Habe gelesen, das es nicht so gut ist wenn ich jedem element eine feste Breite zuteile...mindestens ein Element sollte nach möglichkeit was prozentuales haben (Bier zB.) Oder meint ihr das ist nicht so tragisch?

  8. #8
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das mit den Bildern ist ja in deinem Sinne gelöst. Sie sind im Footer und beginnen auf gleicher Höhe.
    Ich finde es sinnvoll, generell mit prozentualen Breiten zu arbeiten. Die passen sich dann auch schön den unterschiedlichen Bildschirmauflösungen an. Allerdings: wenn du mit margins-left und right arbeitest muss die Gesamtbreite kleiner als 100 % sein, da man diese Abstände ja auch noch berücksichtigen muss.
    Probiers mal mit 60 % für den content und je 17/18 % für die sidebars. Musst ggf. noch ein wenig justieren.

  9. #9
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi Siggi,

    ich will die Freude ja nicht dämpfen, mir ist die Lösung von sejuma immer noch durch den Kopf gegangen.
    1. hast Du Siggi irgend etwas verändert? Die Lösung von sejuma habe ich wo oben beschrieben getestet und lief. Deine Onlineseite läuft nicht unter IE7!!
    2. Was mir noch durch den Kopf gegangen ist:
    Wächst der Content schneller als die Sidebar funktioniert es. Solltest Du später Deine sidebar-platzhalter mit Inhalten füllen wollen und der Inhalt des Content gleich der Inhalthöhe der sidebar ist - überdecken die Seitenbilder den Inhalt der sidebar. Die Dynamik ist weg.

    Ich habe es sicherlich schlecht formuliert. Aber lege mal ein hohes Bild in den Container der sidebar und reduziere testhalber den Content um neu hinzugekommen "Selbstdarsteller-Film", dann siehst Du den Effekt.

    Gruß yeti66
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

Ähnliche Themen

  1. Problem mit Firefox
    Von Fidelis im Forum HTML & CSS Forum
    Antworten: 39
    Letzter Beitrag: 08.08.2008, 12:31
  2. Firefox Problem
    Von The User im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 11.12.2007, 14:47
  3. problem ! firefox und ie
    Von mr zoot im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 18.10.2006, 13:32
  4. Problem mit Firefox
    Von JP im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.08.2006, 17:20
  5. Firefox problem
    Von simcon94 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 22.08.2005, 15:53

Stichworte

Berechtigungen

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