CSS focus lelijke border

[Woet]

Als ik een <div> heb, en ik klik erop, krijg ik een gestippelde lijn eromheen.
Om het duidelijker uit te leggen, heb ik hier een plaatje:


http://files.uploadffs.com/597af45b3f33e51fcaed80a706098e1c_kutdiv.JPG

Weet iemand hoe je dat uitschakeld?

[Rekcor]

Ik neem aan dat je border:0; in je CSS hebt staan?

Dan vrees ik dat er weinig aan te doen is. Het lijkt op die border die je krijgt zodra er een flash-image geactiveerd wordt in IE door erop te klikken.

Heb je trouwens CSS/HTML voor ons + welke browsers heb je getest?

[TeeDee]

Het heeft imo meer te maken met Accessibility dan schoonheid. Als iemand geen muis gebruikt maar 'tabbend' door je pagina heen gaat is het wel makkelijk om te zien op welke anchor je terecht bent gekomen.

Dus vraag ik me af of dit middels CSS weg te krijgen is.
Even gauw getest en het lijkt erop dat je

Cascading Stylesheet:

outline:0;

kunt gebruiken.

[ Voor 14% gewijzigd door TeeDee op 30-10-2007 12:39 ]

[Woet]

Getest op IE 6, IE 7 en FF. Alleen IE 6 heeft het niet.
En ik heb border: 0px;

[Woet]

TeeDee schreef op dinsdag 30 oktober 2007 @ 12:37:
Het heeft imo meer te maken met Accessibility dan schoonheid. Als iemand geen muis gebruikt maar 'tabbend' door je pagina heen gaat is het wel makkelijk om te zien op welke anchor je terecht bent gekomen.

Dus vraag ik me af of dit middels CSS weg te krijgen is.
Even gauw getest en het lijkt erop dat je

Cascading Stylesheet:

outline:0;

kunt gebruiken.

Dankjewel, dat heeft gewerkt!

[TeeDee]

Woet schreef op dinsdag 30 oktober 2007 @ 12:39:
[...]
Dankjewel, dat heeft gewerkt!

Ik hoop ook dat je ook even nadenkt over het toegankelijk houden van je site.

[Woet]

TeeDee schreef op dinsdag 30 oktober 2007 @ 12:42:
[...]

Ik hoop ook dat je ook even nadenkt over het toegankelijk houden van je site.

Doe ik ook, je kan op iedere link komen via tab en het heeft geen javascript nodig etc.

[killercow]

Ik denk dat je zo best wel een groot stuk usability verneukt.

De browser van de bezoeker geeft niet voor niks een cursor/focus weer, dit doet de browser omdat er dan gemakkelijk gezien kan worden wat er in focus is.

Als je element klikbaar is dan lijkt het me niet meer dan logisch dat de gebruiker ook kan zien dat hij aangeklikt is, het breken met deze normale gang van zaken zal bij best veel bezoekers de "feel" voor je site verstoren.

Woet schreef op dinsdag 30 oktober 2007 @ 12:45:
[...]


Doe ik ook, je kan op iedere link komen via tab en het heeft geen javascript nodig etc.

Je kunt alleen niet meer zien welke er op dat moment focus heeft.

[ Voor 23% gewijzigd door killercow op 30-10-2007 12:48 ]

[Woet]

Als de klant zegt dat het weg moet, dan haal ik het weg..

[RobIII]

Woet schreef op dinsdag 30 oktober 2007 @ 12:49:
Als de klant zegt dat het weg moet, dan haal ik het weg..

Of dan peuter je je klant aan 't verstand dat 't anno 2007 not-done is om useability in te leveren of ondergeschikt te maken aan 'design'. Zeker niet voor dit soort piepkleine futiliteiten.

[ Voor 7% gewijzigd door RobIII op 30-10-2007 12:57 ]

[Woet]

Bij een modellen site is het andersom, daar gaat alles om het design.

Je kan nog steeds gewoon alles met tab doen, als het daar om gaat?
En ik denk niet dat we de site moeten optimaliseren voor blinden.. als het voor een modellen bureau is.

[TeeDee]

