Fehldarstellung mehrer Listenmenüs im Firefox

[f4s38ds4f8]

Hallo Freunde

ich habe ein Problem:

Ich habe folgende Website mit CSS programmiert.

Es gibt aber den Fehler, dass die Menü Listen im Firefox (s. Bild) keinen Abstand haben, wie beim IE wo ichs programmiert habe.

Bitte helft mir!!!

http://img521.imageshack.us/img521/3014/darstellimfirefoxml2.png

euer kollege f4s38ds4f8

danke im voraus

[suit]

Ich habe folgende Website mit CSS programmiert.

css kennt keine programmierung, css ist eine deklarative sprache - nur in imperativen sprachen kann programmiert werden

Es gibt aber den Fehler, dass die Menü Listen im Firefox (s. Bild) keinen Abstand haben, wie beim IE wo ichs programmiert habe.

auch wenn dus nicht beim ie programmiert hast ist es dennoch ein fehler gewesen, das ganze am ie orientiert zu machen

mein rat:
wirf dein css weg (zumindest den teil fürs menu) und machs neu, bis es in firefox, opera und safari wie gewünscht aussieht (siehe unten)
dann kannst du dich mit dem ie und seinen verschiedenen versionen auseinandersetzen (stichwort: conditional comments und die von mir weniger bevorzugten hacks)

Bitte helft mir!!!

hört sich schlimm an ;)

http://img521.imageshack.us/img521/3014/darstellimfirefoxml2.png

<glaskugel>
viele beispiele die dir vielleicht helfen
</glaskugel>

[Cheatah]

Hi,

Ich habe folgende Website mit CSS programmiert.

geschrieben. Zum Programmieren benötigst Du eine Programmiersprache.

Es gibt aber den Fehler, dass die Menü Listen im Firefox (s. Bild) keinen Abstand haben, wie beim IE wo ichs programmiert habe.

Dein Fehler ist es, den IE für Primärtests zu verwenden, obwohl dessen Ergebnisse keinerlei Aussagewert haben.

Bitte helft mir!!!

1.) Validiere Deine Codes.
2.) Vergiss alle Codes, die Du primär mit dem IE getestet hast.
3.) Schreibe Deine Codes so, dass sie im Firefox funktionieren.
4.) Validiere Deine Codes.
5.) Teste im IE und korrigiere mit handelsüblichen Hacks gezielt dessen Fehler.
6.) Validiere Deine Codes.
7.) Wenn Du auf Probleme stößt, die Du alleine nicht lösen kannst, frage so nach, dass andere das Problem nachvollziehen können.

Ein "im IE geht's, in Firefox nicht" lässt grundsätzlich nur eine Aussage zu: Du machst etwas falsch.

Und der IE auch.

Cheatah

[Tom]

Hello,

Zum Programmieren benötigst Du eine Programmiersprache.

Genau: Back to the roots.
Die Elemente wurden assembliert   *grins*

Ein harzliches Glückauf

Tom vom Berg

[Engelein]

Ich habe folgende Website mit CSS programmiert.

"Webseiten werden nicht …" - ach nee, den Witz hatte ich gestern schon.

Es gibt aber den Fehler, dass die Menülisten im Firefox (s. Bild)

Dein "siehe Bild" ist ungefähr so präzise als wenn du sagen würdest, der Berliner S-Bahnhof wäre hübsch.

keinen Abstand haben, wie beim IE wo ichs programmiert habe.

Da das Problem im Bild vielleicht zu sehen, aber nicht zu erkennen ist, und du vor allen Dingen keinen Code mitgeliefert hast (schon mal in die Werkstatt gegangen, gesagt, man möge dein Auto reparieren, aber das Auto zu Hause gelassen?), kann ich dir nur aus Erfahrung sagen, dass du bei Benutzung von CSS unbedingt im standardkonformen Modus arbeiten (wenn jeder Browser macht, wie er lustig ist, kann man keine einheitlichen Ergebnisse erwarten), sowie die Meldungen des HTML- und CSS-Validators beherzigen solltest (denn: garbage in, garbage out).

