[CSS] "Rounded Corners"-Internet

11 inlägg · 5 346 visningar i originalets statistik

2011-09-04 08:02:36#1

Tjena! Jag har ett litet problem! Jag håller på med en hemsida som jag har börjat lägga in lite CSS design i och när jag kollar hur den ser ut så är den precis som jag vill ha den (rounded corners) när jag kollar i Firefox och Chrome men när jag kollar i andra webläsare tex Internet Explorer, Opera osv så funkar det av någon anledning inte! Det här är min CSS kod:

Citat
@charset "utf-8"; .cssDesign { } #overall { background:#999; width:720px; margin-left:auto; margin-right:auto; margin-top:30px; border:1px solid #F1F1F1; -moz-border-radius:20px; -webkit-border-radius:20px; padding:16px, 10px, 40px; -moz-border-top-colors:#666666; -moz-border-left-colors:#666666; -moz-border-right-colors:#666666; -moz-border-bottom-colors:#666666; -webkit-border-top-colors:#666666; -webkit-border-left-colors:#666666; -webkit-border-right-colors:#666666; -webkit-border-bottom-colors:#666666; }

2011-09-04 11:10:14#2

Det är bättre att ha en bakrundsbild med runda hörn i tabellen eller vad det är som ska ha rundade hörn . Då går det bättre i gamla webbläsare.

2011-09-04 11:19:41#3

För att jag antar att du använder senaste css-versionen. För de äldre har inte stöd för det. Då måste man använda bakrundsbilder.

2011-09-04 13:03:42#4

Lägg till border-radius:20px; ;) Tror förresten att man behöver IE9 för att det ska funka. Har för mig att det inte funkar i IE8 och tidigare. Sedan stöder alla senaste versioner av de moderna webbläsarna border-radius, utan prefixen -moz eller -webkit. Kanske dock är bra att behålla det för äldre versioner. Men kort sagt; byt din CSS till det här:

Citat
Citat: @charset "utf-8"; .cssDesign { } #overall { background:#999; width:720px; margin-left:auto; margin-right:auto; margin-top:30px; border:1px solid #F1F1F1; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; padding:16px, 10px, 40px; -moz-border-top-colors:#666666; -moz-border-left-colors:#666666; -moz-border-right-colors:#666666; -moz-border-bottom-colors:#666666; -webkit-border-top-colors:#666666; -webkit-border-left-colors:#666666; -webkit-border-right-colors:#666666; -webkit-border-bottom-colors:#666666; }

2011-09-05 00:33:15#5

det du försöker göra är css3 och det är lååååångt ifrån färdigt så därför funkar det bara i en handfull läsare opera vet jag kräver ett tillägg firefox också så använd gärna photoshop mer än css3 :) just nu

2011-09-05 10:05:20#6

Citat av swechover
det du försöker göra är css3 och det är lååååångt ifrån färdigt så därför funkar det bara i en handfull läsare opera vet jag kräver ett tillägg firefox också så använd gärna photoshop mer än css3 :) just nu

Stora delar av css3 är redan implementerat av dom stora webbläsarna.

Citat av TwiztarN
Tjena! Jag har ett litet problem! Jag håller på med en hemsida som jag har börjat lägga in lite CSS design i och när jag kollar hur den ser ut så är den precis som jag vill ha den (rounded corners) när jag kollar i Firefox och Chrome men när jag kollar i andra webläsare tex Internet Explorer, Opera osv så funkar det av någon anledning inte!

Border radius stöds av alla morderna webbläsare det vill säja IE9+, FF, Webkit(Safari, Chrome) och Opera. Du måste däremot använda vendor prefix för att det ska funka i alla olika versioner. Prefixen är: -moz -webkit -o så en css coden bör se ut något sånt här:

Citat
border-radius:20px;/* ie9, ff4+, chrome 5+, opera 10.50+ */ -moz-border-radius:20px;/* ff1+ */ -webkit-border-radius:20px;/* safari 3+ chrome 3+ -o-border-radius:20px; /*opera*/

