selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

padding für Navigationsleiste nach Browser definieren

Autor: Druecke_die_AnyTaste
Datum: 17.03.2014 12:58:07

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!



Re: padding für Navigationsleiste nach Browser definieren

Autor: Netinja
Datum: 17.03.2014 15:48:59

> 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

> 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;
>
> }

Hallo,
Du hast bei dem Selektornamen vergessen anzugeben, ob es sich um einen Klassennamen oder einen ID-Namen handelt.
Setze also entweder einen Punkt oder ein Doppelkreuz davor.
Ausserdem wäre es auch besser, wenn man sich das Problem anschauen könnte. Poste doch bitte einen Link dazu.

LG
Netinja



Re: padding für Navigationsleiste nach Browser definieren

Autor: Druecke_die_AnyTaste
Datum: 17.03.2014 16:20:54

Einen Link habe ich nicht, da dieses Projekt noch nicht hochgeladen ist.

Inzwischen habe ich das Problem mit einem display: inline-block lösen können.

Das nav ist ein für sich selbst stehendes html-Element und benötigt keine Klassen- oder ID-Definition mehr.


Besten Dank auch.



Re: padding für Navigationsleiste nach Browser definieren

Autor: gaby
Datum: 18.03.2014 07:57:30

> Einen Link habe ich nicht, da dieses Projekt noch
> nicht hochgeladen ist.
>
> Inzwischen habe ich das Problem mit einem
> display: inline-block lösen können.
>
> Das nav ist ein für sich selbst stehendes
> html-Element und benötigt keine Klassen- oder
> ID-Definition mehr.


Moin,

Wenn du html5-Elemente verwendest, sollte auch dafür gesorgt sein, daß ältere Browser (IE-8) die Seite korrekt darstellen können.

http://koecki.net/2012/03/html5-im-ie8-und-ie7-richtig-darstellen/

Daß Windows-XP und der IE-8 nicht mehr unterstützt werden, heißt ja nicht, daß sie nicht doch noch verwendet werden. ;-)

Inwieweit du ein workaround schon eingebaut hast, läßt sich anhand deiner Minimal-Schnipsel nicht erkennen. (Nicht nur) deshalb ist es besser, künftig eine vollständige, auf das Problem reduzierte Testdatei zur Verfügung zu stellen, und keine unvollständigen Schnipsel, die das Problem nicht erkennen lassen, und zudem auch noch von Helfenden zu einer vollständigen Datei zum Testen ergänzt werden müssen.
"unvollständige Schnipsel" deshalb, weil ich annehme, daß du in den 'LIs' auch noch A-Elemente hast, die auch iregendwie formatiert sind.

Zudem bin ich ziemlich sicher, daß du bei sinnvolleren Eigenschaften für die Elemente dir die ganze Mühe mit den vendor-prefixes ersparen, und auch sonst noch dein CSS reduzieren könntest.

Grüße
gaby



Re: padding für Navigationsleiste nach Browser definieren

Autor: T.Jung
Datum: 18.03.2014 10:55:32

> Wenn du html5-Elemente verwendest, sollte auch
> dafür gesorgt sein, daß ältere Browser (IE-8) die
> Seite korrekt darstellen können.
>
>
> http://koecki.net/2012/03/html5-im-ie8-und-ie7-richtig-darstellen/

Guter Vorschlag, allerdings würde ich das fragliche Script lieber runterladen und auf dem eigenen Server installieren, anstatt es von GoogleCode zu referenzieren.
https://github.com/aFarkas/html5shiv

Grund: Externe Scripte laufen gerne mal gegen einen AdBlocker. Mal ganz abgesehen davon, dass ich in sehr vielen Fällen, wenn eine Seite quasi unendlich lang lädt, festelle dass sie immer noch auf externe Daten (eben Scripte oder oft auch Webfonts) wartet.



> Zudem bin ich ziemlich sicher, daß du bei
> sinnvolleren Eigenschaften für die Elemente dir
> die ganze Mühe mit den vendor-prefixes ersparen,
> und auch sonst noch dein CSS reduzieren
> könntest.

Also, bei padding-left/-right usw. kann man sich die Vendor-Prefixes auf jeden Fall sparen!
Ein Unterschied von 5px muss durch irgendetwas anderes im Code entstehen (was ich allerdings jetzt auf den ersten Blick auch nicht sehe)

Gruß,
Tobias Jung