[f4s38ds4f8]

Also danke schon mal für eure Antworten:

1. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftonart-werther.de&profile=css21&usermedium=all&warning=1&lang=de
   ^^mein CSS ist validiert

2. Ich habe folgenden im Menü:

#menu
{
float: left;
background-color: #d9d9cc;
width: 100%;
height: 25px;
line-height: 25px;
background-image:url(../images/menu.gif);
margin-top: 10px;
}
ul#menu_ul
{
list-style-type: none;
margin: 0px;
}
ul#menu_ul li
{
display: inline;
margin-left: 0px;
}
ul#menu_ul a
{
display: block;
float: left;
text-decoration: none;
color: #000097;
background-image:url(../images/menu.gif);
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
}
ul#menu_ul a:hover
{
display: block;
float: left;
text-decoration: none;
color: #d9d9cc;
background-image:url(../images/menu_hover.gif);
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
}
ul#menu_ul a.auswahl
{
display: block;
float: left;
text-decoration: none;
color: #d9d9cc;
background-image:url(../images/menu_hover.gif);
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
border-width: 2px;
border-style: solid;
border-color: #000097;
}
ul#menu_ul li.login
{
text-align: right;
}

#untermenu
{
margin-top: 10px;
margin-left: 10px;
float: left;
border-top-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 1px;
border-style: solid;
border-color: #000097;
width: 250px;
min-height: 300px;
line-height: 20px;
}
ul#untermenu_ul
{
list-style-type: none;
margin-left: 0px;
}
ul#untermenu_ul li
{
display: block;
}
ul#untermenu_ul a
{
display: block;
font-family: Verdana;
font-size: 10pt;
color: #000097;
text-decoration: none;
height: 20px;
width: 100%;
background-color: #FFFFFF;
}
ul#untermenu_ul a:hover
{
display: block;
font-family: Verdana;
font-size: 10pt;
color: #d9d9cc;
text-decoration: none;
height: 20px;
width: 100%;
background-color: #000097;
}
ul#untermenu_ul a.main
{
display: block;
font-family: Verdana;
font-size: 10pt;
color: #d9d9cc;
text-decoration: none;
height: 20px;
width: 100%;
background-color: #000097;
}

Da ich erst 14 bin habe ich noch nicht die Erfahrungen mit Hacks und den anderen Dingen mit denen man den IE beeinflussen kann. Ich habe mich in der letzten Zeit nämlich eher auf PHP spezialisiert und brauchte erst jetzt wieder ein vernünftiges CSS Template für mein PHP Sytem.

Über antworten würde ich mich freuen und bedanke mich schon mal im Voraus!!!

f4s38ds4f8

[ChrisB]

Hi,

1. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftonart-werther.de&profile=css21&usermedium=all&warning=1&lang=de
      ^^mein CSS ist validiert

Das beste, schoenste, fabelhafteste CSS nuetzt wenig bis gar nichts - wenn das HTML, auf dem es aufsetzen soll, Murks ist.

Und deins ist Murks - zunaechst mal hast du einen Fehler in der Doctype-Angabe, so dass der Validator sich weigert, das Dokument zu ueberpruefen.
Und wenn du den beseitigt hast, dein Dokument sich also gegen XHTML 1.0 Transitional ueberpruefen laesst - dann sind's immer noch 88 Fehler, das sind genau 88 zu viel.

MfG ChrisB

[f84blablabla]

Hi,

1. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftonart-werther.de&profile=css21&usermedium=all&warning=1&lang=de
      ^^mein CSS ist validiert

Das beste, schoenste, fabelhafteste CSS nuetzt wenig bis gar nichts - wenn das HTML, auf dem es aufsetzen soll, Murks ist.

