[CSS] "Rounded Corners"-Internet

TwiztarN
P25
Medlem
Online

4 september 2011 08:02 | #1 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!

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;
}

brainfuck
P23
Medlem

4 september 2011 11:10 | #2 brainfuck

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.


brainfuck
P23
Medlem

4 september 2011 11:19 | #3 brainfuck

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.

smile


snaccer
P22
Medlem
Online

4 september 2011 13:03 | #4 snaccer

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;
}

swechover
P29
Medlem

5 september 2011 00:33 | #5 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


sunkan
P22
Moderator
Online

5 september 2011 10:05 | #6 sunkan

Skrivet av swechover View Post
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.

Skrivet av TwiztarN View Post
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*/

TwiztarN
P25
Medlem
Online

11 september 2011 16:59 | #7 TwiztarN

Tackar för hjälpen!!


Laxkotlett
P22
Medlem
Online

18 september 2011 23:53 | #8 Laxkotlett

Skrivet av sunkan View Post
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.


sunkan
P22
Moderator
Online

19 september 2011 08:13 | #9 sunkan

Skrivet av Laxkotlett View Post
Skrivet av sunkan View Post
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.


Laxkotlett
P22
Medlem
Online

8 oktober 2011 23:57 | #10 Laxkotlett

Skrivet av sunkan View Post
Skrivet av Laxkotlett View Post
Skrivet av sunkan View Post
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.


jaytechnos
P25
Moderator
Online

9 oktober 2011 09:59 | #11 jaytechnos

Skrivet av sunkan View Post
Skrivet av swechover View Post
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.
Skrivet av TwiztarN View Post
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.


Skriva inlägg?

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