2011-09-11 16:59:40#7

Tackar för hjälpen!!

2011-09-18 23:53:41#8

Citat av sunkan
Du måste däremot använda vendor prefix för att det ska funka i alla olika versioner. Prefixen är: -moz -webkit -o

Det där är väl knappast "alla olika versioner"? Tänk på att det sitter ett flertal användare med äldre versioner av Internet Explorer där ute, så jag anser fortfarande att den bästa lösningen är att använda bilder.

2011-09-19 08:13:02#9

Citat av Laxkotlett

Citat av sunkan
Du måste däremot använda vendor prefix för att det ska funka i alla olika versioner. Prefixen är: -moz -webkit -o
Det där är väl knappast "alla olika versioner"? Tänk på att det sitter ett flertal användare med äldre versioner av Internet Explorer där ute, så jag anser fortfarande att den bästa lösningen är att använda bilder.

Jag gillar att du ignorerade mitt på pekande att det funkar i alla moderna webbläsare. Och jag tyckte det var underförstått att jag menade i dom webbläsare jag meningen innan. Och rundade hörn är en kosmetisk detalj så då tycker jag att man kan falla tillbaka på kantiga hörn i äldre webbläsare då den extra html:n och css:n är så pass otymplig om man ska använda bilder.

2011-10-08 23:57:24#10

Citat av sunkan

Citat av Laxkotlett

Citat av sunkan
Du måste däremot använda vendor prefix för att det ska funka i alla olika versioner. Prefixen är: -moz -webkit -o
Det där är väl knappast "alla olika versioner"? Tänk på att det sitter ett flertal användare med äldre versioner av Internet Explorer där ute, så jag anser fortfarande att den bästa lösningen är att använda bilder.
Jag gillar att du ignorerade mitt på pekande att det funkar i alla moderna webbläsare. Och jag tyckte det var underförstått att jag menade i dom webbläsare jag meningen innan. Och rundade hörn är en kosmetisk detalj så då tycker jag att man kan falla tillbaka på kantiga hörn i äldre webbläsare då den extra html:n och css:n är så pass otymplig om man ska använda bilder.

Med tanke på hur du formulerade inlägget så var det ytterst otydligt vad du egentligen menade. Själv skulle jag aldrig välja att lösa det här med CSS3, då jag vill att min webbsida ska se komplett ut i alla olika webbläsare oavsett vilken version man kör. Men om man inte tycker att det spelar någon roll så kan man väl använda CSS3 och låta en grupp besökare få sidan presenterad med en felaktig design.

2011-10-09 09:59:17#11

Citat av sunkan

Citat av swechover
det du försöker göra är css3 och det är lååååångt ifrån färdigt så därför funkar det bara i en handfull läsare opera vet jag kräver ett tillägg firefox också så använd gärna photoshop mer än css3 :) just nu
Stora delar av css3 är redan implementerat av dom stora webbläsarna.
Citat av TwiztarN
Tjena! Jag har ett litet problem! Jag håller på med en hemsida som jag har börjat lägga in lite CSS design i och när jag kollar hur den ser ut så är den precis som jag vill ha den (rounded corners) när jag kollar i Firefox och Chrome men när jag kollar i andra webläsare tex Internet Explorer, Opera osv så funkar det av någon anledning inte!
Border radius stöds av alla morderna webbläsare det vill säja IE9+, FF, Webkit(Safari, Chrome) och Opera. Du måste däremot använda vendor prefix för att det ska funka i alla olika versioner. Prefixen är: -moz -webkit -o så en css coden bör se ut något sånt här:
Citat
border-radius:20px;/* ie9, ff4+, chrome 5+, opera 10.50+ */ -moz-border-radius:20px;/* ff1+ */ -webkit-border-radius:20px;/* safari 3+ chrome 3+ -o-border-radius:20px; /*opera*/

Sant, och om dem inte har en så pass ny webbläsare kan dem gott få kantiga hörn istället.

Logga in i medlemsrutan för att svara i tråden.

Laddar forumet…