Und deins ist Murks - zunaechst mal hast du einen Fehler in der Doctype-Angabe, so dass der Validator sich weigert, das Dokument zu ueberpruefen.
Und wenn du den beseitigt hast, dein Dokument sich also gegen XHTML 1.0 Transitional ueberpruefen laesst - dann sind's immer noch 88 Fehler, das sind genau 88 zu viel.

Und das sind ganz viele Fehler, die dieser böde Validator nicht checkt, die durch PHP kommen und die komischen Links die dadurch entstehen.....

Kann mir nicht einfach mal einer einen Lösungsvorschlag für die Seite geben damit die in jedem Browser gleich aussieht???

MfG ChrisB

[ChrisB]

Hi,

zitiere bitte vernuenftig, und nicht einfach alles.

Und wenn du den beseitigt hast, dein Dokument sich also gegen XHTML 1.0 Transitional ueberpruefen laesst - dann sind's immer noch 88 Fehler, das sind genau 88 zu viel.

Und das sind ganz viele Fehler, die dieser böde Validator nicht checkt,

Wenn du nicht in der Lage bist, diese Fehler zu beseitigen - dann ist nicht der Validator bloede, sondern ...

die durch PHP kommen

Welche meinst du - die hier?

cannot generate system identifier for general entity "menu"

Die "kommen" nicht "durch PHP".

PHP erzeugt nur die Ausgabe, die du ihm zu erzeugen aufgetragen hast.

und die komischen Links die dadurch entstehen.....

RTFM: http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_html

MfG ChrisB

[Engelein]

Und das sind ganz viele Fehler, die dieser böde Validator nicht checkt, die durch PHP kommen und die komischen Links die dadurch entstehen.....

Das Problem ist nicht der Validator, sondern dein Code. Das Und-Zeichen (&) ist reserviert, wenn du es in den Daten habe möchtest, musst du &amp; schreiben - das gilt ausdrücklich überall, auch in Attributen:

Falsch:  <li><a href="?page=home&menu=home&subm=home">Home</a></li>

Richtig: <li><a href="?page=home&amp;menu=home&amp;subm=home">Home</a></li>

(Ja, der Browser ruft trotzdem die gewünschte URL auf.)

Gibst du Daten mit PHP aus, dann verwende grundsätzlich die Funktion htmlspecialchars(). Immer, überall, jedesmal, damit vermeidest du nicht nur kleinere Fehler wie obigen, sondern auch, dass dir bei einem Projekt, wo von Dritten Eingaben gemacht werden können, jemand Code unterschiebt.

Beherzigst du diese Vorgehensweise, hast du fast alle HTML-Fehler beseitigt und der Rest ist offensichtlicher Murks (<a href=?page=home>, <ul> ohne <li>-Elemente), den du so ganz bestimmt nicht haben und eh noch korrigieren wolltest.

Als Dokumenttyp solltest du davon unabhängig besser die strict-Variante nehmen, nicht transitional. Ob HTML 4 strict oder XHTML 1 strict ist in Sachen standardkonformer Modus egal.

Kann mir nicht einfach mal einer einen Lösungsvorschlag für die Seite geben damit die in jedem Browser gleich aussieht???

Wie soll dir jemand einen Lösungsvorschlag geben, wenn du immer noch nicht erklärt hast, wo _genau_ das Problem liegt? Welche "Menülisten" sollen keine Abstände haben? Ich sehe auf deinem Bild keine fehlenden Abstände, in meinem IE 6 sind die Abstände eher noch kleiner als im Firefox, und ein Bild deines IE bzw. des gewünschten Zustandes hast du nicht geliefert.
Solange du keine nachvollziehbare Fehlerbeschreibung lieferst, wirst du keine Hilfe bekommen. Hier kann niemand hellsehen und auch keiner Gedanken lesen. (Und wenn sich Leute alles aus der Nase ziehen lassen, werden hier manche schnell unwirsch.)

