nicht angemeldet
suit
suit
suit
suit
Matthias Apsel
suit
Matthias Apsel
Hi,
ich brauche einen "CSS-Hack" um für alle Fx>=6 andere Styles angeben zu können.
Prinzipiell ginge das ja mit Selektoren mit Vendor-Prefix die erst ab der entsprechenden Firefox Version erkannt werden.
Nur leider finde ich keinen der ab Fx6 geht.
Kennt jemand einen?
Oder eine andere Möglichkeit?
Hier der Code der zur unterschiedlichen Darstellung führt:
<button>foo</button>
button {
background: orange;
cursor: pointer;
display: inline-block;
height: 23px;
line-height: 23px;
padding: 0 0 0 10px;
margin: 10px 10px 0 0;
position: relative;
border:none;
}
button:after {
content:"";
position:absolute;
right: 3px;
top: -1px;
padding-right: 10px;
background:blue;
height:23px;
}
Ich konnte beim erstellen dieses Beispiels nur noch auf Fx3.6 und Fx6 testen, bin zu faul wieder den Fx5 zu installieren. Dürfte aber auch dort anders aussehen als im Fx6?
~dave
Hi,
ich brauche einen "CSS-Hack" um für alle Fx>=6 andere Styles angeben zu können.
Ich behaupte jetzt mal einfach, dass du so einen Hack nicht brauchst. Darf man fragen wie du darauf kommst, dass du einen brauchst? Denn wenn es nur darum geht, dass deine Seite unterschiedlich dargestellt wird würde ich fast vermuten, dass dein HTML/CSS nicht ganz so Standardkonform ist.
Was sagt denn der Validator zu deinem Code?
Ich behaupte jetzt mal einfach, dass du so einen Hack nicht brauchst. Darf man fragen wie du darauf kommst, dass du einen brauchst? Denn wenn es nur darum geht, dass deine Seite unterschiedlich dargestellt wird würde ich fast vermuten, dass dein HTML/CSS nicht ganz so Standardkonform ist.
Ich würde auf den line-height-Bug (im Zusammenhang mit button bzw. input[type=button] und inline-block) tippen, den Mozilla scheinbar endlich korrigiert hat.
Resultat ist/war, dass der Text weiter unten steht, als er eigentlich soll. Fix ist hier ein zusätzlicher padding-bottom, damit der Text trotzdem zentriert ist.
Aber der OP verschweigt glücklicherweise den tatsächlichen Fehler und sagt nur "geht nicht" :)
Was sagt denn der Validator zu deinem Code?
Der ist in Ordnung.
Hi,
Aber der OP verschweigt glücklicherweise den tatsächlichen Fehler und sagt nur "geht nicht" :)
Der Fehler ist die unterschiedliche Darstellung des Buttons im <Fx6 und >=Fx6.
Wenn dir Informationen fehlen wäre es nett wenn du sagst welche, denn ich weiß nicht was ich noch hätte dazu schreiben können.
Ich hab den Ist-Zustand mit Online-Beispiel erklärt, habe gesagt was "nicht funktioniert" (nämlich dass es in allen halbwegs aktuellen Fx gleich angezeigt wird) und habe auch meinen Versuch einer Lösung erklärt (CSS-Hack), bei der ich Hilfe bräuchte.
~dave
Wenn dir Informationen fehlen wäre es nett wenn du sagst welche, denn ich weiß nicht was ich noch hätte dazu schreiben können.
z.B. was du eigentlich vor hast.
Wenn du Buttons mit runden Ecken und flexibler Breite willst, nimm doch einfach border-radius und die Sache ist erledigt.
Hi,
z.B. was du eigentlich vor hast.
Wenn du Buttons mit runden Ecken und flexibler Breite willst, nimm doch einfach border-radius und die Sache ist erledigt.
Genau das möchte ich. Und zwar auch im IE8.
Um nicht doppelten Aufwand beim ändern des Buttons zu haben möchte ich alle Browser mit der gleichen Lösung bedienen.
Im IE8 mit :after und in anderen Browsern mit border-radius/background-gradients/etc. will ich daher nicht.
~dave
Genau das möchte ich. Und zwar auch im IE8.
a.button,
a.button * {
background: transparent url(../img/button_18.png) no-repeat left top;
display: inline-block;
height: 18px;
vertical-align: top;
line-height: 18px;
margin: 0;
padding: 0;
border: none;
width: auto;
position: relative;
text-align: center;
text-decoration: none;
color: #FFFFFF;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
a.button {
margin-right: 8px; /* width of right part */
vertical-align: middle;
}
a.button * {
background-position: right 0;
padding: 0 12px;
margin-right: -8px; /* width of right part (negative) */
overflow: hidden;
}
a.button input, x:-moz-any-link { padding-bottom: 2px; /* Firefox line-height bug */ }
* html a.button input { padding: 0; }
*:first-child+html a.button input { padding: 0; }
a.button:hover { background-position: left bottom; }
a.button:hover * { background-position: right bottom; }
<a class="button"><input type="submit" value="foo" /></a>
<a class="button"><span>foo</span></a>
Die Grafik dazu muss so aussehen:
___________________________ _
/ | | \
| | | |
\___________________________| |_/
___________________________ _
/xxxxxxxxxxxxxxxxxxxxxxxxxxx| |x\
|xxxxxxxxxxxxxxxxxxxxxxxxxxx| |x|
\xxxxxxxxxxxxxxxxxxxxxxxxxxx| |x/
Wobei der Linke Teil exakt in der Mitte aufhören muss und der rechte Teil 8 Pixel breit ist (vgl. margin-right: -8px; /* width of right part (negative) */)
In diesem fall muss sie 2x 18px, also 36px hoch sein.
Was zu entfernen ist, wenn du keinen Rollover-Effekt brauchst, müsstest du selbst rausfinden.
Hi,
<a class="button"><input type="submit" value="foo" /></a>
<a class="button"><span>foo</span></a>
Zusätzliches Markup, was ich nicht wollte.
Da lieber CSS-Hacks :P
Zudem sollte man a-Elemente nicht nur für Links verwenden? Musste da an [dieses Zitat](http://community.de.selfhtml.org/zitatesammlung/zitat2002) denken.
> Die Grafik dazu muss so aussehen:
>
> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_
> / | | \
> | | | |
> \\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_| |\_/
> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_
> /xxxxxxxxxxxxxxxxxxxxxxxxxxx| |x\
> |xxxxxxxxxxxxxxxxxxxxxxxxxxx| |x|
> \xxxxxxxxxxxxxxxxxxxxxxxxxxx| |x/
Allerdings habe ich so keine variable Breite oder?
Irgendwo hört die Grafik ja auf?
Das Problem hätte ich mit :after/:before und dieser Grafik nicht:
\_\_\_\_
/
|
\\_\_\_\_
\_\_\_\_\_
\_\_\_\_\_
\_\_\_
\
|
\_\_\_/
Wobei bei mir der Button den Teil in der Mitte als Hintergrund hat mit repeat-x und after/before eben die beiden Enden.
~dave
Zusätzliches Markup, was ich nicht wollte.
Da lieber CSS-Hacks :P
Du kannst das zusätzliche Markup auch mit CSS (::outside, ::after, ::before) einfügen, aber da werden die antiken Browser die keine runden Ecken verstehen ohnehin nicht mitmachen - oder du hilfst mit JavaScript nach.
Zudem sollte man a-Elemente nicht nur für Links verwenden? Musste da an dieses Zitat denken.
Ein notwendiges Übel, wenn du mit dem standardkonformen Verhaltensweisen nicht zufrieden bist (dämliche Browser bekommen eckige Buttons).
Die Grafik dazu muss so aussehen:
___________________________ _
/ | | \ | | | |
\___________________________| |_/
___________________________ _
/xxxxxxxxxxxxxxxxxxxxxxxxxxx| |x\ |xxxxxxxxxxxxxxxxxxxxxxxxxxx| |x|
\xxxxxxxxxxxxxxxxxxxxxxxxxxx| |x/Allerdings habe ich so keine variable Breite oder?
Die Grafik muss mindestens doppelt so breit (- 8 Pixel) sein, wie der breiteste Button.
Das Problem hätte ich mit :after/:before und dieser Grafik nicht:
Dafür aber das Problem mit Browsern, die das nicht können :)
Wobei bei mir der Button den Teil in der Mitte als Hintergrund hat mit repeat-x und after/before eben die beiden Enden.
Aber der line-height-Bug sucht dich heim :)
Aber du kannst dir bei meinem Code ja abschauen, wie man ihn umschifft - das Problem und die Lösung ist dieselbe.
Hi,
Zusätzliches Markup, was ich nicht wollte.
Da lieber CSS-Hacks :PDu kannst das zusätzliche Markup auch mit CSS (::outside, ::after, ::before) einfügen, aber da werden die antiken Browser die keine runden Ecken verstehen ohnehin nicht mitmachen - oder du hilfst mit JavaScript nach.
IE8 kann doch :after/:before?
Und für Browser die da Fehler haben (Firefox) geb ich eben Korrekturen mit CSS-Hacks an.
Welcher Browser kann eigentlich schon ::outside?
Dafür aber das Problem mit Browsern, die das nicht können :)
Browser die das nicht können sind nicht meine Anforderung.
Gibt doch sowieso nur den IE7 der da versagt oder?
Aber der line-height-Bug sucht dich heim :)
Aber du kannst dir bei meinem Code ja abschauen, wie man ihn umschifft - das Problem und die Lösung ist dieselbe.
Der ist mir ehrlich gesagt noch gar nicht so richtig aufgefallen, danke für den Hinweis und auch gleich die Lösung :)
~dave
Om nah hoo pez nyeetz, dave!
Aber der line-height-Bug sucht dich heim :)
Aber du kannst dir bei meinem Code ja abschauen, wie man ihn umschifft - das Problem und die Lösung ist dieselbe.
Der ist mir ehrlich gesagt noch gar nicht so richtig aufgefallen, danke für den Hinweis und auch gleich die Lösung :)
Der war doch der Grund für dein OP?!
Matthias
Hi,
Der war doch der Grund für dein OP?!
Dann verstehe ich den line-height-Bug falsch.
Mein Problem ist das absolute positionierte Pseudo-Elemente unterschiedlich positioniert werden.
line-height-Bug ist doch nur dass man für buttons keine angeben kann?
Das hat doch mit dem positionieren nichts zu tun oder?
~dave
Om nah hoo pez nyeetz, dave!
Hi,
Der war doch der Grund für dein OP?!
Dann verstehe ich den line-height-Bug falsch.
Matthias
Hi,
Der war doch der Grund für dein OP?!
Dann verstehe ich den line-height-Bug falsch.
Und was hat das jetzt mit der Positionierung von Pseudo-Elementen zu tun?
~dave
Und für Browser die da Fehler haben (Firefox) geb ich eben Korrekturen mit CSS-Hacks an.
Welcher Browser kann eigentlich schon ::outside?
Keiner der mir bekannt wäre :)
Dafür aber das Problem mit Browsern, die das nicht können :)
Browser die das nicht können sind nicht meine Anforderung.
Gibt doch sowieso nur den IE7 der da versagt oder?
Ja und der IE7 hat noch (leider) einen signifikanten Anteil - in meinen Statisiken häufig noch um die 10 %.
Hi,
Ich behaupte jetzt mal einfach, dass du so einen Hack nicht brauchst. Darf man fragen wie du darauf kommst, dass du einen brauchst? Denn wenn es nur darum geht, dass deine Seite unterschiedlich dargestellt wird würde ich fast vermuten, dass dein HTML/CSS nicht ganz so Standardkonform ist.
Ich habe ein Online-Beispiel und den Quelltext in mein Posting gepackt, zeig mir bitte was genau invalide ist. Ich kann nichts entdecken.
~dave
Om nah hoo pez nyeetz, dave!
ich brauche einen "CSS-Hack" um für alle Fx>=6 andere Styles angeben zu können.
Warum? Was sieht nicht so aus, wie es soll?
Matthias
Om nah hoo pez nyeetz, dave!
Warum? Was sieht nicht so aus, wie es soll?
Im OP hast du dafür ein Pseudoelement verwendet. Was spricht gegen border-right?
Matthias
Hi,
Im OP hast du dafür ein Pseudoelement verwendet. Was spricht gegen border-right?
In diesem vereinfachten Beispiel nichts :-)
Das Pseudo-Element bekommt nicht nur eine Hintergrundfarbe sondern ein Hintergrundbild dass den Button abschließt (mit runden Ecken und so, siehe auch die Antwort an suit).
~dave
Hi,
ich bin gerade auf die glorreiche Idee gekommen in den Changelogs zu schauen was neu ist: ::-moz-progress-bar
Warum nimmt der Chrome jetzt bei diesen Regeln die zweite?
button:after {
right: -10px;
}
#fxHack ::-moz-progress-bar,
button:after {
right:0;
}
#fxHack :-moz-any-link,
button:after {
right:10px;
}
Ich dachte "a group of selectors containing an invalid selector is invalid."
Wie kommt Chrome darauf ::-moz-progress-bar nicht als invalide zu betrachten?
~dave
Mit @-moz-document regexp(".*"){} funktionierts.
Wobei diese Frage steht:
Wie kommt Chrome darauf ::-moz-progress-bar nicht als invalide zu betrachten?
~dave