mozilla und das leidige css

[Andreas Pakulat]

Hi, hab nur mal ne Frage ob das Verhalten bei euch auch so ist. Folgender CSS-Auszug:

/*Beschriftung für KarteireiterKopf, inaktives Element*/
#tablist
{
 font-family: Arial, sans-serif;
 font-size: 14px;
 font-style:normal;
 color: #006699;
 float: left;
 background-color: #FFFFFF;
 line-height:normal;
}
#tablist ul
{
 list-style:none;
 margin:0;
 color:#FF0000;
 padding:10px 10px 0;
}
#tablist li
{
 background: url(/Bilder/right-inactive-tab.png) no-repeat right top;
 float: left;
 margin:0;
 color:#00FF00;
 padding:0;
}
#tablist #current
{
 background: url(/Bilder/right-active-tab.png) no-repeat right top;
 color:#0000FF;
}
/* Links in Karteikartenreitern dargestellt werden */
#tablist a
{
 display: block;
 padding: 5px 20px 4px 10px;
 background: url(/Bilder/left-inactive-tab.png) no-repeat left top;
}
#tablist #current a
{
 background: url(/Bilder/left-active-tab.png) no-repeat left top;
}

Dazu folgender HTML-Code Schnippsel:
<td id="tablist" style="background-color:#FFFFFF" colspan="3">
 <ul>
  <li id="current"><ahref="index_html?activetab=0">Lehrangebot</a></li>
  <li><a href="index_html?activetab=1">Kernstudium</a></li>
 </ul>
</td>

Mein Konqueror stellt das ganze wie gewuenscht als Karteireiter dar. Mozilla (1.7.3) jedoch packt die 2 Listenelement untereinander und ausserdem bringt das die weiteren Tabellen durcheinander, denn das colspan="3" wird nicht korrekt interpretiert...

Andreas

[Andreas Pakulat]

Dazu folgender HTML-Code Schnippsel:
<td id="tablist" style="background-color:#FFFFFF" colspan="3">
<ul>
  <li id="current"><ahref="index_html?activetab=0">Lehrangebot</a></li>
  <li><a href="index_html?activetab=1">Kernstudium</a></li>
</ul>
</td>

Gleich noch ein Nachtrag von mir: In meinem HTML-Code steht natuerlich nicht "ahref" sondern wie es sich gehoert "a href" drin.

Andreas

[Christoph Schnauß]

morgens,

<li id="current"><ahref="index_html?activetab=0">Lehrangebot</a></li>
  <li><a href="index_html?activetab=1">Kernstudium</a></li>

Fällt dir was auf?

Mein Konqueror stellt das ganze wie gewuenscht als Karteireiter dar

Ja, der entwickelt langsam eine ähnliche Fehlertoleranz wie der IE. Übrigens: welche Version fährst du (zwischen KDE 3.2 und KDE 3.3 gibts grade für den Konqueror ein paar Unterschiede)

Mozilla (1.7.3) jedoch packt die 2 Listenelement untereinander

Womit er recht haben dürfte. Das erste "li" ist schließlich leer bzw. mit undefinierten Zeichenfolgen gefüllt. Das heißt, dein "#tablist li" existiert dort nicht, das erste Listenelement ist nicht formatiert (eigentlich ist es gar nicht vorhanden bzw es wird nicht geschlossen), erst das zweite ist es. Mach aus dem "ahref" ein "a href", wie es sich gehört, und verpasse auch dem zweiten "li" eine ID, dann dürfte es klappen.

Grüße aus Berlin

Christoph S.

[MudGuard]

Hi,

/*Beschriftung für KarteireiterKopf, inaktives Element*/
#tablist
{
font-family: Arial, sans-serif;
font-size: 14px;
font-style:normal;
color: #006699;
float: left;
background-color: #FFFFFF;
line-height:normal;
}

float ohne explizite Breite ist ungültig.
Siehe http://www.w3.org/TR/REC-CSS2/visuren.html#floats - zweiter Absatz:
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).

#tablist li
{
background: url(/Bilder/right-inactive-tab.png) no-repeat right top;
float: left;
margin:0;
color:#00FF00;
padding:0;
}

float ohne explizite Breite ist ungültig, s.o..

Ein li ist - ohne explizite Breitenangabe - so breit wie möglich, sprich 100%.
Wenn ein Browser also das float trotz fehlender Breitenangabe zu interpretieren versuchte, müßte er feststellen, daß kein zweites li neben das erste paßt, da dieses erste li ja bereits die gesamte Breite benötigt.

Dein Code ist falsch, damit ist das, was ein Browser damit macht, nicht vorhersehbar.

cu,
Andreas

[Andreas Pakulat]

Hi,

/*Beschriftung für KarteireiterKopf, inaktives Element*/
#tablist
{
font-family: Arial, sans-serif;
font-size: 14px;
font-style:normal;
color: #006699;
float: left;
background-color: #FFFFFF;
line-height:normal;
}

float ohne explizite Breite ist ungültig.
Siehe http://www.w3.org/TR/REC-CSS2/visuren.html#floats - zweiter Absatz:
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).