Dass ausgerechnet eine deiner Listen fehlerhaft ist (untermenu_ul enthält statt <li>-Elementen zwei Absätze), macht die Sache davon abgesehen nicht leichter.

Also:
1. Korrigiere den HTML-Code.
2. Liefere ein Bild des gewünschten Zustandes. Markiere, wenn nötig, die problematischen Bereiche in einem Malprogramm mit einem großen roten Kringel.
3. Bekomme Hilfe.

[f4s38ds4f8]

Und das sind ganz viele Fehler, die dieser böde Validator nicht checkt, die durch PHP kommen und die komischen Links die dadurch entstehen.....

Das Problem ist nicht der Validator, sondern dein Code. Das Und-Zeichen (&) ist reserviert, wenn du es in den Daten habe möchtest, musst du &amp; schreiben - das gilt ausdrücklich überall, auch in Attributen:

Falsch:  <li><a href="?page=home&menu=home&subm=home">Home</a></li>

Richtig: <li><a href="?page=home&amp;menu=home&amp;subm=home">Home</a></li>

(Ja, der Browser ruft trotzdem die gewünschte URL auf.)

Gibst du Daten mit PHP aus, dann verwende grundsätzlich die Funktion htmlspecialchars(). Immer, überall, jedesmal, damit vermeidest du nicht nur kleinere Fehler wie obigen, sondern auch, dass dir bei einem Projekt, wo von Dritten Eingaben gemacht werden können, jemand Code unterschiebt.

Beherzigst du diese Vorgehensweise, hast du fast alle HTML-Fehler beseitigt und der Rest ist offensichtlicher Murks (<a href=?page=home>, <ul> ohne <li>-Elemente), den du so ganz bestimmt nicht haben und eh noch korrigieren wolltest.

Als Dokumenttyp solltest du davon unabhängig besser die strict-Variante nehmen, nicht transitional. Ob HTML 4 strict oder XHTML 1 strict ist in Sachen standardkonformer Modus egal.

Kann mir nicht einfach mal einer einen Lösungsvorschlag für die Seite geben damit die in jedem Browser gleich aussieht???

Wie soll dir jemand einen Lösungsvorschlag geben, wenn du immer noch nicht erklärt hast, wo _genau_ das Problem liegt? Welche "Menülisten" sollen keine Abstände haben? Ich sehe auf deinem Bild keine fehlenden Abstände, in meinem IE 6 sind die Abstände eher noch kleiner als im Firefox, und ein Bild deines IE bzw. des gewünschten Zustandes hast du nicht geliefert.

Bilder siehe unten

Solange du keine nachvollziehbare Fehlerbeschreibung lieferst, wirst du keine Hilfe bekommen. Hier kann niemand hellsehen und auch keiner Gedanken lesen. (Und wenn sich Leute alles aus der Nase ziehen lassen, werden hier manche schnell unwirsch.)

Fehlerbeschreibung: Im Internet Explorer ist der Menüpunkt "Home" direkt am linken Browserrand. Der Firefox macht bei der Liste aber keinen Abstand.

Dass ausgerechnet eine deiner Listen fehlerhaft ist (untermenu_ul enthält statt <li>-Elementen zwei Absätze), macht die Sache davon abgesehen nicht leichter.
alles klar

ansicht im Internet Explorer:
http://img242.imageshack.us/my.php?image=imieyw4.png

ansicht im Firefox: http://img521.imageshack.us/img521/3014/darstellimfirefoxml2.png

Ich hätte es gerne wie im Internet Explorer

Also:

1. Korrigiere den HTML-Code.

habe ich gemacht

2. Liefere ein Bild des gewünschten Zustandes. Markiere, wenn nötig, die problematischen Bereiche in einem Malprogramm mit einem großen roten Kringel.

siehe oben

3. Bekomme Hilfe.

ich hoffe darauf

[Kai345]

[latex]Mae  govannen![/latex]

