Rundade hörn..

Hej!

Har hållit på nu i två dagar med att hitta något bra sätt att göra rundade hörn på en DIV som varken har fast höjd eller bredd. Helst ville jag ha transparenta utsidor på hörnen, men det har jag gett upp.

Har knåpat ihop en egen modell som använder html-koden:

<div class="box">
  <div class="box-head">&nbsp;</div>
  <div class="box-content">
    bla bla
  </div>
  <div class="box-footer">&nbps;</div>
</div>

Men hallå, det känns ju som nästlade tabeller all over again. Så mycket "onödig" kod, särskillt när man har många boxar, innuti varandra etc. Och det lilla   tecknet vill jag helst slippa, eftersom det gör att man får en ganska stor padding upp och ner.

Så efter lite sökande hittade jag ett gäng metoder som använde javascript för att lägga in lite kod i efterhand, vilket ju resulterade i bättre html-kod. Sen finns det ju de metoder som inte ens använder bilder, typ niftycorners.

Men givetvis fungerar inget utav dessa alternativ tillfredsställande. Boxar som ligger under varandra börjar visas underligt i IE (...) bl a eftersom IE drar ner någon padding längst ner utanför dess parent div eller något annat lika fånigt. Om inte det så något annat. Sedan känns väl inte javascript som någon underbar lösning för att runda till hörn.

Börjar verkligen bli less på CSS. Återigen blir det hela bara ett evigt sökande efter hacks och "tricks" i kriget mot IE, där negativa marginaler ofta spelar en alltför stor roll... JAG BLIR SÅ TRÖTT! :)

För att fatta mig kort: ( :) ) Finns det någon som har en bra metod för att göra rundade hörn, eller är det bara att bita ihop och vänta på CSS3?

Om du väljer det sistnämda alternativet (som fungerar i Firefox och Safari idag) så ser det ut såhär:

.box { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

(Så småning behöver man inte ha de två första deklarationerna...)

Tack, men IE stöd är tyvärr en nödvändighet :(

Hittade en HTC som ger någorlunda bra resultat i IE: http://www.akatsukinishisu.net/itazuragaki/css/nifty_corners_behavior.html

Har inte tittat närmare om det är implementerat på motsvarande sätt som Nifty Corners eller annorlunda dock. Det fungerar förstås heller inte i Opera, men förhoppningsvis lägger Opera till stöd för border-radius... :)