tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
12
ZUGRIFFE
503
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 14.09.07 14:10 #1
    Avatar von Grille
    Grille Grille ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Ort
    Berlin
    Beiträge
    230
    hallo,

    ich möchte hier kurz zum Ausdruck bringen, dass ich die Softwarentwickler von Browsern abgrundtief HASSE. " UARGHHHH SCH:: KÖNNEN DIE SICH NICHT AN EINEN STANDART HALTEN "

    ich habe dieses Problem:
    Ich will eine Navigationsleiste machen die, so wie sie jetzt aussieht im IE richtig ist, und im FIREFOX ist der Button 20 pixel zu hoch.

    das ist das css:
    PHP-Code:
    [LEFT].divbutton a { 
    text-decoration: none;
    display: block; 
    padding: 20px 0px 0px 0px; 
    margin: 0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10pt;
    font-weight:bold;
    text-align: center;
    color: #333;
    height:50px;
    width:100px;
    float: left;
    background-image: url(../images/schaltflaechen/gvb_menue_ia.gif); 
    }

    .    divbutton a:hover {
    color: #333; 
    background-image: url(../images/schaltflaechen/gvb_menue_ak.gif); 
    }

    .    divbutton a:active {
    color: #333; 
    background-image: url(../images/schaltflaechen/gvb_menue_ak.gif); [/LEFT]
    } 
    und das die html:
    PHP-Code:
    [LEFT]<table width="900" border="0" cellpadding="0" cellspacing="0">
      <    tr>
        <    td width="300" height="50"><img src="images/layout/gvb_schriftzug.gif"></td>
        <    td width="1600" height="50">
          <    div class='divbutton'><a href="#Beispiel">Startseite</a></div>
          <    div class='divbutton'><a href="#Beispiel">Verband</a></div>
          <    div class='divbutton'><a href="#Beispiel">Service</a></div>
          <    div class='divbutton'><a href="#Beispiel">Veranstaltung</a></div>
          <    div class='divbutton'><a href="#Beispiel">Archiv</a></div>
        </    td>
      </    tr>[/LEFT]
    </    table> 
    ausserdem bleibt der a:aktive Zustand nicht im FIREFOX.

    Über jeder Hifreiche Bemerkung bin ich Dankbar.

    Liebe Gruße,
    Grille
     
  2. 14.09.07 14:21 #2
    Maik Tutorials.de Gastzugang
    Hi,

    wie es aussieht, übergibst du das Dokument im "Quirksmode", weshalb sich der IE nicht an das Boxmodell hält und die padding-top:20px nicht zur height-Deklaration hinzuaddiert.

    Firefox hingegen interpretiert das Stylesheet korrekt, und stellt die Box demnach 70px hoch.

    Fazit: Übergib das Dokument im Standardsmode und verringere die Höhenangabe um 20px.

    Die :active-Pseudoklasse gilt nur bei gedrückter Maustaste.
     
  3. 14.09.07 14:38 #3
    Avatar von Grille
    Grille Grille ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Ort
    Berlin
    Beiträge
    230
    Zur Zeit habe ich diese Doctype-Zeile:

    PHP-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    sollte man nicht versuchen so sauber wie möglich das HTML zu schreiben? Was bedeutet "Quirksmode" ... eine andere Art der interpretation? Beeinflusst das nur den IE oder auch den Firefox?
     
  4. 14.09.07 14:47 #4
    Maik Tutorials.de Gastzugang
    Also bei mir werden die Links in allen Browsern 70px (height:50px + padding-top:20px) hoch dargestellt.

    http://de.wikipedia.org/wiki/Quirksmode
     
  5. 14.09.07 15:03 #5
    Avatar von Grille
    Grille Grille ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Ort
    Berlin
    Beiträge
    230
    Ich habe mir gerade eine Webseite zu diesem Thena genauer durchgelesen:
    http://carsten-protsch.de/zwischenne...inleitung.html

    da wird vorgeschlagen, dann man diesen javascript-code in das Webprojekt eintragen soll, um eine Ausgabe zu bekommen, un welchem modus der jeweilige browser sich gerade befindet.

    PHP-Code:
    [LEFT]<script type="text/javascript">
    document.write("Darstellungsmodus:" + document.compatMode);[/LEFT]
    </script> 
    bei mir ist bei beiden Browser die ausgabe: " Darstellungsmodus:BackCompat " zu lesen und weiter heist es in der Beschreibung:

    Im Quirks Mode erhält man als Wert BackCompat oder QuirksMode, im Standards Mode CSS1Compat.
    Die sagen auch:
    Viele Autoren von HTML-Dokumenten behelfen sich, indem sie die Browser im Quirks Mode belassen. Dieses Vorgehen sollte aber nicht als Lösung des Problems betrachtet werden, da es nur die Symptome (ungewolltes Aussehen der Webseite), nicht aber die Ursachen (fehlerhafter oder unvollständiger Code) beseitigt. Außerdem kann das Verhalten der verschiedenen Browser im Quirks Mode sehr unterschiedlich sein, so daß Darstellungsunterschiede im Quirks Mode sehr viel wahrscheinlicher sind als im Standards Mode.
    Ich habe aber auch das Gefühl, dass an diesem Javaskript was faul ist, weil ich mit den vorgeschlagenen Beispielen versucht habe den Browser in den "Full Standards Mode" zu versetzen, aber die Ausgabe den Javaskripts immer noch "Darstellungsmodus:BackCompat" ist.
    Geändert von Grille (14.09.07 um 15:10 Uhr)
     
  6. 14.09.07 15:08 #6
    Maik Tutorials.de Gastzugang
    Dann hast du aber nicht den o.g. Doctype für das Dokument deklariert, denn mit diesem gibt das Script erwartungsgemäß "Darstellungsmodus:CSS1Compat" aus, und bestätigt meine Annahme in meiner ersten Antwort, dass das Dokument im "Quirksmode" übergeben wird, weshalb der IE sich nicht an das Boxmodell hält.
     
  7. 14.09.07 15:28 #7
    Avatar von Grille
    Grille Grille ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Ort
    Berlin
    Beiträge
    230
    Stimmt ... du hast recht.

    ich hatte über meinen meinem Dokument eine PHP-Variable ausgegeben, so dass schon vor dem " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">" ein Text stand. Alle Browser haben daher gleich auf "Darstellungsmodus:BackCompat" geschalten.

    ich versuche jetzt einfach das pedding wegzulassen da dieses dazu da war die Schrift im Button etwas in die Mitte zu schieben, habe ich es mit "vertical-align:middle;" versucht. das hat aber keiner meiner Browser gemacht.

    Jetzt habe ich im Button über der Schrift ein "<br>" gesetzt .. nun klappts auch wenn es wenig professionell ist.
     
  8. 14.09.07 15:31 #8
    Maik Tutorials.de Gastzugang
    Nimm line-height:50px anstelle von height:50px und lass die vertical-align:middle-Deklaration weg.
     
  9. 14.09.07 15:49 #9
    Avatar von Grille
    Grille Grille ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Ort
    Berlin
    Beiträge
    230
    Danke .. es klappt sehr gut einfach die Grundlinie der Schrift zu verschieben, wobei ich aber height:50px belassen habe: das soll die Buttonhöhe festlegen.

    das einzige Problem was ich noch habe: Firefox verschiebt die Backgroundgrafik um einem Pixel nach unten. gibt es da eine Möglichkeit nur diesem Browser zu sagen: "verschieb es um eins noch oben"?

    ich bin noch im CSS1Compat-Darstellungsmodus.
    Geändert von Grille (14.09.07 um 15:51 Uhr)
     
  10. 14.09.07 15:52 #10
    Maik Tutorials.de Gastzugang
    Hast du mal einen Link zur Seite?
     
  11. 14.09.07 16:13 #11
    Avatar von Grille
    Grille Grille ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Ort
    Berlin
    Beiträge
    230
    das Projekt ist auf meinem Entwicklungsserver ... die von PHP ausgegebene HTML ist hier mit allen Grafiken und CSS zu sehen: http://www.schauart.de/

    Leider lässt Firefox noch so einen wiederlichen gepunkteten Rahmen um den Button stehen nachdem man den angeklickt hat. Aber ich hoffe das ist weg wenn PHP die Seite neu geladen hat.
    Geändert von Grille (14.09.07 um 16:17 Uhr)
     
  12. 14.09.07 16:29 #12
    Maik Tutorials.de Gastzugang
    Versuch es mal mit dieser Regelerweiterung für die Grafikelemente:

    Code :
    1

    img { display:block; }
    denn die Hintergrundbilder werden nicht um einen Pixel nach unten verschoben, sondern vielmehr eine Lücke zwischen den DIVs gesetzt.
     
  13. 14.09.07 22:59 #13
    Avatar von Grille
    Grille Grille ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Ort
    Berlin
    Beiträge
    230
    ja .. das funktioniert .. danke
     
« "margin: auto" und IE | Headline links und Optionen rechts? »

Ähnliche Themen

  1. CSS für IE und Firefox verschieden
    Von qsrs im Forum CSS
    Antworten: 4
    Letzter Beitrag: 19.08.10, 15:56
  2. IE - Firefox - Navigation
    Von oldputz1990 im Forum CSS
    Antworten: 1
    Letzter Beitrag: 31.05.08, 23:52
  3. Navigation mit Javascript geht nicht in Firefox
    Von ronaldo84 im Forum Javascript & Ajax
    Antworten: 14
    Letzter Beitrag: 12.06.05, 14:49
  4. Problem mit Navigation IE vs. Firefox
    Von Calimero78 im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 12.05.05, 01:23
  5. Unterschiedliche Interpretation der Navigation von IE und Firefox
    Von karmababy im Forum CSS
    Antworten: 5
    Letzter Beitrag: 09.05.05, 22:52