Categories

Links

License

Creative Commons License

Unless otherwise expressly stated, all original material of whatever nature created by and included in this weblog is licensed under a Creative Commons License.

Rechnen mit CSS, 14.03.2004 12:43

Im Stylesheet dieser Seite findet sich unter anderem folgende Styledefinition:

#rechts li a {
	display: block;
	border-bottom: 1px solid #FFFFFF;
	width: 100% - 30px;
	padding-left: 30px;
}

Diese macht, dass die Links im rechten Submenu auf der ganzen Breite funktionieren und nicht nur wenn man auf den Text klickt.
Zuerst hatte ich die Weite auf 100% gesetzt. Jedoch hat der Mozilla wegen der 30px Padding noch 30px ausserhalb des Rahmens angezeigt. Mit overflow: hidden habe ich versucht das Problem zu lösen. Jedoch hat das nicht funktioniert, da es ja kein eigentlicher overflow ist.
Schlussendlich bin ich durch ausprobieren von garantiert fehlerhaften Styledefinitionen auf die jetztige Lösung gekommen. Natürlich validiert das nun nicht mehr als korrektes CSS, aber es funktioniert :-)

Da ich nun keine Windows-Maschine mehr habe, wäre ich froh um Screenshots vom Submenu, wenn mit der Maus über ein Link gefahren wird (a:hover).

comments

  • Almilade - 14.03.2004 14:21
  • mozilla 1.6?
    IE 6.0?
    IE 5.5?

    Wat de willst, nur sagen musst dus mir.
  • x-way - 24.03.2004 17:54
  • http://waterwave.ch/weblog
  • Bei mir funktionierts mit Firefox (Linux), IE5 (W2K) und Safari. Die Browser sollten insofern reagieren, dass sie das rechte Menu innerhalb der grauen Box anzeigen und nicht 30px davon ausserhalb.
    Beim IE funktioniert es IMHO, weil er die Rechnerei gar nicht wahrnimmt, aber den padding-Wert falsch interpretiert (zur Weite hinzuzählt).
    Vielleicht kannst du einen Screenshot machen, damit ich das Problem erkennen/beheben kann?

blog comments powered by Disqus