✔ Link ohne border - Firefox

[progafrog]

Halo und einen schönen Guten Abend,

irgendwie ist mir das schon ein wenig peinlich wegen diesem Problem einen neuen Thread zu eröffnen,
aber ich hoffe, dass ihr Verständnis zeigt. Das Problem ist ganz simpel, wenn auf den Link geklickt wird, erscheint ne bottom und left border, die ich mir irgendwie nicht erklären kann. Vielleicht habt ihr einen Ratschlag, ich poste erst einmal den HTML und dann den CSS code.

<div id="navcontainer">
<ul id="navul">
<li id="logo"><a rel="nofollow" href="?page=start"></a></li>
<li id="start"><a rel="nofollow" href="?page=start"></a></li>
<li><div id="aktuelles"><a rel="nofollow" href="?page=aktuelles"></a></div>
<li><div id="obrady"><a rel="nofollow" href="?page=obrady"></a></div>
</li>
<li><div id="bikes"><a rel="nofollow" href="?page=bikes"></a></div>
</li>
<li id="end"></li>
</ul>
</div>

Ich poste einmal den Code für eine Klasse, die anderen Beschreibungen sind nämlich vom Prinzip her identisch. Nur einmal bei der Hover Pseudoklasse verwende ich ein anderes Hintergrundbild.

#start a{
position:absolute;
margin-left:250px; padding:0px;
background-image:url(../../img/design/nav/nav1.jpg);
min-height:69px;
min-width:176px;
height:69px;
width:176px;
border-style:none;
border-width:0px;
}

Vielen Dank

 

[Maik]

Hi,

du sprichst hier von dem typischen gepunkteten Rahmen, der in diversen Browsern beim Anklicken eines Links oder Formularbuttons erscheint, um den Fokus des markierten Elements hervorzuheben, und somit sich dahinter überhaupt kein Problem / Fehler verbirgt.

Hier in unserem Forum beispielsweise, aber auch draußen im "World-Wide-Web", findest du genügend Gelegenheiten, wo dieser Rahmen ebenso in Erscheinung tritt, und hätte dir eigentlich in dem Bewußtsein vorhin mindestens zweimal regelrecht ins Auge springen müssen, nämlich als du dieses Thema eröffnet und deinen Beitrag ins Forum gestellt hast.



Mit dieser CSS-Regel kannst du den Fokus-Rahmen zumindest in den Gecko-Browsern abstellen:

a { outline:none; }

Für alle übrigen Browser, die ebenfalls den Fokus anzeigen, wäre hier eine Prise Javascript vonnöten:

<a rel="nofollow" href="?page=start" onfocus="this.blur()"></a>

Bedenke aber, dass dieser Fokus ein entscheidender Bestandteil bei der Steuerung durch ein Navigationsmenü oder auch bei den Formularelementen einer Webseite mittels der Tabulator-Taste ist, und dem Seitenbesucher diese visuelle Orientierungshilfe nicht vorenthalten / genommen werden sollte, in welchem Seitenelement er sich beim Durchtabben aktuell befindet, blos weil dir diese "natürliche" Umrandung persönlich nicht zusagt.

mfg Maik

 

[progafrog]

Huhu,

zunächst einmal ein Dankeschön für die fixe Antwort, dein Tipp hat auch geholfen, aber ich habe noch ne kleine Frage.
Diese outline bekomme ich nicht mehr angezeigt, aber ich bin mir nicht sicher ob es genau dieses war, denn normalerweise kenn ich die grau gepunktet.
So sah es bei mir aus. Daher dachte ich auch, dass es eine normale Border gewesen ist.
Im Footer hatte ich jedoch auch eine Liste und da ist nun wie erwartet auch keine Umrahmung mehr zu sehen.

Danke für die Hilfe

 

[Maik]

Das ist die selbe Chose, blos handelt es sich dort um grafische Verweise, bei denen der Browser dem Rahmen seine voreingestellte Linkfarbe verpaßt - i.d.R. entspricht sie der blauen Farbe, wenn in diesen Einstellungen keine Änderungen vorgenommen werden.

Und ein blauer "durchgezogener" Rahmen ziert ja auch in jedem Browser solch einen Grafik-Link, wenn für das <img>-Element nicht border:0 deklariert wird.

Beachten Sie:

Wichtig ist auch die Angabe border="0" in den Grafikreferenzen (siehe auch Rahmen um Grafiken). Würde diese Angabe fehlen, dann würde der Browser einen Rahmen um die Grafik anzeigen, und zwar in der Farbe für Verweise, um diese als Verweis zu kennzeichnen.

• Zitatquelle: http://de.selfhtml.org/html/grafiken/verweise.htm

mfg Maik

 

[progafrog]

ach okay,

dann ist das Thema auch erstmal erledigt

danke!

 

[damietz]

Hi

Hatte grad das selbe problem und ging auch nicht mit border:0; weg...

bei mir isses mit

"border-style:hidden"

und dem oben geneannten

outline:none;

in allen browsern weggegangen