[CSS?]Foute weergave van afbeelding in lijst

[CyberThijs]

Ik zit hier met een redelijk simpel stuk code:

HTML:

            <ul>
                <li><b>Functie:</b> Proost</li>
                <li><b>Geboortedatum:</b> *knip*</li>
                <li><b>Te bereiken op:</b> *knip*</li>
                <li><b>Woonplaats:</b> *knip*</li>
                <li><img width="16" height="16" src="/sites/default/files/leiding/email.png" alt="" /><a href="/contact/wim_seynaeve">Stuur E.H. Wim Seynaeve een mail</a></li>
            </ul>

Maar als ik dit bekijk in IE7 krijg ik volgend resultaat:


Ik vermoed dus een fout in de rendering van IE7, maar aangezien ik niet echt vertrouwd ben met alle hangbare bugs (en hun oplossingen), doe ik een beroep op jullie kennis om dit probleem op te lossen..

[teh_twisted]

getest in andere browsers? Firefox, Opera, Safari?

voorderest zou ik is proberen:

code:

ul a:before {
content:url("http://www.genopro.com/images/button/hyperlink.gif") " ";
}

*edit*
http://www.w3schools.com/Css/pr_gen_content.asp

[ Voor 13% gewijzigd door teh_twisted op 21-05-2008 00:24 ]

[CyberThijs]

In FF 3.0 RC1 werkt het prima.. Daarom ook dus dat ik specifiek naar een bug in IE7 verwijs..

Bestaat er een nettere manier dan bovenstaande CSS, omdat ik dan de url van die afbeelding letterlijk moet opnemen in de CSS zelf, terwijl ik dat liever mooi in m'n html-code hou.. Bovendien wil 'k de oplossing ook makkelijk kunnen uitbreiden naar meerdere afbeeldingen (want zet ik er meerdere in de lijst, dan komen ze er allemaal voor te staan..)

[teh_twisted]

CyberThijs schreef op woensdag 21 mei 2008 @ 00:29:
In FF 3.0 RC1 werkt het prima.. Daarom ook dus dat ik specifiek naar een bug in IE7 verwijs..

Bestaat er een nettere manier dan bovenstaande CSS, omdat ik dan de url van die afbeelding letterlijk moet opnemen in de CSS zelf, terwijl ik dat liever mooi in m'n html-code hou.. Bovendien wil 'k de oplossing ook makkelijk kunnen uitbreiden naar meerdere afbeeldingen (want zet ik er meerdere in de lijst, dan komen ze er allemaal voor te staan..)

wil je meer afbeeldingen dan een mail icoontje een hyperlink icoontje? ikzelf gebruik dit veel en is waanzinnig net indien je meerdere url's op een pagina hebt

als je voor elke url een ander plaatje wilt, mja... wordt 't toch hardcoden zoals jij 't deed

bv:

code:

<a href="www.google.nl" class="extern">Google</a>
<a href="faq.htm" class="intern">FAQ</a>
<a href="mailto:[e-mail]" class="email">Email!</a>

met daarbij:

code:

a.extern:before { content:url("images/extern.png") " ";}
a.intern:before { content:url("images/intern.png") " ";}
a.email:before { content:url("images/envelopje.png") " ";}

natuurlijk kan 't ook anders, maar je kan op deze manier heeeel simpel ff snel al je images updaten

[ Voor 4% gewijzigd door teh_twisted op 21-05-2008 00:41 ]