[css] border bij inline element over twee regels

[Verwijderd]

ik wil een inline element een border geven.

code:

<a href="#" style="border: 2px solid #000; background: #f90;">twee<br/>regels</a>

wanneer het de tekst echter over twee regels verdeeld wordt, wordt de border en background over twee regels verdeeld:

wat ik wil, is dat de background en border om het hele element zitten:

dit is te doen door er een div om heen te zetten:

code:

<div style="border: 2px solid #000; background: #f90; float: left;">
    <a href="#">twee<br/>regels</a>
</div>

maar ik wil het eigenlijk oplossen zonder extra elementen. in IE is dit op te lossen door display: inline-block mee te geven, maar dat werkt niet in FF en op de mac wordt het element dan als blocklevel element weergegeven. in firefox werkt display:table, maar dat werkt weer niet in IE.
ik kan me eigenlijk niet voorstellen dat dit niet al eens voorbijgekomen is, maar in de search kon ik het niet vinden. iemand een idee?

[chris]

code:

<a href="#" style="border: 2px solid #000; background: #f90; display: table-cell">twee<br/>regels</a>

Werkt in mozilla/opera, voor ie zou je dan ook nog een _display: inline-block kunnen meegeven oid.

[ Voor 43% gewijzigd door chris op 20-12-2005 09:51 ]

[Verwijderd]

met het oog op IE7 probeer eigenlijk zaken als _display te vermijden. Bovendien wordt dan in IE/mac het element als blocklevel getoond (dus over hele breedte). Het gaat hier om een link die er als een custom button uit moet zien, dus desnoods is er ook voor te zorgen dat er alleen  's gebruikt worden

[ Voor 19% gewijzigd door Verwijderd op 20-12-2005 10:15 ]

[Verwijderd]

Waarom niet gewoon

code:

float: left;display:block;

op de a zetten?

[Verwijderd]

daar had ik nog niet aan gedacht. Op zich werkt dat wel, maar dan moet ik weer maatregelen gaan nemen om de omliggende elementen te clearen .