Woet schreef op dinsdag 30 oktober 2007 @ 12:59:
Bij een modellen site is het andersom, daar gaat alles om het design.

Je kan nog steeds gewoon alles met tab doen, als het daar om gaat?
En ik denk niet dat we de site moeten optimaliseren voor blinden.. als het voor een modellen bureau is.

En als ik nu eens niet blind ben maar geen muis kan gebruiken om <insert reden>. Dan wil ik graag zien op welke link ik sta.

Daarom heb ik het bewust aangehaald. Zoals RobIII zegt:

Of dan peuter je je klant aan 't verstand dat 't anno 2007 not-done is om useability in te leveren of ondergeschikt te maken aan 'design'. Zeker niet voor dit soort piepkleine futiliteiten.

[OkkE]

Gebruik dan aub wel het volgende om op een andere manier, passend binnen de website, aan te geven welke link de focus heeft.

code:

a:focus { background-color:red; outline:none; }

Ik snap dat de klant die "lelijke dotted border weg wil hebbeb", maar zet dan de :focus bijvoorbeeld het zelfde als de :hover, dan ben je er ook.

[ Voor 29% gewijzigd door OkkE op 30-10-2007 13:22 ]

[Woet]

OkkE schreef op dinsdag 30 oktober 2007 @ 13:21:
Gebruik dan aub wel het volgende om op een andere manier, passend binnen de website, aan te geven welke link de focus heeft.

code:

a:focus { background-color:red; outline:none; }

Ik snap dat de klant die "lelijke dotted border weg wil hebbeb", maar zet dan de :focus bijvoorbeeld het zelfde als de :hover, dan ben je er ook.

Wie beweert dat ik dat niet heb dan?
Zodra je een link hebt geselecteerd wordt hij dikgedrukt en een donkerdere kleur..

Mijn probleem was dat de hele div, met 100 links, een border kreeg.

[ Voor 6% gewijzigd door Woet op 30-10-2007 13:29 ]

[OkkE]

Woet schreef op dinsdag 30 oktober 2007 @ 13:29:
Wie beweert dat ik dat niet heb dan?

Daar ging ik van uit, aangezien het me logisch leek dat je dit anders wel gemeld had.

Zodra je een link hebt geselecteerd wordt hij dikgedrukt en een donkerdere kleur..

Wanneer dit met een tab-focus en een mouseover gebeurd, lijkt het mij allemaal prima.

Mijn probleem was dat de hele div, met 100 links, een border kreeg.

Dit heb ik nog nooit gehad... Maargoed, dat is nu dan ook opgelost.

[killercow]

Misschien is het voor de discussie nuttig als we de betreffende site eens te zien krijgen.

Browser behaviour weghalen is imho net zo not-done als een window via javascript resizen.

En wat de klant betreft, hij begrijpt dat hij een Internet site besteld, en niet een poster?
Als webdevver heb je toch ook gewoon een stukje opvoeding van je klant in je werk zitten, net zo als een DTPer weer andere dingen moet uitleggen aan zijn klanten.

[Woet]

http://www.dutchpancakes....fuseaction=frontend.women

Heeft iemand tips om het te verbeteren qua toegankelijkheid?

[ Voor 92% gewijzigd door Woet op 30-10-2007 14:56 ]

[RuudBurger]

dat hij het om de hele div deed ipv alleen om linkjes, wijst er meer op dat je html code niet helemaal in orde is (linkje vergeten af te sluiten ofzo).

Nu ik even naar je code kijk, kun je wel wat meer les gebruiken in gebruik van HTML, divjes buiten de body, meerdere body tags, etc etc

[OkkE]

Woet schreef op dinsdag 30 oktober 2007 @ 14:26:
http://www.dutchpancakes.nl/boekers/?fuseaction=frontend.women

Heeft iemand tips om het te verbeteren qua toegankelijkheid?

Zorgen dat het ook werkt zonder javascropt?

-- edit --

Sillymidget schreef op dinsdag 30 oktober 2007 @ 14:48:
Nu ik even naar je code kijk,

Inderdaad.... Ik zie nog wel een aantal aandachts- en verbeterpunten.

