a width bei Firefox

[Axel Hoogestraat]

Hi,

ich habe ein kleines Problem mit Firefox. Ich mach mit einer Tabelle einen "Registerreiter". Ich weiß, dass die meisten dass hier sicher mit einem kompletten DIV-CSS-Layout machen würden, aber ich bin noch relativ neu im CSS - Layout und taste mich da langsam heran (Weil nicht immer soo viel Zeit ist, bis eine Seite fertig sein muss)

So, folgendemaßen sieht das (im Ausschnitt) aus:
<table class=navigation>
  <tr>
    <td class="nav_region">Fankfurt am Main</td>
    <td class="nav_active">Startseite</td>
    <td class="nav_leer"></td>
    <td class="nav_register"><a href='xy.html'>link</a></td>
    <td class="nav_leer"></td>
    <td class="nav_register"><a href='xy.html'>link</a></td>
    <td class="nav_leer"></td>
    <td class="nav_register"><a href='xy.html'>link</a></td>
    <td class="nav_leer_ende">&nbsp;</td>
  </tr>
  ...

Nun soll die gesamt TD eines Reiters eine andere Hitnergrundfrabe bekommen, wenn ich mit der Maus über den Link fahre. Dazu folgende CSS:
.nav_register a  {
            color:#3D423E;

width:130px;
            height:22px;
        }
.nav_register a:hover  {
            background-color:#E6EFE7;
        }

130 x 22 ist auch die TD genau groß. Im IE zieht er nun den Link auf die voll Breite und Höhe (nur eine Art Hintergrund. Der Text wird nicht beeinflusst). Beim übefahren ist somit die gesamte td hinterlegt.
Firefox hinterlegt jadoch nur den Linktext und zieht das Ganze nicht größer.

Was mache ich da falsch ?

Vielen Dank im Vorraus,
schöne Grüße
Axel

[Fabian St.]

Hi!

Nun soll die gesamt TD eines Reiters eine andere Hitnergrundfrabe bekommen, wenn ich mit der Maus über den Link fahre. Dazu folgende CSS:
.nav_register a  {
            color:#3D423E;

width:130px;
            height:22px;
        }
.nav_register a:hover  {
            background-color:#E6EFE7;
        }

Ein Link ist standardmäßig ein inline-Element, d.h. es besitzt keine Breite. Mache ihn daher mit der CSS-Property display zu einem Block-Element:

  
.navRegister a {  
                  display: block;  
                  width: 130px;  
                  height: 22px;  
}  

Verzichte darüber hinaus auf Unterstriche in den Bezeichnern von Klassen, da dies Probleme bereiten könnte.

Grüße,
Fabian St.

[Detlef G.]

Hallo Axel

Im IE zieht er nun den Link auf die voll Breite und Höhe (nur eine Art Hintergrund. Der Text wird nicht beeinflusst).

Das macht der IE auch falsch!
Da a ein Inlineelement ist, hat es keine eigene Breite sondern richtet sich
immer nach dem Inhalt. Eine width-Angabe muss ignoriert werden.

Firefox hinterlegt jadoch nur den Linktext und zieht das Ganze nicht größer.

Genau das ist richtig.

Was mache ich da falsch ?

Du hast versucht einem Element versucht eine Breite zuzuweisen.
Du kannst ein Inlineelement aber auch zu einem Blockelement machen, indem
du ihm die richtige Eigenschaft für display gibst.

Auf Wiederlesen
Detlef

[Axel Hoogestraat]

Hi,

tja, manchmal sind es kleine Dinge :-)

Vielen Dank Euch beiden.

...Das mit den Unterstrichen wusste ich nicht, ich werde mich in Zukunft daran halten, auch ohne zu Wissen, was denn dabei schief gehen kann *winkmitdemzaunpfahl*

Nochmal vielen Dank
schöne Grüße
Axel

[schneemann]

Hi,

...Das mit den Unterstrichen wusste ich nicht, ich werde mich in Zukunft daran halten, auch ohne zu Wissen, was denn dabei schief gehen kann *winkmitdemzaunpfahl*

Zumindest in Netscape 4.x wurden dann die entsprechenden CSS-Klassen mit Unterstrichen ignoriert. Ob das in aktuellen Browsern Auswirkungen hat, weiß ich nicht.

Ciao

[Cheatah]

Hi,

Zumindest in Netscape 4.x wurden dann die entsprechenden CSS-Klassen mit Unterstrichen ignoriert.

zumindest in Netscape 4.x sind bei Unterstrichen Abstürze(!) nicht ausgeschlossen.

Cheatah