Problem med runde hjørner i css

[aeinstein]

Fant en kjempemåte å lage runde hjørner med, bortsett fra at IE ikke liker dem 100%

 

Her er siden (det er en _uferdig_ php/mysql side med css):

sida mi

 

Som (noen?) av dere ser i FF så kommer hjørnene opp og holder seg der!

Og i IE så kommer de også opp, men de to nederste hjørnene i hver boks forsvinner når man scroller forbi + at det kommer et skille på hovveddelen også (om du legger merke til det...)

 

 

Her er koden rundt hovedmenyen:

<div id="menuone">
<div class="l"><div class="r"><div class="t"><div class="b"> <!-- kanter -->
 <div class="bl"><div class="br"><div class="tl"><div class="tr"> <!-- hjørner -->
  <ul id="mainmenu">
   <li><a href="index.php?kat=Hjem">Hjem</a></li>
   <li><a href="index.php?kat=Bilder">Bilder</a></li>
   <li><a href="index.php?kat=Modding">Modding</a></li>
   <li><a href="index.php?kat=Startside">Startside</a></li>
   <li><a href="index.php?kat=UiO">UiO</a></li>	
  </ul>
 </div></div></div></div>
</div></div></div></div>  	
<div class="clear"> </div> <!--liten IE hack -->
</div>

og her er den delen av cssfila:

/* RUNDE HJØRNER PÅ MENY OG INNHOLD */
.l {background: url(../images/boks/l.jpg) 0 0 repeat-y #99ccff}
.r {background: url(../images/boks/r.jpg) 100% 0 repeat-y}
.t {background: url(../images/boks/t.jpg) 0 0 repeat-x}
.b {background: url(../images/boks/b.jpg) 0 100% repeat-x}
.bl {background: url(../images/boks/bl.jpg) 0 100% no-repeat}
.br {background: url(../images/boks/br.jpg) 100% 100% no-repeat}
.tl {background: url(../images/boks/tl.jpg) 0 0 no-repeat}
.tr {background: url(../images/boks/tr.jpg) 100% 0 no-repeat; padding: 8px;}
.clear {font-size: 1px; height: 1px}

 

Hvorfor vil ikke hjørnebildene holde seg på plass i IE?

Anyone

[Heilage]

blablabla

5781285[/snapback]

 

Du må sette egne verdier som "background-attachment", "background-repeat" osv for at IE skal godkjenne koden.

[aeinstein]

det er så vidt jeg ser ikke mulig å sette ett bilde til "nede til venstre" uten å gjøre det i en kommando slik jeg har gjordt. Fordi de fantes bare:

background-position: top | left | right | bottom | none | inherit;

Men det fungerer for så vidt nå; hjørnene forsvinner ikke når jeg scroller opp og ned. Jeg la til en regel:

.l {background: url(../images/boks/l.jpg) 0 0 repeat-y #99ccff}
ble til:
.l {background: url(../images/boks/l.jpg) 0 0 repeat-y #99ccff; width: 120px;}

 

Så måtte jeg lage "L2":

.l2 {background: url(../images/boks/l.jpg) 0 0 repeat-y #99ccff}

som jeg brukte på innholdet, ellers posisjonerte den seg UNDER menyene!

Men fremdeles kommer det streker når jeg scoller, vedlagt bilde viser problemet:

 

 

Det kommer ikke slike streker i menyene.