CSS in Safari vs. Internet Explorer

[brsm]

*excuses voor de titel, wou hem achteraf aanpassen kon niet meer. Onderwerp is CSS

Ik ben bezig met me CSS en ik wil meerdere achtergronden gebruiken. Deze worden prima weergegeven in Safari maar in IE niet.

Ik heb gezocht op google en hier @ tweakers maar ik kom niet tot een oplossing. Iemand een idee hoe dit kan en is er een oplossing zodat ook IE mijn css kan uitlezen?

Cascading Stylesheet:

.boxes  {
background-color:#FFFFFF;
background-image:url(images/hoek-1.png), url(images/hoek-2.png), url(images/hoek-3.png), url(images/hoek-4.png);
background-repeat:no-repeat;
background-position:top left, top right, bottom right, bottom left;
padding: 5px;
margin-bottom:8px;
}

voorbeeld in safari:

(ik wil afgeronde hoekjes in mijn divs)
http://designstylingstudio.nl/boxes/boxes.html

[ Voor 12% gewijzigd door een moderator op 11-09-2008 08:03 ]

[harrald]

je maakt gebruik van css3
en voorlopig heb je nog maar bar weinig aan css3 omdat het zo goed als niet ondersteund word door de huidige browsers.

[brsm]

Hmm..dat vind ik jammer, zeker nu IE8 is uitgebracht (beta natuurlijk). Er is dus geen (tijdelijke) oplossing? Ach ja, apple..

[jvanderkroon]

kan je de afgeronde hoekjes niet gewoon doen met een border radius?

Cascading Stylesheet:

  

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

[harrald]

Als je wilt dat je site er zo'n beetje overal het zelfde uitziet, moet je van css2 uitgaan. Met wat hacks doen dan alle veelgebruikte browsers wat je wilt (IE6, IE7, IE8, opera, FF, safari, chrome).
Het is inderdaad hopen dat de browser css3 zo snel mogelijk volledig gaan ondersteunen

@ hierboven: en IE dan?

[ Voor 4% gewijzigd door harrald op 10-09-2008 22:19 ]

[jvanderkroon]

harrald schreef op woensdag 10 september 2008 @ 22:18:
Als je wilt dat je site er zo'n beetje overal het zelfde uitziet, moet je van css2 uitgaan. Met wat hacks doen dan alle veelgebruikte browsers wat je wilt (IE6, IE7, IE8, opera, FF, safari, chrome).
Het is inderdaad hopen dat de browser css3 zo snel mogelijk volledig gaan ondersteunen

@ hierboven: en IE dan?

regel 1 is toch voor IE regel 2 voor mozilla en 3 voor safari. (ik heb de code uit het css bestand van tweakers.net dus het zou best wel in IE werken neem ik aan. kan het alleen niet testen heb hier alleen safari en ff)

[ Voor 13% gewijzigd door jvanderkroon op 10-09-2008 22:24 ]

[harrald]

msxbox schreef op woensdag 10 september 2008 @ 22:23:
[...]


regel 1 is toch voor IE regel 2 voor mozilla en 3 voor safari. (ik heb de code uit het css bestand van tweakers.net dus het zou best wel in IE werken neem ik aan. kan het alleen niet testen heb hier alleen safari en ff)

had het voor ik me reactie had geplaats even gegoogled en de eerste regel is voor opera, schijnt het.
en dan nog stel al zou bijv IE7 dit ondersteunen, wat moet je dan met IE6? dat je IE5 niet meer ondersteund kan ik goed begrijpen maar er zijn nog heleboel mensen die IE6 draaien (waaronder een klasgenoot van me op een ict opleiding ).

[ Voor 21% gewijzigd door harrald op 10-09-2008 22:31 ]

[crisp]

Nee, IE ondersteund geen border-radius, ook IE8 nog niet. Maar aangezien het puur stilistisch is en IE (op Tweakers) toch een minderheidsbrowser krijgen die gebruikers gewoon geen afgeronde hoekjes

[brsm]

msxbox schreef op woensdag 10 september 2008 @ 22:18:
kan je de afgeronde hoekjes niet gewoon doen met een border radius?

Cascading Stylesheet:

  

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

Op firefox pakt die de css nu wel; heb deze onder het bestaande deel geplakt. Dank u.

[Spinal]

harrald schreef op woensdag 10 september 2008 @ 22:27:
[...] en de eerste regel is voor opera, schijnt het.

Nee helaas, Opera (9.60b) ondersteunt border-radius nog altijd niet

[Kiphaas7]

msxbox schreef op woensdag 10 september 2008 @ 22:18:
kan je de afgeronde hoekjes niet gewoon doen met een border radius?

Cascading Stylesheet:

  

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

Daarmee vang je dus alleen webkit en mozilla. Opera en IE ondersteunen het niet.

Wil je de meest gebruikte browsers die custom hoekjes laten gebruiken, kan je inderdaad nog geen gebruik maken van CSS3 (wat iedereen hierboven ook zegt). je zult dan iets minder elegante oplossingen moeten gebruiken, door elementen te nesten bijvoorbeeld.

Google maar eens op "rounded corners css". Er zijn daarvan genoeg voorbeelden. Een andere weg zou kunnen zijn door javascript te gaan gebruiken.

[ Voor 4% gewijzigd door Kiphaas7 op 11-09-2008 12:09 ]