nicht angemeldet
Reiter in der Druckvorschau im IE6 abgeschnitten
Hallo,
ich habe mir eine Reiternavigation aufgebaut, die ähnlich ist zu dieser:
<head>
<style type="text/css">
li {
background-image: url("http://www.wer-weiss-was.de/img.r/page/rsswidget_back_left.png");
background-repeat: no-repeat;
display: block;
list-style: none;
padding-left: 1em;
float: left;
}
li a {
background-image: url("http://www.wer-weiss-was.de/img.r/page/rsswidget_back_right.png");
background-position: top right;
background-repeat: no-repeat;
text-decoration: none;
color: #555555;
display: block;
padding: 1em 1.5em 0.5em 0.5em;
}
</style>
<style type="text/css" media="print">
</style>
</head>
<body>
<li class="button_links"><a class="button_rechts" href="#"><strong>test</strong></a></li>
<li class="button_links"><a class="button_rechts" href="#"><strong>test test</strong></a></li>
</body>
Diese funktioniert sehr gut und liefert mir das gewünschte Ergebnis. Ein Problem tritt jedoch, auf, wenn man im IE6 die Seite in der Druckvorschau ansieht. Dann wird der rechte Rand hart abgeschnitten. Es soll aber genau so aussehen, wie in der normalen Seitenansicht.
Wenn ich nun in der print-css nachfolgende Einstellung vornehme, erscheint der rechte Rand wieder.
* html li a {
width: 1%;
}
Das Problem hierbei ist aber, dass der Text im Reiter umgebrochen ist. Da der Text dynamisch ist und auch viel länger sein kann, kann ich nicht einfach eine Breite festlegen.
Welche Einstellung muss ich vornehmen, damit die Druckvorschau im IE6 genau so aussieht, wie die normale Bildschirmansicht der Website?
-
Hi,
Wenn ich nun in der print-css nachfolgende Einstellung vornehme, erscheint der rechte Rand wieder.
* html li a {width: 1%;}
dann wird der IE hier vermutlich hasLayout benötigen, welches implizit gesetzt wird. Verwende statt dessen height:1%, welches der IE (bei overflow:visible) wie min-height implementiert hat. Es sollte somit keine negativen Einflüsse haben. Cheatah -- X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:| X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html X-Will-Answer-Email: No X-Please-Search-Archive-First: Absolutely Yes -
Hallo,
ich habe mir eine Reiternavigation aufgebaut, die ähnlich ist zu dieser:
Besser wäre der konkrete Quelltext. Optimal wäre ein Online-Beispiel.
li {
display: block;
list-style: none;list-style[-*] wird normalerweise auf die Liste (z.B. UL)
angewendet, nicht auf LI, siehe die Beispiele in der
CSS 2.1 Doku und in http://de.selfhtml.org/css/eigenschaften/listen.htm@title=SelfHTML-CSS->Listen>padding-left: 1em; float: left;Gemäss CSS 2.0 muss ein gefloatetes Element eine explizit
angegebene Breite haben. (Gemäss CSS 2.1 nicht mehr, aber
schaden kann es nichts.)}
li a {
color: #555555;
}Hier fehlt die Angabe einer Hintergrundfarbe mit genügendem
Kontrast zur Schriftfarbe (notwendig für den Fall, dass
keine Bilder geladen werden).<style type="text/css" media="print">
</style>
Steht da wirklich nichts drin?
<body>
<li class="button_links"><a class="button_rechts" href="#"><strong>test</strong></a></li>
<li class="button_links"><a class="button_rechts" href="#"><strong>test test</strong></a></li>
</body>BODY darf nicht direkt LI enthalten.
Nur UL und OL können LI enthalten.* html li a { width: 1%; }
Da der Inhalt ja offenbar breiter ist, ist es dem Zufall bzw.
den Launen des Browsers (hier nur MS IE, da *-Hack) überlassen,
was er macht. Besser wäre es, eine konkrete Breite anzugeben,
z.B. mit der relativen Einheit em:
* html li a { width: 8em; }Was ich allgemein eher merkwürdig finde, ist, dass Du die
Navigation mit ausdrucken willst. Ich benutze media="print"
normalerweise gerade dazu, gewisse Dinge, die auf dem
Papier nutzlos sind (Navigation, Links "Zum Seitenanfang"
u.s.w.) mit display:none; auszublenden.Freundliche Grüsse
Thomas-
Hallo Thomas,
vielen Dank für deine Hinweise. Zu deinen Antworten:
Besser wäre der konkrete Quelltext. Optimal wäre ein Online-Beispiel.
Das ist bereits das Beispiel. Das kannst du direkt auch bei dir lokal testen.
list-style[-*] wird normalerweise auf die Liste (z.B. UL)
angewendet, nicht auf LI, siehe die Beispiele in derIm richtigen Code gibt es auch ein umschließendes ul. Ich habe es wieder in meinen Code eingetragen, damit der Testcode auch konform ist.
Gemäss CSS 2.0 muss ein gefloatetes Element eine explizit
angegebene Breite haben. (Gemäss CSS 2.1 nicht mehr, aber
schaden kann es nichts.)Das Problem ist, dass ich eben keine feste Breite für das Element angeben kann, weil der IE6 das Element umbrechen würde, was nicht passieren darf.
<style type="text/css" media="print">
</style>
Steht da wirklich nichts drin?
Ja, weil ich es zum testen schonmal eingefügt habe. Da hinein soll später die hier gesuchte Eigenschaft eingetragen werden ;-)
Was ich allgemein eher merkwürdig finde, ist, dass Du die
Navigation mit ausdrucken willst. Ich benutze media="print"
normalerweise gerade dazu, gewisse Dinge, die auf dem
Papier nutzlos sind (Navigation, Links "Zum Seitenanfang"
u.s.w.) mit display:none; auszublenden.Das mache ich auch für die Elemente, die ich nicht benötige. Die Zeilen die ich als Beispiel genannt habe sind auf die notwendigen Elemente heruntergebrochen. Dies sind die Elemente, die auch den Fehler verursachen.
viele Grüße
-
Hallo Mister X.
Besser wäre der konkrete Quelltext. Optimal wäre ein Online-Beispiel.
Das ist bereits das Beispiel. Das kannst du direkt auch bei dir lokal testen.Klar kann ich das. Aber das erhöht meinen Aufwand...
Du solltest es den Helfern so einfach wie möglich machen,
Dir zu helfen.Wenn Du 1 x eine Datei hochlädst und dann hier einfach die URL
als Link postest, hast Du (als Hilfesuchender) 1 x den Aufwand.Wenn wir, n Helfende, das Problem nachvollziehen sollen,
müssen wir n mal den Aufwand auf uns nehmen, lokal eine
neue Datei anzulegen und zu speichern.list-style[-*] wird normalerweise auf die Liste (z.B. UL)
angewendet, nicht auf LI, siehe die Beispiele in derIm richtigen Code gibt es auch ein umschließendes ul. Ich habe es wieder in meinen Code eingetragen, damit der Testcode auch konform ist.
Ja, hoffentlich hast Du valides HTML und somit auch ein
UL-Element, das die LI umfasst.
Ich meinte aber mit dem oben zitierten Satz folgendes:
Statt
li { list-style:... }
wäre folgendes erfolgversprechender:
ul { list-style:... }Gemäss CSS 2.0 muss ein gefloatetes Element eine explizit
angegebene Breite haben.Das Problem ist, dass ich eben keine feste Breite für das Element angeben kann, weil der IE6 das Element umbrechen würde, was nicht passieren darf.
Ich meinte natürlich eine _sinnvolle_ Breite, also nicht 1% oder so
einen Hack/Murks/Quatsch, sondern z.B. 10em oder so, halt eine Breite,
die für den Text eines Navigationsbuttons ausreicht.li { display: block; float: left; width:10em; }
[Bei media="print" Dinge wie z.B. die Navigation u.s.w.
mit display:none; ausblenden]Das mache ich auch für die Elemente, die ich nicht benötige. Die Zeilen die ich als Beispiel genannt habe sind auf die notwendigen Elemente heruntergebrochen. Dies sind die Elemente, die auch den Fehler verursachen.
Also ich verstand das 1. Posting so, dass Du das Problem hast,
dass die Navigation beim Ausdrucken (bzw. in der Druckvorschau,
was ja nicht unbedingt das gleiche ist) abgeschnitten wird.
Und darum erstaunte es mich, dass Du die Navigation überhaupt
mit ausdrucken lässt.Zum Schluss noch zwei Tips für die weitere Recherche:
<http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=SelfHTML: CSS-basierte Navigationsleisten>
Google-Suche: horizontal css menuIch hoffe, das hilft Dir weiter. (Und evtl. ist der von Cheatah
genannte Hack ja schon die "Lösung" für Dein "Problem".)mft Thomas
-
-