[CSS] border-radius fungerar inte i FF?

2013-07-06, 01:10 #1

Medlem

Reg: Mar 2010

Inlägg: 143

Hej!

Har problem med att få rundade hörn på en tabell, funkar perfekt i Chrome och Internet Explorer, men i Firefox så fungerar det inte alls.

Koden finns här:
http://jsfiddle.net/SUhsD/

Vore tacksam om någon fena på CSS kunde lista ut vad som är felet?

Citera

2013-07-06, 11:37 #2

Medlem

Reg: Jul 2010

Inlägg: 236

Ett tips i allmänhet är att göra något "skrikigt" med element när du undrar om något fungerar:

Kod:

.forum-table th:first-child {
  border: 2px solid red;
  -moz-border-radius: 10px 0 0 0;
  -webkit-border-radius: 10px 0 0 0;
  border-radius: 10px 0 0 0;
}

Där ser du att det visst fungerar i Firefox, men till skillnad från andra rundas bara th som regeln säger och inte tr, vilket egentligen är mer rätt i mina ögon. Jag skulle skriva om de första reglerna så att de träffar celler (th, td) istället för rader, typ .evenOddColoursLight tr:not(.noEvenOddColoursLight) td. Jag skriver aldrig regler för rader då de ofta är inkonsekventa webbläsare emellan, som du märkte här.

PS: prefix för border-radius behövs knappast längre, -moz är för FF 3.6 och -webkit för Safari 4, iOS 3.2 och Android 2.1.

Citera

2013-07-06, 21:43 #3

Medlem

Reg: Mar 2010

Inlägg: 143

Citat:

Ursprungligen postat av Snarken

Ett tips i allmänhet är att göra något "skrikigt" med element när du undrar om något fungerar:

Kod:

.forum-table th:first-child {
  border: 2px solid red;
  -moz-border-radius: 10px 0 0 0;
  -webkit-border-radius: 10px 0 0 0;
  border-radius: 10px 0 0 0;
}

Där ser du att det visst fungerar i Firefox, men till skillnad från andra rundas bara th som regeln säger och inte tr, vilket egentligen är mer rätt i mina ögon. Jag skulle skriva om de första reglerna så att de träffar celler (th, td) istället för rader, typ .evenOddColoursLight tr:not(.noEvenOddColoursLight) td. Jag skriver aldrig regler för rader då de ofta är inkonsekventa webbläsare emellan, som du märkte här.

PS: prefix för border-radius behövs knappast längre, -moz är för FF 3.6 och -webkit för Safari 4, iOS 3.2 och Android 2.1.

Tack, jag han lösa det innan du svarade på ungefär samma sätt som du beskrev.

Citera

[CSS] border-radius fungerar inte i FF?

Stöd Flashback