✔ navigation verschieden in firefox und ie

Status
Nicht offen für weitere Antworten.
Grille

Grille

Erfahrenes Mitglied
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 " :mad:

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: 
.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); 
}

und das die html:
PHP: 
<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>
</table>

ausserdem bleibt der a:aktive Zustand nicht im FIREFOX.

Über jeder Hifreiche Bemerkung bin ich Dankbar.

Liebe Gruße,
Grille
 
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.
 
Zur Zeit habe ich diese Doctype-Zeile:

PHP: 
<!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?
 
Ich habe mir gerade eine Webseite zu diesem Thena genauer durchgelesen:
http://carsten-protsch.de/zwischennetz/doctype/einleitung.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: 
<script type="text/javascript">
document.write("Darstellungsmodus:" + document.compatMode);
</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.
Zum Vergrößern anklicken....

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.
Zum Vergrößern anklicken....

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.
 
Zuletzt bearbeitet:
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.
 
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.
 
Nimm line-height:50px anstelle von height:50px und lass die vertical-align:middle-Deklaration weg.
 
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.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück