[IE + CSS] Alleen borders zijn anchors

[Geert.H]

Beetje suf probleempje: op http://geerthoekzema.nl/Aandacht staat aan de linkerkant een menu. Ik maak gebruik van één achtergrond afbeelding, en daarover plaats ik een aantal anchors die dan vervolgens clickable zijn. In FF werkt die zoals het moet.
IE (6&7) doet echter alsof de anchor geen inhoud heeft, en vind daarom dat ik nergens op mag klikken. Als ik de <a> echter een border geef dan kan ik daar wel op klikken.

Ik ben dit ooit eens eerder tegengekomen, maar geen idee meer hoe ik het toendertijd heb opgelost. Ik heb al geprobeerd om de achtergrond kleur transparent te maken, maar dat werkt ook niet. Als ik de achtergrond wit maak, dan kan ik er wel weer op klikken. Als er tekst in staat dan kan je daar ook gewoon op klikken.

Verder heb ik ook lopen zoeken, maar ik heb't nog niet gevonden (ook niet echt een goed idee waarop te zoeken)

site: http://geerthoekzema.nl/Aandacht
css: http://geerthoekzema.nl/Aandacht/style.css

[Arunia]

Het valt me op dat er alleen tussen de borders te klikken is, dus niet het vak zelf.
Ik herken het probleem wel, maar wat was de oplossing hiervoor ook alweer. Volgens mij had het te maken met de z-index van de divs, maar dat weet ik dus niet zeker. Maak je gebruik van de png hack voor IE? Nee dus.
Kun je geen list maken van je menu? Misschien dat dat iets oplost.

Gevonden:
http://www.sovavsiti.cz/css/w3c_buttons.html

Probleem heeft te maken met divjes als link zonder plaatjes of iets in die trend.

[ Voor 28% gewijzigd door Arunia op 17-04-2007 14:23 ]

[Geert.H]

Nop gebruik geen PNG hack. De anchors zijn helemaal leeg. Verder heb ik even met de z-index gespeeld, maar heeft geen resultaat.

edit:
De link die je gaf kom ik helaas niet veel verder mee. Het enige wat volgens mij iets zou uitmaken is het gebruik van display:block, maar ook dat verhelpt het probleem niet.

Ik snap er niets van, ook omdat ik deze manier van werken veel vaker toepas, en daar werkt het wel.

[ Voor 52% gewijzigd door Geert.H op 17-04-2007 14:37 ]

[Geert.H]

Nah, heb nu een beetje vieze oplossing. Geef eerst een witte achtegrond mee, en vervolgens zet ik de opacity op 0. Het werkt, maar als andere mensen iets beters hebben, graag.

[Verwijderd]

Maak eens van je A elementen "display: block".

Ik denk omdat de a elementen geen inhoud hebben deze dus geen hoogte hebben. A elementen zijn standaard display: inline en je kan ze dus geen hoogte geven (height werkt alleen bij display block)

Misschien een belangrijke toevoeging.

Ik zou de a elementen wel een inhoud geven. Google en andere search engines vinden dit niet zo grappig

Hier is hoe ik het zou doen

HTML:

<ul>
<li><a href="index.php" id="Home"><strong>Home</strong></a></li>
<li><a href="index.php?p=beleid" id="Beleid"><strong>Beleid</strong></a></li>
<li><a href="index.php?p=contact" id="Contact"><strong>Contact</strong></a></li>
<li><a href="index.php?p=links" id="Links"><strong>Links</strong></a></li>
</ul>

Het is netter om een menu in een li te zetten. Verder staat er nu een tekst in de href. met de css "a strong{display: none}" zou je de tekst weg kunnen halen. misschien is strong een beetje overdreven en kan je ook kiezen voor span

[ Voor 60% gewijzigd door Verwijderd op 17-04-2007 15:42 ]

[Geert.H]

De A elementen had ik al een display block gegeven, en dat maakte niet uit.
Verder als ik wel een tekst in de A zette, dan was ook allen het tekst gedeelte clickable. Dus ook nog niet het hele gedeelte.
Verder is het idd netter om het in een li te zetten, maar ach er zijn wel meer dingen netter.

[DutchStoner]

Mischien een beetje kort door de bocht, maar is het niet opgelost als je er een spatie inzet?

[Arunia]

Ah, wacht even. Maak eens in Photoshop oid een 1 bij 1 pixel .gif transparant en zet deze eens in die div waarna je em uitrekt tot de grote van de div. Volgens mij was dat de oplossing voor jouw probleem. De link zet je dan op het .gifje waarna deze klikbaar is.