ansicht im Internet Explorer:
http://img242.imageshack.us/my.php?image=imieyw4.png

ansicht im Firefox: http://img521.imageshack.us/img521/3014/darstellimfirefoxml2.png

Ich hätte es gerne wie im Internet Explorer

Auch im Safari(win) und Opera sieht die Seite aus wie mit Firefox, das heißt, du hast noch Arbeit vor dir ;)

Zuerst ergänzt du in deinem CSS mal (da es eine generelle Deklaration ist, empfiehlt es sich, diese ziemlich am Anfang
zu schreiben)

ul {  
  margin: 0;  
  padding: 0;  
}

um die (unterschiedlichen) browsereigenen Angaben unwirksam zu machen und einen gemeinsamen Bezugspunkt zu erreichen.

(Kannst du natürlich auch nur für bestimmte ULs machen, aber dann können und werden bei den Anderen weiterhin solche Probleme wie deines auftreten))

Danach wird die Seite wahrscheinlich etwas „defekt“ ausehen. Wenn du das mit margin und padding für die jeweiligen Elemente bzw Elementgruppen wieder ausgeglichen hast (im FF zu testen) sollte es theoretisch auf standardkonformen Browsern wie FF, Opera und Safari schon mal gleich und „richtig“ aussehen.

Ob und wie du dann den IEs noch mit spezifischen Angaben weiterhelfen mußt, wirst du danach ja sehen.

Cü,

Kai

[Engelein]

ansicht im Internet Explorer:
http://img242.imageshack.us/my.php?image=imieyw4.png

Der IE benutzt für den Listenrand den Außenabstand margin, Firefox stattdessen den Innanabstand padding. Setze zusätzlich padding-left auf 0, dann hockt das Menü auch im Firefox am linken Fensterrand.

Tipp am Rande: Installiere in deinem Firefox die Erweiterung Firebug. Damit kannst du ohne ständiges Neuladen der Seite CSS-Eigenschaften direkt im Browser ausprobieren bzw. Fehler korrigieren.

Zuerst ergänzt du in deinem CSS mal (da es eine generelle Deklaration ist, empfiehlt es sich, diese ziemlich am Anfang
zu schreiben)

ul {

margin: 0;
  padding: 0;
}

>   
> um die (unterschiedlichen) browsereigenen Angaben unwirksam zu machen und einen gemeinsamen Bezugspunkt zu erreichen.  
  
Finde ich so generell etwas unklug, weil damit die Listenpunkte \_sämtlicher\_ Listen links über den normalen Textrand hinausfallen,  
  
statt so:                 sieht es dann so aus:  
  
   Textgrenze hier        Textgrenze hier  
   |                      |  
   Blafasel               Blafasel  
   \*  Punkt 1          \*  Punkt 1  
   \*  Punkt 2          \*  Punkt 2  
   \*  Punkt 3          \*  Punkt 3  
   Blafasel               Blafasel  
  
Wenn man deswegen hinterher die Hälfte wieder korrigieren muss, kann man's auch gleich bei spezifischen Angaben belassen, d.h. nur beim betreffenden Menü margin = padding = 0 setzen.  
Zumindest aber sollte man sich dieser Nebenwirkung bewusst sein.  

[at]

Hallo.

statt so:                 sieht es dann so aus:

Textgrenze hier        Textgrenze hier
   |                      |
   Blafasel               Blafasel
   *  Punkt 1          *  Punkt 1
   *  Punkt 2          *  Punkt 2
   *  Punkt 3          *  Punkt 3
   Blafasel               Blafasel

Weder sieht es bisher zwangsläufig wie beschrieben aus, noch wäre eine andere Darstellung zwangsläufig schlechter.
MfG, at

[f4s38ds4f8]

Vielen Dank für eure  Hilfe!

Ich konnte das Problem mit der einfachen Angabe padding-left: 0px; beheben, man muss halt wissen wie der Firefox usw. das interpretieren.

Viele Grüße
ich