background image in anker geeft problemen

[jbweb]

Ik ben bezig om alle ankers (hyperlinks) in de content van mijn website automatisch te voorzien van een pijltje (image).
De hyperlink krijgt dan een padding van 15px aan de rechter kant en met CSS zet ik daar een background-image neer, bijv.:

Cascading Stylesheet:

div#content a { 
    padding-right: 15px;
    background: url('link.gif') no-repeat top right;
}

Op het eerste gezicht leek dit heel goed te werken, totdat ik in het altijd vervelende IE keek.
In een lap text worden regels rechts afgebroken en gaan we naar de volgende regel. Mocht het laatste woord net een anker zijn (welke dus net past), kijkt IE (denk ik) niet naar de padding. Dus als CSS dit anker vervolgens voorziet van mijn image, is het anker ineens wel te lang voor de regel. Het woord in mijn anker komt dan keurig op de volgende regel terecht, maar... IE vergeet de background-image mee te nemen. Deze staat dan nog totaal verkeerd.

Ik heb al geprobeerd om het anker als display:block; te zetten, maar dan staan de images allemaal compleet rechts in de content

Sorry dat het misschien wat onduidelijk is, ik weet niet precies hoe ik het moet uitleggen.

[André]

Zet op die link:

Cascading Stylesheet:

white-space: no-wrap;

[Reinier]

André schreef op vrijdag 13 april 2007 @ 15:20:
Zet op die link:

Cascading Stylesheet:

white-space: no-wrap;

Moet dat niet:

Cascading Stylesheet:

white-space: nowrap ;

zijn?

[jbweb]

Helaas, bij

Cascading Stylesheet:

white-space:nowrap;

komt inderdaad het anker aan elkaar te staan als deze uit meerdere woorden bestaat. Maar ondanks dit werkt het nog steeds niet. Als het woord aan het einde van de regel staat en vervolgens door de padding alsnog naar beneden wordt geplaatst blijft het plaatje fout gaan.

[Blaise]

Wat gaat er dan fout? Heb je een voorbeeld online?

[Verwijderd]

Blaise schreef op vrijdag 13 april 2007 @ 16:08:
Wat gaat er dan fout? Heb je een voorbeeld online?

Wat hij zegt.. als de anchor op minder dan 5px van de rechterkant uitkomt, verspringt hij door de padding-right van 5px naar de volgende regel, alleen de background-image blijft staan op de vorige regel.

Vreemd iets. Maakt het nog uit als je je plaatje meer dan 5px breed maakt?

[jbweb]

De padding is 15px, en het plaatje 13px.
Als voorbeeld heb ik ff een pruts site'je...
http://www.jbweb.nl/ptc/

[Blaise]

Je moet haslayout zien te triggeren. display: inline-block erbij en het werkt ook in IE6 en IE7.

[jbweb]

YES!

Cascading Stylesheet:

display: inline-block;

werkt!
Thnx Blaise