CSS problem mit chrome

[sepp_a_u]

Hallo zusammen,

meine aktuelle CSS funktioniert für Firefox und Safari bisher einwandfrei, jedoch macht es bei Chrome probleme. Ich habe das mal im Anhang angehängt, damit man den Unterschied bzw. auch das to-Be sieht.
Es geht darum, dass die Flaggen oben korrekt angeordnet sind in der selben Linie wie die 3 Links, als auch dass das Suchfeld rechts positioniert ist und nicht irgendwie in der Mitte der Site. Kann mir jemand helfen den spezifischen CSS-Code für Chrome herauszufinden? Komme leider nicht dazu.

es geht hierbei um:
www.esobp.de
user: test
pw: beerpong

ich freue mich auf eure hilfe,
David

[tab]

Das <ul> hat hier irgendwoher einen margin von 1em zugewiesen bekommen (user agent stylesheet). Deswegen stehen die Flaggen unterhalb der Schrift, denn die hat dieses Margin nicht.

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

[sepp_a_u]

danke für die Antwort. Den Code, den Du angegeben hast, wo finde ich den? Habe den leider nirgendwo gefunden...

[tab]

user agent ist der Browser, sind also wohl irgendwelche Defaulteinstellungen von Chrome. Ich benutze reset.css, damit sind die meisten von Browser-Defaults verursachten Unterschiede weg und man kann dann für alle Browser mehr oder weniger auf derselben Grundlage aufbauen. Du kannst natürlich auch hergehen und die entsprechenden Einstellungen selbst korrigieren / zurücksetzen.

[sepp_a_u]

ah ok super Wo kann ich eine solche reset.css finden?

[Spooky]

Das <ul> hat hier irgendwoher einen margin von 1em zugewiesen bekommen (user agent stylesheet). Deswegen stehen die Flaggen unterhalb der Schrift, denn die hat dieses Margin nicht.

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

Damit hat das nichts zu tun, bzw. nur indirekt. Er hat folgendes definiert:

#header_complete .mod_changelanguage {
    float: right;
} 

Er will damit erzielen, dass .mod_changelanguage rechts von den anderen Links erscheint. Das funktioniert so aber nicht, da sein DOM Tree so aussieht:

<div class="login_registration">
    <a rel="lightbox[400 200]" href="en/login.html"></a>
     | 
    <a title="Register" href="en/register/articles/register.html"></a>
     |
    <a title="Lost password" href="en/lost-password/articles/lost-password.html"></a>
     | 
    <nav class="mod_changelanguage block"></nav>
</div> 

float:right; besagt, dass die jeweilige Box rechts vom folgenden Inhalt floated. Auf den Inhalt davor hat die CSS Eigenschaft float keine Auswirkung.

Funktioniert zwar in den meisten Browsern so wie er möchte, ist aber eher willkürlich und prinzipiell nicht der richtige Weg. Es gibt jetzt viele Lösungswege dafür, aber am zielführensten ist wohl dass sepp_a_u das CSS Box Model und die CSS Eigenschaft float verstehen lernt .


Eine Möglichkeit wäre allen Inhalten von .login_registration die Eigenschaft display:inline-block; zu geben (und kein Floating), bzw. nur dem .mod_changelanguage.

[sepp_a_u]

verstehe leider nicht wirklich was jetzt gemacht werden sollte...

[Spooky]

1. CSS lernen
2. float:right; von .mod_changelanguage entfernen und mit display:inline-block; ersetzen (als eine mögliche Lösungsvariante; ungetestet)

[sepp_a_u]

1. CSS lernen
2. float:right; von .mod_changelanguage entfernen und mit display:inline-block; ersetzen (als eine mögliche Lösungsvariante; ungetestet)

1. Versuche ich Aber klappt leider nicht alles immer wie gewünscht
2. Klappt leider nicht wirklich (s. Screenshot): Die Flaggen sind zu hoch positioniert und die Suchbox bleibt weiterhin an der selben stelle

[Spooky]

Doch, klappen tut es. Es sieht halt noch immer noch nicht so aus wie du es dir wünschst. Wenn du .mod_changelanguage weiterhin mit inline-block positionieren möchtest, könntest du dich jetzt bspw. mit der CSS Eigenschaft vertical-align beschäftigen.

Das mit der Suche habe ich mir noch nicht angesehen, aber ich würde die Suchbox einfach absolut positionieren.

[sepp_a_u]

ok danke. so funktioniert es jetzt:

#header_complete .mod_changelanguage {
    display: inline-block;
    vertical-align: top;
}

viele grüsse u danke,
david