• Een aantal body elementen
• Elementen buiten de body en zelfs html elementen
• Geen Doctype
• Tabellen voor layout
• Overdadig gerbuik van javascript (zonder alternatief)
• Inline styles

[ Voor 45% gewijzigd door OkkE op 30-10-2007 14:54 ]

[Woet]

Zowiezo heb ik niet gesliced.. werk ik alleen aan de PHP.
Kreeg de klacht van de klant, en wou het oplossen.

Maar bedankt voor de oplossing, kan ik weer verder..

[ Voor 21% gewijzigd door Woet op 30-10-2007 14:56 ]

[killercow]

Woet schreef op dinsdag 30 oktober 2007 @ 14:55:
Maar bedankt voor de oplossing, kan ik weer verder..

En de rest van je problemen?

[Blaise]

HTML:

<tr>
    <td>
        <img src="_afbeeldingen/spacer.gif" width="148" height="1" alt=""></td>
    <td>
        <img src="_afbeeldingen/spacer.gif" width="23" height="1" alt=""></td>
    <td>
        <img src="_afbeeldingen/spacer.gif" width="24" height="1" alt=""></td>
    <td>
        <img src="_afbeeldingen/spacer.gif" width="81" height="1" alt=""></td>
    <td>
        <img src="_afbeeldingen/spacer.gif" width="76" height="1" alt=""></td>
    <td>
        <img src="_afbeeldingen/spacer.gif" width="128" height="1" alt=""></td>
    <td>
        <img src="_afbeeldingen/spacer.gif" width="336" height="1" alt=""></td>
    <td>
        <img src="_afbeeldingen/spacer.gif" width="21" height="1" alt=""></td>
    <td>
        <img src="_afbeeldingen/spacer.gif" width="136" height="1" alt=""></td>
</tr>

Oldskool

Ik denk dat je er erg veel aan zou hebben om je te verdiepen in CSS, en dan met name hoe je elementen positioneert. Met CSS kan je sites sneller en flexibeler opzetten.

[_Thanatos_]

Was er al gemeld dat de site totaal niet met het toetsenbord navigeerbaar is? Opera is bij uitstek geschikt voor mensen die om wat voor reden dan ook geen muis kunnen gebruiken, en Opera heeft mooie navigatieknoppen daarvoor (shift+pijltjestoesen). Alleen ik kan geen andere link kiezen dan die van het geselecteerde modelletje.

(Barbara mag er wel wezen trouwens )

[Woet]

Ik ben de programmeur op ons bedrijf, en ik heb al gevraagd aan de designer/slicer om het in XHTML/CSS te maken.
Alleen kan zijn slice-progje dat niet, en kan hij zelf totaal geen HTML..

[killercow]

Woet schreef op woensdag 31 oktober 2007 @ 08:55:
Ik ben de programmeur op ons bedrijf, en ik heb al gevraagd aan de designer/slicer om het in XHTML/CSS te maken.
Alleen kan zijn slice-progje dat niet, en kan hij zelf totaal geen HTML..

Dan is hij dus niet de persoon die de Html moet doen, aangezien jij de programmeur bent heb je waarschijnlijk het meeste kaas gegeten van gestructureerd werken,

Ik stel voor dat jij de xhmtl/css gaat doen, en alleen het plaatjes bewerken aan hem overlaat, maar ok, wie ben ik.

[OkkE]

Woet schreef op woensdag 31 oktober 2007 @ 08:55:
Ik ben de programmeur op ons bedrijf, en ik heb al gevraagd aan de designer/slicer om het in XHTML/CSS te maken.
Alleen kan zijn slice-progje dat niet, en kan hij zelf totaal geen HTML..

Dan neem ik aan dat jullie bedrijf niet professioneel met webdesign bezig is, en is het in dat geval helemaal niet zo'n slecht idee om het (lees: de html/css) uit te besteden.

Want tenzij je van plan bent binnen een jaar een nieuwe website te (laten) maken, is het best zonde om nu een website online te zetten, waar tijd, geld en moeite in zit, die gewoon stukken beter kan.