CSS in FIREFOX und IE, problem mit blocksatz und listendesign Einstellungen

[tobias82]

hi leude,

habe zwei probleme mit css in firefox. bislang.

1: habe eine liste erstellt, die ich als inline-navi benutze. macht er auch. nur leider sind die einzelnen listenpunkte genau so lang wie das enthaltene wort und nicht wie ich es mit width und height bestimmt habe. der ie intepretiert die größenangaben absolut richtig und es sieht richtig gut aus....

2: ich will blocksatz mit text-align:justify; verwenden. der ie machts, firefox weiß nich was er damit anfangen soll.

und nun doch noch ne 3. frage: was heißt es und wie macht man es: validieren bei www.w3.org.

vielen dank für eure hilfe!

[tobias82]

habe mittlerweile schon etwas mehr hinbekommen. mit padding top und right konnte ich wenigstens die background bilder etwas vergrößern. der text des links, also inhalt des <li> tags lässt sich aber nicht verschieben. text-align scheint firefox bei listen überhaupt nicht zu beachten. egal an welcher stelle ich ihn einfüge, er bleibt stur auf der linken seite.

hier der quellcode

#topnavi {
font-family: trebuchet ms, arial;
font-weight: bold;
font-size: 15;
border: none;
height:27;


}

#topnavi li {
display: inline;
}

#topnavi li a {
background: url(button_normal_gif.gif) right;
text-decoration: none;
margin-right: 10;
margin-bottom: 4;
color: black;
padding-right: 50;
padding-top: 5;
padding-bottom: 5;
text-align: center;
}

#topnavi li a:hover {
width: 110;
height: 27;
background: url(button_aktiv_gif.gif);
text-decoration: none;
margin-right: 10;
margin-bottom: 4;
color: black;
text-align: center;
padding-right: 50;
padding-top: 5;
padding-bottom: 5;

}

#topnavi li a:active {
width: 110;
height: 27;
background: url(button_aktiv_gif.gif);
text-decoration: none;
margin-bottom: 4;
margin-right: 10;
color: black;
text-align: center;
padding-right: 50;
padding-top: 5;
padding-bottom: 5;
}

[markusm]

http://jigsaw.w3.org/css-validator/validat...&usermedium=all

[i.b.g]

Hallo

also immer langsam mit den jungen Pferden:

zu 1.
Schau mal in die HTML- und CSS-Recommendations von welchem Typ die li-Tags sind und welche Attribute erlaubt sind und welche nicht. Manchmal hilft das echt weiter. Dann könntest Du sicher erfahren, dass Block- und Inline-Elemente unterschiedlich reagieren. Eventuell hilft Dir, über list-style-type und float in Verbindung mit width nachzudenken und dafür display nicht zu ändern.

zu 2.
Mein Moz/FF kennt das sehr wohl.

zu 3.
Die Validatoren prüfen, ob Deine HTML, CSS oder die Links usw. den festgelegten Standards genügen und nicht mit falschen oder propritären Tags oder Eigenschaften versehen sind. Sie sind nicht mehr und nicht weniger als Syntaxchecker. Die Benutzung ist selbsterklärend.

[edit] Da war einer schneller! [/edit]

Der Beitrag wurde von i.b.g bearbeitet: 03.09.2005 - 14:02

[Auge]

Hallo

Nehmen wir das Ganze mal auseinander:

#topnavi {
font-family: trebuchet ms, arial;
font-weight: bold;
font-size: 15;
border: none;
height:27;
}

1. bei font-family fehlt noch die Angabe einer generischen Schriftart. In diesem Falle wäre das "sans-serif". Der Grund: Wenn bei einem Benutzer keine der angegebenen Schriftarten installiert ist, nimmt der Browser seine Standardschriftart. Die kann aber ganz anders aussehen. Um dem Browser aber zu ermöglichen, die Seite in Hinsicht auf die Schrift zumindest ähnlich darzustellen, gibt man die generische Schriftart an, womit der Browser eine andere, ähnliche Schrift benutzt.

2. Bei font-size und height gibst du nach der numerischen Angabe keine Maßeinheit an. In CSS ist dies aber vorgeschrieben, anders als bei entsprechenden HTML-Attributen, bei denen automatisch die Einheit Pixel angenommen wird, wenn keine Einheit notiert ist. Das ist auch der Grund, warum der Moz/FF diese Angaben ignoriert.

#topnavi li {
  display: inline;
}

#topnavi li a {
background: url(button_normal_gif.gif) right;
text-decoration: none;
margin-right: 10;
margin-bottom: 4;
color: black;
padding-right: 50;
padding-top: 5;
padding-bottom: 5;
text-align: center;
}

Um die Navigation in Form einer Liste horizontal anzuzeigen, ist das display:inline; für die li-Elemente richtig. Damit geht aber einher, dass man diesen keine Breite mehr zuweisen kann. Dies geht nur für Blockelemente, du hast sie aber (vollkommen richtig) zu Inlineelementen gemacht.

[edit]: i.b.gs Hinweis zu float ist auch ein Lösungsansatz. Eine gute und reichhaltige Sammlung von Beispielen der CSS-Formatierung von Navigationslisten findest du bei Listamatic.[/edit]

