User Agent Stylesheet überschreiben

[guidoi]

Hallo zusammen,

gibt es eine Möglichkeit, User Agend Stylesheets zu überschreiben?

Ich habe den Navipunkt Kontakt meiner Contao-Seite mit folgender Anweisung versehen.

@media (min-width: 801px)
.navi a.kontakt, .navi span.kontakt

padding: 0.45em 1.75em;
border: 1px solid;
border-radius: 5px;
}

Demnach müsste in HTML stehen:
<span class="active kontakt last“>Kontakt</span>

Der Rahmen wird jedoch nicht angezeigt, der Browser in HTML aus „span class“ ein "strong class“ macht und ein itemprop dranhängt. Ein .navi strong.kontakt in der CSS-Anweisung macht keinen Sinn und führt nicht zum richtigen Ergebnis.

Zudem ist die Schrift der aktiven Navigations-Elemente auch „bold“ statt „normal“

<strong class="active kontakt" itemprop="name">Kontakt</strong>

Im Developer-Tool steht nun user agent stylesheet

strong {
font-weight: bold;
}

Damit die Schrift „normal“ angezeigt wird, habe ich in der CSS die Anweisung überschrieben, aber es macht eigentlich keinen Sinn, strong mit normal zu überschreiben. Ich weiß nicht, warum überhaupt automatisch überschrieben wird, da ich bei anderer Website keine Probleme damit habe. Gibt es hierzu eine bessere Lösung?

/* ----- Überschreiben user agent stylesheet ----- */


strong {
font-weight: normal !important;
}

Vielen Dank für Eure Hilfe!

[dazzle89]

Ich verstehe die Probleme nicht 100%-ig.

Der Kontaktbutton wird bei mir mit einem Rahmen dargestellt und so soll es auch sein, oder?

Und warum sollte ein "strong" in der CSS-Anweisung keinen Sinn machen? Wenn es ein strong-Element und kein span-Element gibt, muss man es auch mit strong im CSS ansprechen. Ich meine, dass Contao früher spans für aktive Navigationspunkte benutzt hat, und ab einer bestimmten Version dann strong.

Wenn du möchtest, dass der aktive Menüpunkt normal und nicht fett dargestellt wird, musst du das strong-Element ansprechen. Also so in etwa:

.hauptnavi li.active strong {
    font-weight: normal;
}

Strong hat nur einen semantischen Wert. Browser stellen es zwar per Default fett dar, aber man kann es aus optischen Gründen ruhig mit font-weight: normal überschreiben. Daran ist nichts verkehrt.

[guidoi]

Es geht mir um den aktiven Navipunkt Kontakt. Wenn mann draufklickt, ist der 1-Pixel-Rahmen weg. Zudem sind die aktiven Navi-Punkte bold, was nicht sein dürfte. Diese müssten lt. meinem CSS "normal" angezeigt werden.

Meine Vermutung ist, dass die CSS-Anweisungen vom Browser-CSS überschrieben werden.

[dazzle89]

Normalerweise überschreibt das Browser-CSS nicht das eigene CSS, sondern andersherum.

Der Rahmen verschwindet, weil sich das Markup (HTML) ändert. Wenn ein Menüpunkt aktiv ist, ist es kein Link mehr, sondern ein Strong-Element. Wenn man sich wiederum auf einer anderen Seite befindet und es somit kein aktiver Punkt mehr ist, ist es ein regulärer Link, der ein span enthält.

Dein CSS lautet:

.navi a.kontakt, .navi span.kontakt {
   ...
}

Es werden also nur der Link und das span angesprochen, es fehlt der strong-Selektor. Ich würde es so lösen:

.navi a.kontakt, .navi span.kontakt, .navi strong.kontakt {
    padding: 0.45em 1.75em;
    border: 1px solid;
    border-radius: 5px;
}

[guidoi]

Perfekt, herzlichen Dank, das hat mir sehr geholfen!

Der Rahmen wird nun auch bei aktivem Element dargestellt.
In beiden Navis wird zudem in "normal" dargestellt:

.hauptnavi li.active strong, .seknavi li.active strong {
font-weight: normal;
}

Einzig im Safari wird bei mouse hover über Kontakt nur ein Teil des farbigen Rahmens angezeigt.
Das ist bei einer älteren Website-Version mit gleicher Navigation auch nicht der Fall.
Das konnte ich noch nicht lösen.

[dazzle89]

Bin mir nicht sicher ob es klappt. Hier mal mein Vorschlag. Zuerst die Farbe in der border-Anweisung ergänzen:

.navi a.kontakt, .navi span.kontakt, .navi strong.kontakt {
    padding: 0.45em 1.75em;
    border: 1px solid #333;
    border-radius: 5px;
}

Beim Mouseover dann die border-Farbe ändern:

.navi a.kontakt:hover {
    border-color: #F1C101;
}

[guidoi]

Hat geklappt...

Mega, tausend Dank!