Ok, das wird langsam merkwuerdig. Der Mozilla stellt naemlich folgende Seite korrekt dar:

http://www.alistapart.com/d/slidingdoors/v1/ex3.html

Und dort ist nur fuer #header (was meinem #tablist ja entspricht) eine width von 100% angegeben.

Ein li ist - ohne explizite Breitenangabe - so breit wie möglich, sprich 100%.
Wenn ein Browser also das float trotz fehlender Breitenangabe zu interpretieren versuchte, müßte er feststellen, daß kein zweites li neben das erste paßt, da dieses erste li ja bereits die gesamte Breite benötigt.

Dein Code ist falsch, damit ist das, was ein Browser damit macht, nicht vorhersehbar.

Hmm, dem w3c CSS-Validator hat mein CSS aber gefallen. Der hat nichts daran angemeckert. Egal ein unvorhersehbares Verhalten des Browsers wuerde wenigstens erklaeren warum es mal geht und mal nicht.

Grad mal einen Test gemacht: Das Problem ist nicht das Stylesheet. Wenn ich eine Breite von 25% angebe sind die beiden li's uebereinander und das immernoch in der rechten Spalte. Ich stelle mal nen Screenshot online. Mir scheint, dass der Mozilla eher ein Problem mit der Tabelle hat.

Andreas

[Andreas Pakulat]

Ein li ist - ohne explizite Breitenangabe - so breit wie möglich, sprich 100%.
Wenn ein Browser also das float trotz fehlender Breitenangabe zu interpretieren versuchte, müßte er feststellen, daß kein zweites li neben das erste paßt, da dieses erste li ja bereits die gesamte Breite benötigt.

Dein Code ist falsch, damit ist das, was ein Browser damit macht, nicht vorhersehbar.

Hmm, dem w3c CSS-Validator hat mein CSS aber gefallen. Der hat nichts daran angemeckert. Egal ein unvorhersehbares Verhalten des Browsers wuerde wenigstens erklaeren warum es mal geht und mal nicht.

Also die Loesung ist "relativ" einfach: Mozilla "verschluckt" das colspan="3" wenn eine id angegeben wird. Wenn ich die id auf das ul anwende werden die Listenelemente nebeneinander dargestellt. Mal schauen was die Mozilla-Leute dazu sagen. Im Konqueror gehts, und Opera machts auch richtig.

Bleibt nur noch 2 Sachen:1. Ich muss das list-style:none; in die allgemeine Definition von "#tablist" nehmen. Wenns im Bereich "#tablist ul" steht wirds nicht angewendet.

2. Wenn ich die width-Angabe in das "#tablist" Element hineinnehme und auf 100% ansetze, dann wird das Element 100% Breit in bezug auf die Seite, nicht auf die Tabellenzelle! Ist das normal? Wenn ich dagegen die Angabe weglasse ists zwar ok in Mozilla und Konqueror aber Opera stellt dann die Elemente untereinander dar :-(

Andreas

[Andreas Pakulat]

Und nochmal ich...

Also die Loesung ist "relativ" einfach: Mozilla "verschluckt" das colspan="3" wenn eine id angegeben wird. Wenn ich die id auf das ul anwende werden die Listenelemente nebeneinander dargestellt. Mal schauen was die Mozilla-Leute dazu sagen. Im Konqueror gehts, und Opera machts auch richtig.

Das

Bleibt nur noch 2 Sachen:1. Ich muss das list-style:none; in die allgemeine Definition von "#tablist" nehmen. Wenns im Bereich "#tablist ul" steht wirds nicht angewendet.

Ok, offensichtlich ist das ein "Denkfehler" meinerseits. Hab mich mit den Selektoren-Geschichten von CSS noch nicht so intensiv beschaeftigt. Der Mozilla macht es also richtig...

2. Wenn ich die width-Angabe in das "#tablist" Element hineinnehme und auf 100% ansetze, dann wird das Element 100% Breit in bezug auf die Seite, nicht auf die Tabellenzelle! Ist das normal? Wenn ich dagegen die Angabe weglasse ists zwar ok in Mozilla und Konqueror aber Opera stellt dann die Elemente untereinander dar :-(

Aber die Frage bleibt bestehen, also folgendes:

#tablist
{
...
width:100%;
}

Und wenn dann das ul-Element 'id="tablist"' hat wird es breiter als die Tabellenzelle ist!

Andreas

[Jan L.]

Hallo,

Und wenn dann das ul-Element 'id="tablist"' hat wird es breiter als die Tabellenzelle ist!

Wahrscheinlich ist es dann 100% + dem Standard-Padding für ein <ul>
breit (was ja auch richtig ist). Setze doch mal 'padding' für '#tablist'
auf 0 (und vielleicht auch 'margin' und 'border').

Tip: In solchen Fällen kannst du testweise immer mal einen 1 Pixel
breiten Rahmen um alle Elemente machen, damit du siehst welches da
eventuell ein voreingstelltes 'margin' oder 'padding' hat (oder die
Web Developer Extension für Mozilla-Browser benutzen, die dir unter dem
Menüpunkt 'Outline' ein hilfreiches Werkzeug dafür zur Verfügung stellt).

Gruß, Jan