Runda kanter i en div

Hej..
Har ett problem, vill göra runda kanter till en div..

Dvs så i fall jag skriver:

<div id='runda_kanter'>jag är omringad av runda kanter</div>

så ska det bli runda kanter runt texten..

Har löst det med tables dvs:

<table>
<tr>
<td id='top_left'></td><td id='top_middle'></td><td id='top_right'></td>
<tr>
</tr>
<td id='middle_left'></td><td id='content'>text text text</td><td id='middle_right'></td>
</tr>
<tr>
<td id='botton_left'></td><td id='botton_middle'></td><td id=botton_left></td>
</tr>
</table>

Kan lösa det med flera divar på samma sätt som med tables, men vill ha 1 div..
Den ska kunna ha dynamiskt antal bokstäver..
Har börjatr med en lösning som bara verkar funka i Mozilla som ser ut såhär:

.blobb:before
{
  background: transparent url(img/ur.png) scroll no-repeat top right;
  /*margin-bottom: -20px;*/
  /*height: 30px;*/
  display: block;
  border: none;
  content: url(img/ul.png);
  padding: 0;
}

.blobb:after
{
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url(img/dl.png);
  margin: 0 0 -1px 0;
 /* height: 30px;*/
/*  background: white;*/
  background: transparent url(img/dr.png) scroll no-repeat bottom right ;
  padding: 0;
}

<div class='blobb'>Wee omringad av kanter!</div>

Men problemet är att det ej funkar i IE..
Är trött och stressad hoppas allt blev rätt och ni förstår vad jag är ute efter, säkert massa stavfel..

Re: Runda kanter i en div

LOOlau skrev:

Hej..
Har ett problem, vill göra runda kanter till en div..

Dvs så i fall jag skriver:

<div id='runda_kanter'>jag är omringad av runda kanter</div>

så ska det bli runda kanter runt texten..

Har löst det med tables dvs:

<table>
<tr>
<td id='top_left'></td><td id='top_middle'></td><td id='top_right'></td>
<tr>
</tr>
<td id='middle_left'></td><td id='content'>text text text</td><td id='middle_right'></td>
</tr>
<tr>
<td id='botton_left'></td><td id='botton_middle'></td><td id=botton_left></td>
</tr>
</table>

Kan lösa det med flera divar på samma sätt som med tables, men vill ha 1 div..
Den ska kunna ha dynamiskt antal bokstäver..
Har börjatr med en lösning som bara verkar funka i Mozilla som ser ut såhär:

.blobb:before
{
  background: transparent url(img/ur.png) scroll no-repeat top right;
  /*margin-bottom: -20px;*/
  /*height: 30px;*/
  display: block;
  border: none;
  content: url(img/ul.png);
  padding: 0;
}

.blobb:after
{
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url(img/dl.png);
  margin: 0 0 -1px 0;
 /* height: 30px;*/
/*  background: white;*/
  background: transparent url(img/dr.png) scroll no-repeat bottom right ;
  padding: 0;
}

<div class='blobb'>Wee omringad av kanter!</div>

Men problemet är att det ej funkar i IE..

Är trött och stressad hoppas allt blev rätt och ni förstår vad jag är ute efter, säkert massa stavfel..

Se även http://www.virtuelvis.com/gallery/css/rounded/ för en likande lösning, men som sagt det stöds inte av IE.

En annan idé skulle kunna vara det här:

.outer {
position: relative;
width: 50%; /* nödvändig för IE */
border: 20px solid #000;
}

.corner {position: absolute;}
.top {top: -20px;}
.right {right: -20px;}
.bottom {bottom: -20px;}
.left {left: -20px;}

<div class="outer">
lorem ipsum
<img src="tl.gif" width="20" height="20" alt="" class="corner top left">
<img src="tr.gif" width="20" height="20" alt="" class="corner top right">
<img src="br.gif" width="20" height="20" alt="" class="corner bottom right">
<img src="bl.gif" width="20" height="20" alt="" class="corner bottom left">
</div>

Verkar funka i IE5+, Mozilla/Gecko och Opera7. Däremot är Opera6 helt buggig, och kanske IE5/mac.

Ibland kan det tyvärr uppstå "avrundningsfel" i olika textstorlekar, så att bottenramen lyser igenom nedanför hörnbilderna. Fler buggar finns här: http://www.positioniseverything.net/abs_relbugs.html

För att få det att se snyggare ut i äldre webbläsare kan man ge bilderna storleken 1x1 pixel i HTML koden, och sedan förstora upp dem med CSS (som man då döljer för tex Opera6).