Daher:
3. Mache die in den li-Elementen enthaltenen Links (<a></a>) zu Blockelementen (display:block;). Somit kannst du ihnen mit z.B. width:12em; auch eine feste Breite zuweisen.
4. Nur wenn du einem Element eine Breite zuweist, kann der darin enthaltene Text anders als mit text-align:left; formatiert werden. Hat das Element keine festgelegte Breite, die größer als der Inhalt ist, ist das Element nur so breit, wie sein Inhalt. Daher wirkt sich deine Angabe optisch nicht aus. Wenn der MSIE etwas anderes anzeigt, zeigt er es falsch an!

#topnavi li a:hover {
width: 110;
height: 27;
margin-right: 10;
margin-bottom: 4;
padding-right: 50;
padding-top: 5;
padding-bottom: 5;

}

#topnavi li a:active {
width: 110;
height: 27;
margin-bottom: 4;
margin-right: 10;
padding-right: 50;
padding-top: 5;
padding-bottom: 5;
}

Auch hier gelten die obigen Punkte:
- keine Maßeinheiten angegeben
- width:...; hat keine Wirkung in Inlineelementen.

Wobei die Breite bei #topnavi li a angegeben werden sollte, da sie sich ja wohl nicht bei einer Zustandsänderung (:link, :visited, :hover, :active, :focus) verändern soll. Sie muss somit nur einmal angegeben werden.

Und noch einmal zum Mitmeißeln:
- Wenn der MSIE etwas so anzeigt, wie du es willst, es aber in anderen, modernen Browsern "falsch" angezeigt wird, heißt das (fast immer) nicht, dass er das richtig anzeigt.
- Setze dich mit den Grundlagen von CSS auseinander.
- Benutze im Stadium der optischen Gestaltung der Seite den FF als primären Testbrowser. Er hält sich am dichtesten an die Standards.
- Danach kannst du die Darstellungsfehler [1] z.B. im MSIE mit CSS-Browserweichen oder Conditional-Comments abfangen.

[1] Deren Gründe du ja durch das Erlernen der CSS-Grundlagen identifizieren kannst. :-)

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 03.09.2005 - 19:43

[tobias82]

vielen dank für eure ausführliche hilfe. mittlerweile siehts auch schon besser aus, wenngleich ich durch die angabe von "px" keine veränderungen erkennen konnte. sowohl mit als auch ohne zeigt sowohl firefox als auch ie die css-infos richtig an.

width und height konnte ich nun einwandfrei dank block element bestimmen, jedoch funktioniert jetzt inline nicht mehr. obwohl ich es im vorausgehenden li element definiert habe und nicht erst im li a element wo die block info steht...

wenn das problem gelöst ist, dann hab ich mein navi so wie ich es will....nochmals vielen dank!

und hier der aktuelle css-code:

#topnavi {
border: none;
}

#topnavi li {
display: inline;
}

#topnavi li a {
display: block;
width: 110px;
background: url(button_normal_gif.gif) right;
text-decoration: none;
margin-right: 10px;
margin-bottom: 4px;
color: black;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}

#topnavi li a:hover {
display: block;
width: 110px;
background: url(button_aktiv_gif.gif);
text-decoration: none;
margin-right: 10px;
margin-bottom: 4px;
color: black;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;


}

#topnavi li a:active {
display: block;
width: 110px;
background: url(button_aktiv_gif.gif);
text-decoration: none;
margin-bottom: 4px;
margin-right: 10px;
color: black;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}

[Auge]

vielen dank für eure ausführliche hilfe. mittlerweile siehts auch schon besser aus, wenngleich ich durch die angabe von "px" keine veränderungen erkennen konnte. sowohl mit als auch ohne zeigt sowohl firefox als auch ie die css-infos richtig an.

Dann ist selbst der FF fehlertoleranter, als ich dachte.

width und height konnte ich nun einwandfrei dank block element bestimmen, jedoch funktioniert jetzt inline nicht mehr. obwohl ich es im vorausgehenden li element definiert habe und nicht erst im li a element wo die block info steht...

Was funktioniert jetzt nichtmehr?

#topnavi {
border: none;
}

none ist der Standardwert für border, muss deshalb nicht extra angegeben werden.

#topnavi li a { ... }
#topnavi li a:hover { ... }
#topnavi li a:active { ... }

kann wie folgt zusammengefasst werden:

QUELLTEXT

#topnavi li a {
display: block;
width: 110px;
background: url(button_normal_gif.gif) right;
text-decoration: none;
margin-right: 10px;
margin-bottom: 4px;
/* evtl. margin-Angabe für alle vier Seiten gleichzeitig */
/* dafuer obige Einzelangaben raus */
margin:0 10px 4px 0;
color: black;
padding-top: 5px;
padding-bottom: 5px;
/* evtl. padding-Angabe für alle vier Seiten gleichzeitig */
/* dafuer obige Einzelangaben raus */
padding:5px 0;
text-align: center;
}

#topnavi li a:hover {  background: url(button_aktiv_gif.gif); }

#topnavi li a:active {  background: url(button_aktiv_gif.gif); }

Alle anderen Angaben bei a:hover und a:active sind identisch zu a.

Tschö, Auge

[tobias82]

das mit der zusfas isn guter tipp zur übersichtlichkeit, danke!

ansonsten zur frage was nicht mehr funktioniert:

mein menü soll horizontal angeordnet sein, deshalb die inline eigenschaft. wenn ich jetzt aber block verwende um die breite und höhe einstellen zu können, vernachlässigt er den inline-tag und macht mir ein vertikales menü draus.

wie löse ich diesen tag-konflikt?

danke wie immer und ein schönes wochenende!

[Google Bot]