nicht angemeldet
padding im CSS für jeden Browser extra definieren
0 0 
Gunnar Bittersmann
0 
MudGuard
0 Gunnar Bittersmann
padding im CSS für jeden Browser extra definieren
Hallo,
ich habe folgendes Problem:
Ich habe eine horizontale Navigationsleiste mit Hilfe der ul- und li-Elemente erstellt.
Auf Chrome, Safari und Opera wird die Navigation genauso dargestellt, wie sie sein sollte.
Nur über IE und Firefox wirkt die Navigationsleiste nicht mehr zentriert gezeigt sondern ich habe einen erheblichen Abstand auf der rechten Seite, wodurch die Navigation linksbündig wirkt.
Offenbar werden in den unterschiedlichen Browsern die Schriften in ihrem Blocksatz und ihren Zeichenabständen (vielleicht auch in der Größe/Höhe/Breite) unterschiedlich dargestellt.
Aus diesem Grunde habe ich meinen CSS-Tag folgendermaßen angepasst (siehe nav li):
nav {
width: 832px;
height: 24px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-top: 8px;
padding-left: 32px;
padding-right: 32px;
padding-bottom: 8px;
font-family: 'Lucida Console', Monaco, monospace;
font-size: 16px;
font-weight: bold;
color: white;
background-color: black;
border-left: 2px solid white;
border-right: 2px solid white;
}
nav ul {
margin: 0;
padding: 0;
padding-left: 3px;
width: 840px;
text-align: center;
valign: center;
}
nav li {
list-style: none;
float: left;
height: 24px;
padding-left: 11px;
-webkit-padding-left: 11px;
-moz-padding-left: 16px;
-o-padding-left: 11px;
-ms-padding-left: 16px;
padding-right: 11px;
-webkit-padding-right: 11px;
-moz-padding-right: 16px;
-o-padding-right: 11px;
-ms-padding-right: 16px;
position: relative;
background-color: black;
color: white;
}
Ich nehme mal stark an, dass ich für die Browser-spezifischen Angaben den Syntax anders schreiben muss. Nur wie muss dieser Syntax bez. auf das padding genau aussehen?
Habe im Web mit diversen Suchbegriffen keine passende Antwort finden können.
Hoffe, es ist erkennbar, was ich versuche zu erreichen.
Vielen Dank schon mal im voraus!
-
Meine Herren!
Ohne HTML lässt sich mit dem CSS wenig anfangen.
Ich nehme mal stark an, dass ich für die Browser-spezifischen Angaben den Syntax anders schreiben muss.
-moz, -webkit usw. sind Vendor-Prefixe, sie sollten das Testen experimenteller Technologien ermöglichen. Für Eigenschaften, die den experimentellen Status hinter sich lassen konnten und die als stabil gelten, werden die Prefix-Varianten wieder gestrichen. Sie sind nicht als Browser-Weiche gedacht. Es sollte auch klar sein, dass die stabile Implementierung eines Features den experimentellen immer vorzuziehen ist.
In den allermeisten Fällen lassen sich Browserweichen sowieso vermeiden, so vermutlich auch bei dir im Fall. Für die wenigen Fälle, wo das nicht vermeidbar ist, ist es heute Best-Practice dem HTML-Element verschiedene Klassen zu verpassen, die einen Rückschluss auf den Browser zulassen, zum Beispiel:
<html class="IE8">Eine Browserweiche im CSS könnte dann einfach so aussehen:
p { font-color: silver; } .IE8 p { font-color: pink; }Hoffe, es ist erkennbar, was ich versuche zu erreichen.
Ja, aber dein Ansatz ist falsch.
--
“All right, then, I'll go to hell.” – Huck Finn-
@@1UnitedPower:
nuqneH
ist es heute Best-Practice dem HTML-Element verschiedene Klassen zu verpassen, die einen Rückschluss auf den Browser zulassen, zum Beispiel:
<html class="IE8">Du hättest dazuschreiben sollen, dass man das nicht so ins HTML schreiben darf. Sondern z.B. per JavaScript.
Und best practice ist das auch nicht.
Alte IEs bekommen jeweils ein spezielles Stylesheet. Natürlich aus demselben Quellcode generiert wie das Standardstylesheet. http://bittersmann.de/talks/csspreproc ab Folie 26. TL;DR: Folie 33.
p { font-color: silver; }
.IE8 p { font-color: pink; }
Entschuldigung! Es wurden die folgenden Fehler gefunden (2) URI : TextArea 1 p Die Eigenschaft font-color existiert nicht : silver 2 .IE8 p Die Eigenschaft font-color existiert nicht : pink ;-) Qapla' -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Danke für die Antworten!
Ja, mit dem
display: inline-block
habe ich erreichen können, was ich wollte.
Es stimmt wohl, dass man beim heutigen Webdesign in erster Linie mit %-Breiten arbeitet. In meinem Fall hätte dies nichts geändert, weil ich im Header einen Banner habe mit 832px Breite.
Ich dachte dabei an allgemeine User, die ja als Auflösungen überwiegend 1024x768, 1200x900 oder 1440x960 benützen. Die meisten verwenden den Browser wahrscheinlich auch im Vollbild-Modus.
Wenn man eine Website auch iPhone-tauglich machen möchte, bräuchte man ohnehin noch einen gesonderten Style-Sheet, oder?
Meine derzeitige Website wäre allein vom Thema her ohnehin nicht iPhone-tauglich.Das Fireflex sieht auch sehr nützlich und interessant aus. Da kann man ja öfter mal stöbern gehen.
Wie würde bei Euch denn der Programmcode für eine multi-browser-kompatible Navigationsleiste aussehen, die aus 6 Menüpunkten besteht?
- einmal im html innerhalb des nav-Tags
- die festgesetzten Styles im CSS bezüglich des nav-Tags
Besten Dank schon mal Leute. Ihr habt mir sehr geholfen.
-
@@Druecke_die_AnyTaste:
nuqneH
Wenn man eine Website auch iPhone-tauglich machen möchte,
Es gibt unzählige andere Smartphones als das iPhone.
bräuchte man ohnehin noch einen gesonderten Style-Sheet, oder?
Nein. Sondern Media-Quries in dem einen Stylesheet.
Meine derzeitige Website wäre allein vom Thema her ohnehin nicht iPhone-tauglich.
Was hat das mit dem Thema zu tun, was die Nutzer für Geräte verwenden?
Wie würde bei Euch denn der Programmcode für eine multi-browser-kompatible Navigationsleiste aussehen, die aus 6 Menüpunkten besteht?
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Druecke_die_AnyTaste:
nuqneH
Wenn man eine Website auch iPhone-tauglich machen möchte,
Es gibt unzählige andere Smartphones als das iPhone.
bräuchte man ohnehin noch einen gesonderten Style-Sheet, oder?
Nein. Sondern Media-Quries in dem einen Stylesheet.
Meine derzeitige Website wäre allein vom Thema her ohnehin nicht iPhone-tauglich.
Was hat das mit dem Thema zu tun, was die Nutzer für Geräte verwenden?
Wie würde bei Euch denn der Programmcode für eine multi-browser-kompatible Navigationsleiste aussehen, die aus 6 Menüpunkten besteht?
Qapla'
Besten Dank!
Sieht ja echt gut aus und scheint gar nicht so schwer zu sein. Wenn man in der Vergangenheit sich noch mit Tabellen-Layout rumgequält hat und dann auf CSS umsteigt muss man die ganzen Syntax erst einmal wieder lernen.
Muss mich mal näher mit dem em-Attribut auseinandersetzen.
Sehr gutes Forum, sehr gute Community. Weiter so!
-
-
Meine Herren!
ist es heute Best-Practice dem HTML-Element verschiedene Klassen zu verpassen, die einen Rückschluss auf den Browser zulassen, zum Beispiel:
<html class="IE8">Du hättest dazuschreiben sollen, dass man das nicht so ins HTML schreiben darf.
Darf man nicht? Mit UA-Sniffing gibt es zumindest eine technische Grundlage, um das html schon auf dem Server dem entsprechend zusammen zu basteln. Gemacht wird es in der Regel clientseitig, da geb ich dir Recht.
Und best practice ist das auch nicht.
Alte IEs bekommen jeweils ein spezielles Stylesheet.
Mit Conditional-Comments gibt es eine komplentäre Möglichkeit zur Optimierung, aber sie sind kein vollständiger Ersatz für den generischen Klassen-Hack.
Was ich am liebsten sehen würde, und was sich in Zukunft hoffentlich auch durchsetzen wird, sind Weichen, die auf Feature-Detection beruhen, statt auf UA-Sniffing.
Übrigens gefällt mir der Bash gegen OOCSS in deinen Folien nicht. Wieso gibt es da keine Diskussion "The best of both worlds"? Wir sprachen neulich darüber, wie man die visuellen Klassen-Selektoren auf semantische Selektoren mappen kann.
p { font-color: silver; }
.IE8 p { font-color: pink; }
> > Entschuldigung! Es wurden die folgenden Fehler gefunden (2) > URI : TextArea > 1 p Die Eigenschaft font-color existiert nicht : silver > 2 .IE8 p Die Eigenschaft font-color existiert nicht : pink Das ist mir dann beim Absenden auch aufgefallen ;) Passiert mir immer wieder… -- “All right, then, I'll go to hell.” – Huck Finn-
@@1UnitedPower:
nuqneH
Mit UA-Sniffing
Pfui.
gibt es zumindest eine technische Grundlage,
die beliebig ungenau ist.
Alte IEs bekommen jeweils ein spezielles Stylesheet.
Mit Conditional-Comments gibt es eine komplentäre Möglichkeit zur Optimierung, aber sie sind kein vollständiger Ersatz für den generischen Klassen-Hack.
?? Warum nicht? Im Gegeteil.
Außerdem ist’s performanter: Spart Code und Nachfahrenselektoren.
Übrigens gefällt mir der Bash gegen OOCSS in deinen Folien nicht.
Kann man nicht oft genug tun. ;-)
Wieso gibt es da keine Diskussion "The best of both worlds"?
Vorletzte Folie. Aber ja, sie trägt nicht diese Überschrift.
Wir sprachen neulich darüber, wie man die visuellen Klassen-Selektoren auf semantische Selektoren mappen kann.
Genau das passiert doch auf der vorvorletzten Folie. Nur dass nicht .presentational-class, sondern %presentational-placeholder eingesetzt wird, damit man die .presentational-class-Selektoren nicht im generierten CSS-Code hat.
Wenn man aus irgendwelchen Gründen ein Framework wie Bootstrap einsetzen muss, kann man natürlich auch auf dessen vorgegebenen Klassen mappen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Meine Herren!
Mit UA-Sniffing
Pfui.
Wenn wir über Workarounds reden, hat das immer einen bitteren Beigeschmack.
gibt es zumindest eine technische Grundlage,
die beliebig ungenau ist.
Und für gewöhnlich trotzdem ausreichend. Ich möchte nicht gegen die JavaScript-Variante argumentieren, ich möchte nur deine Aussage, dass man es nicht anders dürfe, relativieren.
Alte IEs bekommen jeweils ein spezielles Stylesheet.
Mit Conditional-Comments gibt es eine komplentäre Möglichkeit zur Optimierung, aber sie sind kein vollständiger Ersatz für den generischen Klassen-Hack.
?? Warum nicht? Im Gegeteil.
Conditional Comments existieren nur in alten Internet Explorern. Neue Internet Explorer und andere Browser können damit nichts anfangen.
Es soll vorkommen, dass auch Firefox oder Webkit-Browser gelegentlich ihre Hacks nötig haben. Conditional-Comments sind außerdem, wie du sicher mitbekomme hast, kein Feature mehr, an dem MS weiter festhält.
Außerdem ist’s performanter: Spart Code und Nachfahrenselektoren.
Performanz ist der größte Feind von sauberer Softwaretechnik. HTML-Tabellen rendern auch schneller als Flexbox-Layouts. Sollten wir also wieder Webseiten schreiben wie vor 15 Jahren?
Übrigens gefällt mir der Bash gegen OOCSS in deinen Folien nicht.
Kann man nicht oft genug tun. ;-)
Wieso gibt es da keine Diskussion "The best of both worlds"?
Vorletzte Folie. Aber ja, sie trägt nicht diese Überschrift.
Schande über mein Haupt. Man sollte dann auch zu Ende lesen.
--
“All right, then, I'll go to hell.” – Huck Finn-
@@1UnitedPower:
nuqneH
Und für gewöhnlich trotzdem ausreichend. Ich möchte nicht gegen die JavaScript-Variante argumentieren, ich möchte nur deine Aussage, dass man es nicht anders dürfe, relativieren.
Meine Aussage war, dass man
<html class="IE8">nicht statisch im HTML haben und an alle Browser ausliefern sollte. Von serverseitigem UA-Sniffing war zu dem Zeitpunkt noch keine Rede.Conditional Comments existieren nur in alten Internet Explorern. Neue Internet Explorer und andere Browser können damit nichts anfangen.
Ja und? CC gehen bis IE 9.
Welches Problem tritt in IE 10 und 11 auf, dass man mit eigenem CSS fixen müsste?
Es soll vorkommen, dass auch Firefox oder Webkit-Browser gelegentlich ihre Hacks nötig haben.
Safari ist der neue IE.
Irgendwie findet sich aber immer eine Lösung ohne UA-Sniffing.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
-
-
Hi,
> nav ul { > margin: 0; > padding: 0; > padding-left: 3px; > width: 840px; > text-align: center; > valign: center; > }valign gibt es gar nicht (meintest Du vertical-align?). text-align wirkt nur auf inline-Inhalte.
> nav li { > list-style: none; > float: left; > height: 24px; > padding-left: 11px; > padding-right: 11px; > position: relative; > background-color: black; > color: white; > }Du läßt die li floaten (damit sind sie definitiv keine inline-Elemente).
Und zwar links.
Und dann wunderst Du Dich, daß die Elemente linksbündig dargestellt werden?Willst Du vielleicht statt float:left eher display: inline-block; setzen?
Dann hätte das text-align: center im ul eine Chance, für die Zentrierung zu sorgen.Ich nehme mal stark an, dass ich für die Browser-spezifischen Angaben den Syntax anders schreiben muss.
Das hat 1UnitedPower ja schon beantwortet.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
@@Druecke_die_AnyTaste:
nuqneH
width: 832px;
Die Viewports sind bei sehr vielen Nutzern schmaler als 832px; Tendenz weiter steigend. In Pixel festgemeißelte Breitenangaben sind aus dem letzten Jahrzehnt. Nicht verwenden! Sondern responsive design.
padding-left: 11px;
-webkit-padding-left: 11px;
-moz-padding-left: 16px;
-o-padding-left: 11px;
-ms-padding-left: 16px;Vendor-Präfixe gibt (gab) es nur bei experimentellen Eigenschaften. -*-padding gibt es nicht.
Außerdem: Informiere dich über „magic numbers“ und warum man sie vermeiden sollte.
Ansonsten: Was MudGuard sagte. Allerdings könnte sich der Whitespace im Quelltext zwischen den li störend auswirken. Die in meinem Artikel aufgezeigete Verstümmelung ist auch nicht das Gelbe vom Ei.
Wie geht’s also? Flexbox.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hi,
Die in meinem Artikel aufgezeigete Verstümmelung ist auch nicht das Gelbe vom Ei.
Den Artikel könntest du auch mal updaten – in seiner derzeitigen Form enthält er ja wohl ebenfalls Ballast „aus dem letzten Jahrzehnt“ („Einziges Sorgenkind ist der Firefox 2, der display: inline-block nicht unterstützt. Allerdings unterstützt er das proprietäre display: -moz-inline-grid“ – das interessiert doch heutzutage niemanden mehr …)
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
-