nicht angemeldet
grafikhöhe für ältere browser bestimmen (css)
1 0 0 0 0 0
grafikhöhe für ältere browser bestimmen (css)
Gunnar BittersmannHi Leute,
irgendwie stehe ich wohl aufm Schlauch oder ich hab irgendwas nicht begriffen. ich habe eine Grafik 171x1px (Linie). Nun möchte ich diese auch genauso dargestellt haben. Mit folgenden Code geht das auch einwandfrei in den aktuellen Browsern (ie7, firefox3):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.hr1 {
height: 1px;
background-image: url(img/bkg_mainnav_sub1x.png);
}
</style>
</head>
<body>
<div class="hr1"></div>
</body>
</html>
nur wenn ich ältere ie teste (v4.01, 5.01, 5.5, 6) wird immer eine ca 10px breite Linie erzeugt. Wie ist der workaround für dieses Problem - oder geht das garnicht?
tausend Dank für eure Hilfe
bebbi
:-)
-
Hi,
nur wenn ich ältere ie teste (v4.01, 5.01, 5.5, 6) wird immer eine ca 10px breite Linie erzeugt.
Ja, weil diese IEs height wie min-height interpretieren, und immer Platz fuer die Buchstabenhoehen eines eventuellen Textinhalt des Elements reservieren.
Wie ist der workaround für dieses Problem - oder geht das garnicht?
Zusaetzlich overflow:hidden angeben.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
tausend dank,
ich hab noch nie (und ich mach das schon etwas länger) so schnell eine antwort bekommen - und es funzt...
grüße aus dem süden
bebbi...jetzt erst mal die kinder ins bett bringen und dann weiter coden...:-)
-
hi zusammen,
jetzt hat alles super gefunzt (das mit der Linie) und dennoch habe ich leider einen punkt immer noch nicht zum Laufen gebracht. Im aktuellen IE (7) und firefox (3) läuft das teil genauso wie ich es brauche nur in den älteren ieS geht es immer noch nicht - und zwar´sind die abstände zwischen den Menüpunkten Ebene1 viel zu groß. Vielleicht hab ich sie auch falsch definiert mit paddig-top...
Anbei der ganze code - es ist ein Derivat von den selfhtml Navleisten und ich fummle schon den ganzen Tag daran herum - das ganze soll mein erstes großes Projekt mit reiner css Formatierung werden.
Tausend Dank für die Hilfe falls es dafür überhaupt eine Lösung gibt - oder muß ich alles ganz anders coden?viele grüße aus dem süden...
bebbiund hier nun das gute stück:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit mehreren Ebenen</title>
<style type="text/css">
body {
font-size: 11px;
font-family: Verdana, Arial;
color: #C1D3E6;
background-color: #999999;
}ul#mainnav {
width: 171px;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
}ul#mainnav li {
list-style: none;
margin: 0px;
padding-top: 3px;
}ul#mainnav li ul {
margin: 0 0 0 0px;
padding: 0px;
}ul#mainnav li ul li {
margin: 0px 0px;
padding-top: 0px;
}ul#mainnav li a, ul#mainnav li span {
font-size: 11px;
font-family: Verdana, Arial;
color: #054E98;
display:block;
padding: 8px 14px 8px 0px;
text-decoration: none;
background-color: #EBEBEB;
text-align: right;
font-weight: bold;
}ul#mainnav li a:hover, ul#mainnav li span {
background-color: #09519D;
color: #FFFFFF;
}ul#mainnav li ul li a, ul#mainnav li ul li span {
color: #09519D;
display: block;
padding: 8px 14px 8px 0px;
text-decoration: none;
background-color: #E2EAF4;
font-weight: normal;
}ul#mainnav li ul li a:hover, ul#mainnav li ul li span {
background-color: #F6F9FC;
color: #061C34;
border-width: 5px 9px;
border-style: solid;
border-color: #E2EAF4;
padding: 3px 5px 3px 0px;
}.hr1 {
height: 1px;
background-image: url(img/bkg_mainnav_sub1x.png);
overflow: hidden;
}
</style>
</head>
<body>
<h1>Mehrere Navigationsebenen</h1>
<ul id="mainnav">
<li><a href="#Beispiel">Ebene 1 - A</a></li>
<li><span>Ebene 1 - B - aktiv</span>
<ul>
<li><a href="#Beispiel">Ebene 2 - A</a><div class="hr1"></div></li>
<li><span>Ebene 2 - B - aktiv</span><div class="hr1"></div></li>
<li><a href="#Beispiel">Ebene 2 - C<br>zweizeilig</a></li>
</ul>
</li>
<li><a href="#Beispiel">Ebene 1 - C</a></li>
<li><a href="#Beispiel">Ebene 1 - D</a></li>
</ul>
</body>
</html>-
Hi,
in den älteren ieS geht es immer noch nicht - und zwar´sind die abstände zwischen den Menüpunkten Ebene1 viel zu groß.
Das liegt am Whitespace zwischen den Tags - der ist in aelteren IE problematisch.
<li><a href="#Beispiel">Ebene 2 - A</a><div class="hr1"></div></
Dieses inhaltsleere Div als Hilfskonstruktion, nur im eine Linie als Verzierung unterzunbringen, ist allerdings mehr als unschoen.
Warum gibst du nicht den Links oder den LI einfach einen Rahmen?MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
hi Chris,
danke für die schnelle Antwort :-)Das liegt am Whitespace zwischen den Tags - der ist in aelteren IE problematisch.
Im Orginal sind garkeine whitespaces vorhanden - und es geht trozdem nicht... ich hab schon einige stunden getüftelt aber bin immer noch nicht auf einen workaround gestoßen... hmmm - irgendwie kann ichs garnicht glauben das es keinen workaround für die älteren teile gibt hmmm...
<li><a href="#Beispiel">Ebene 2 - A</a><div class="hr1"></div></
Dieses inhaltsleere Div als Hilfskonstruktion, nur im eine Linie als Verzierung unterzunbringen, ist allerdings mehr als unschoen.
finde ich auch - das ist die Vorgabe der Layouterin - um das zu vermeiden habe ich den ganzen nachmittag gefummelt - irgendwie hab ich es mit border nicht zum laufen gebracht weil ich den border für den weißen mouseover effekt benötigt habe - ich würde auch lieber eine schönere konstruktion haben. ausserdem soll die linie bei dem letzten menüpunkt (ebene2) weggelassen werden - das hab ich auch nicht gebacken bekommen...
Warum gibst du nicht den Links oder den LI einfach einen Rahmen?
s.o. - irgendwie bin ich wollte ich so nah als möglich an der vorgabe bleiben...
MfG ChrisB
-
Hi,
Im Orginal sind garkeine whitespaces vorhanden - und es geht trozdem nicht...
Ich habe sie aus deinem Beispielcode entfernt - und natuerlich "ging" es damit.
Dieses inhaltsleere Div als Hilfskonstruktion, nur im eine Linie als Verzierung unterzunbringen, ist allerdings mehr als unschoen.
finde ich auch - das ist die Vorgabe der Layouterin - um das zu vermeiden habe ich den ganzen nachmittag gefummelt - irgendwie hab ich es mit border nicht zum laufen gebracht weil ich den border für den weißen mouseover effekt benötigt habe
Ich sehe nicht, warum du dazu border benoetigen solltest - dazu reicht es doch aus, die Hintergrundfarbe des Links zu aendern.
Abstaende natuerlich ueber margin/padding herstellen.ausserdem soll die linie bei dem letzten menüpunkt (ebene2) weggelassen werden - das hab ich auch nicht gebacken bekommen...
Na dann mache ihn halt fuer CSS identifizierbar, und gebe ihm dann explizit keinen solchen border.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
hi Chris,
vielen vielen Dank das du dir meine Sachen anschaust
leider geht es bei mir immer noch nicht oder wir meinen was verschiedenes - daher habe ich das zeugs mal hochgeladen:
das teil an sich:
http://www.earthquake-productions.com/css_demo/nav_demo13f.html
so soll es aussehen:
http://www.earthquake-productions.com/css_demo/demo_ok.png
so sieht es in ie 6, 5.5, 5.01, 4.01 aus:
http://www.earthquake-productions.com/css_demo/demo_bad.png
die dicken weißen Linien sind das Problem zwischen den Punkten der Hauptebene...Ich sehe nicht, warum du dazu border benoetigen solltest - dazu reicht es doch aus, die Hintergrundfarbe des Links zu aendern.
Abstaende natuerlich ueber margin/padding herstellen.das hatte ich heute nachmittag probiert - ich mach mich nochmal dran...
ausserdem soll die linie bei dem letzten menüpunkt (ebene2) weggelassen werden - das hab ich auch nicht gebacken bekommen...
Na dann mache ihn halt fuer CSS identifizierbar, und gebe ihm dann explizit keinen solchen border.
das klingt soooo spannend und ich würde das soooo gerne können - aber leider habe ich keine Ahnung wie. Wenn ich das könnte wäre ich auch in der Lage noch ein oder zwei andere Probleme zu lösen die ich schon immer mal angehen wollte...
nochmals....
tausend Dank für die professionelle Unterstützung
und viele Grüße aus dem Süden
bebbi:-)
MfG ChrisB
-
Hi,
leider geht es bei mir immer noch nicht oder wir meinen was verschiedenes
Ich meine das, was ich geschrieben habe - Whitespace zwischen den Tags.
Und der ist in deinem Beispiel immer noch vorhanden.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
danke Chris,
jetzt hab ichs auch kapiert - die Zeilenumbrüche waren es...
Gibt es irgendeine Möglichkeit diese zu ersetzen damit man immer noch eine übersichtliche Strukturierung hat oder muß man einfach mit einer ewig langen Zeile leben?
Dann wünsche ich erstmal einen schönen Feierabend und nochmals tausend Dank für die Hilfe - morgen mach ich mich nochmal an das Teil....
viele Grüße aus dem verschneiten Süden
bebbi-
Hi,
jetzt hab ichs auch kapiert - die Zeilenumbrüche waren es...
Gibt es irgendeine Möglichkeit diese zu ersetzen damit man immer noch eine übersichtliche Strukturierung hat oder muß man einfach mit einer ewig langen Zeile leben?Zeilenumbrueche nicht zwischen den Tags, sondern in den Tags machen, z.B.
<li>...</li<li>...
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
wirklich cool...
vielen vielen Dank
Grüße aus dem Süden
FrankHi,
jetzt hab ichs auch kapiert - die Zeilenumbrüche waren es...
Gibt es irgendeine Möglichkeit diese zu ersetzen damit man immer noch eine übersichtliche Strukturierung hat oder muß man einfach mit einer ewig langen Zeile leben?Zeilenumbrueche nicht zwischen den Tags, sondern in den Tags machen, z.B.
<li>...</li<li>...
MfG ChrisB
-
-
-
-
-
@@ChrisB:
ausserdem soll die linie bei dem letzten menüpunkt (ebene2) weggelassen werden - das hab ich auch nicht gebacken bekommen...
Na dann mache ihn halt fuer CSS identifizierbar, und gebe ihm dann explizit keinen solchen border.
Der letzte Menüpunkt ist bereits für CSS identifizierbar: mit der Pseudoklasse ':last-child' [CSS3-SELECTORS §6.6.5]:
li { border-bottom: 1px solid #F00; } li:last-child { border-bottom: 0 none; }Noch eleganter geht’s mit der Pseudoklasse ':not' [CSS3-SELECTORS §6.6.7]:
li:not(:last-child) { border-bottom: 1px solid #F00; }IEs bekommen das mit CSS-Expressions gebacken:
li { border-bottom: expression( [code lang=javascript](function (element) { element.style.borderBottom = (element.nextSibling ? "1px solid #F00" : "0 none"); })(this) ~~~ ); }[/code] Achtung: Safari stoppt die Abarbeitung des Stylesheets, wenn in einer CSS-Expression eine anonymen FUnktion steht. ([Das sollte es aber.](http://bittersmann.de/articles/css-expressions/)) Deshalb solche Regeln als letzte im Stylesheet notieren! Live long and prosper, Gunnar -- Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
-
-
-
-