Bordes Punteados en Img y Link

[GidHarvey]

Buenas Tardes amigo de FDW.

Les traigo una pregunta que me hago con respecto a los de los bordes punteados que quedan en las imagenes y en los link con enlaces, primero que nada lo probe con la opcion de dreamweaver CS4, en la parte de Border poniendo como valor "0" pero resulta que no se me sale ese borde en las imagenes y en los link...
Estuve leyendo en inet, sobre un metodo que seria el famoso:

Código HTML:

a {
outline:none;
}

pero resulta que ese codigo no funciona en IE6, tambien estuve viendo en http://www.cssplay.co.uk lo que explica y como se deveria hacer, pero no entiendo como lo tendria que aplicar a mi codigo o un codigo simple es decir:

Código HTML:

<div id="miimagen"><a href="#" target="_self"><img src="images/miimagen.png" width="265" height="87" border="0" /></a></div> 

si se fijan tiene la opcion border="0" igual sale el borde molestoso...

como lo tendria que modificar para que ese borde no saliera?

de antemano muchas gracias.

ATTe gidharvey saludos.

[Wasper]

Lo tienes en el enlace que has puesto tu mismo, puede ser que hayas copiado el CSS STEP 1 en vez de STEP 4 que es el que mas te interesa?

EL CSS

/* adding the active/focus state */
#navlist_d {
list-style-type:none;
padding:0;
width:36em;
height:5em;
margin:0 auto;
}
#navlist_d li {
display:block;
width:7em;
height:2em;
float:left;
margin-right:0.2em;
}
#navlist_d a {
display:block;
width:7em;
height:2em;
position:relative;
text-decoration:none;
}
#navlist_d a em {
display:block;
font-style:normal;
width:7em;
height:1.5em;
color:#000;
border-bottom:0.5em solid #000;
position:absolute;
top:0;
left:0;
cursor:pointer;
}
#navlist_d a:hover {
color:#c00;
}
#navlist_d a:hover em {
border-bottom:0.5em solid #c00;
}
#navlist_d a:active, #navlist_d a:focus {
width:0;
height:0;
outline:0; /* for browsers that understand */
}

#navlist_d a:active em, #navlist_d a:focus em {

/* change the em bottom border and text to blue on
active/focus thus giving a suitable alternative to
the dotted border */
border-bottom:0.5em solid #00c;
color:#00c;
outline:0; /* for browsers that understand */
}

XHTML

<ul id="navlist">
<li><a href="#nogo"><em>Item one</em></a></li>
<li><a href="#nogo"><em>Item two</em></a></li>
<li><a href="#nogo"><em>Item three</em></a></li>
<li><a href="#nogo"><em>Item four</em></a></li>
<li><a href="#nogo"><em>Item five</em></a></li>
</ul>

Saludos, J@se

[kseso?]

Ese efecto y unas cuantas cosillas más se evitan usando cualquier reset de css )reset+css
Desde el más complejo hasta el más sencillo incluyen:

Código css:

* {
margin: 0;
border: 0;
padding: 0;
outline: 0;
}
 

Un saludo

[GidHarvey]

muchas gracias kseso, como siempre me ayudas :D en las dudas, ese reset lo conocia pero sin la opcion outline...

muchas gracias nuevamente y saludos.

ATTe gidharvey

PD: problema solucionado con lo siguiente:

Código:

* {
 outline: 0;
}

lo demas no lo puse por que me movia la pagina de la posicion que la tenia, debido a los valores "0"

saludos.

[Wasper]

Has probado a hacer tabulacion y posicionarte en un link??? si pones outline a secas el tabulador lo anulas porque no se ve donde se posiciona.

Yo uso a veces tabulacion.

Saludos, J@se

[GidHarvey]

claro el problema es que no se puede usar tabulacion, para que funcione el tab, la solucion es usa la guia que sale en cssplay, que puse arriba... saludos.