IE8 en CSS3 PIE problemen met rounded corners

[Noctonix]

Hallo mede Tweakers!

Ik zit met een probleempje, ik ben voor een website bezig welke een verzend knop heeft met rounded corners.

Ik heb voor IE het bestand PIE.htc in de root van de website gezet (bij de index pagina).
De Style bevind zich in: /css/layout.css
Hierin bij het element (submit button) staat het volgende:

Cascading Stylesheet:

 
.btn-submit{ 
cursor: pointer; 
padding: 3px  15px; 
color: #FFF; 
background: #B9BE56; 
border: none; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
behavior: url(/PIE.htc); 
 }

Nu werkt dit prima op een andere website waar ik mee bezig was.
Alleen bij mijn huidige website werkt het niet!

In ie krijg ik links onder een uitroepteken met:

'element' is niet gedefineerd
PIE.htc
Code: 0
URI: www.mijnsite.nl/PIE.htc

What am i doing wrong??

[RobIII]

Vooraan beginnen: Download de browser je .htc wanneer je de (exacte!) url uit je HTML in de adresbalk gooit? En wat is de contenttype waarmee dit bestand geserveerd wordt? Überhaupt hier al eens gekeken?

[ Voor 32% gewijzigd door RobIII op 14-05-2012 11:42 ]

[Verwijderd]

Je link geeft iig een 404, en je zal ook ervoor moeten zorgen dat de correcte headers worden meegegeven. Denk erom dat de URI naar CSS3Pie relatief moet zijn aan het huidige HTML document, en niet het CSS document waar de behavior rule in staat.

CSS3 pie is leuk, maar ook traag en doet gekke dingen met kleurtjes in sommige gevallen. Al met al ben je _veel_ beter af met een achtergrondafbeelding voor je graceful degradation.

[erwin85]

Soms helpt het ook om position: relative toe te voegen aan je CSS. Of gebruikt PIE.php in plaats van de PIE.htc.

[Verwijderd]

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

Deze 4 zorgen ervoor dat het zo'n beetje op elke browser werkt.

Ook zie ik bij jou

border: none;

[Scrummie]

Verwijderd schreef op maandag 14 mei 2012 @ 18:46:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

Deze 4 zorgen ervoor dat het zo'n beetje op elke browser werkt.

Ook zie ik bij jou

border: none;

Niet in IE8 of lager. Wat heeft border: none; te maken met border-radius?

Verder; Eerste reactie is een goeie tip (tweede ook). Ik gok dat linken naar pie.php (ipv pie.htc) al heel veel oplossingen gaat bieden.

[RobIII]

Verwijderd schreef op maandag 14 mei 2012 @ 18:17:
Je link geeft iig een 404

Ik neem aan dat de URL die TS geeft een fictieve URL is i.v.m. spam

[crisp]

Verwijderd schreef op maandag 14 mei 2012 @ 18:46:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

Deze 4 zorgen ervoor dat het zo'n beetje op elke browser werkt.

Tegenwoordig ondersteund elke browser deze property zelfs zonder vendor prefix

En IE8 - tsja; hier bij Tnet zeggen we: dan maar geen ronde hoekjes voor IE8

[ Voor 10% gewijzigd door crisp op 14-05-2012 22:12 ]

[funkeey]

Noctonix schreef op maandag 14 mei 2012 @ 11:22:

Cascading Stylesheet:

 
behavior: url([b]http://mijnsite.nl[/b]/PIE.htc); 

Probeer ook eens een absoluut pad. Zo weet je zeker dat het bestand gewoon werkt voordat je verder zoekt. Zo niet, kijk dan inderdaad naar juiste headers.

Werkt het met een absoluut pad wel, dan moet je het relatieve pad veranderen naar misschien wel ../../ of iets dergelijks aangezien je PIE.htc in een hele andere folder staat.

[C0rnelis]

Noctonix schreef op maandag 14 mei 2012 @ 11:22:
[..]
De Style bevind zich in: /css/layout.css

Cascading Stylesheet:

 
behavior: url(/PIE.htc); 

URI: www.mijnsite.nl/PIE.htc

Zoals funkeey eigenlijk al zegt: absoluut vs relatief pad.
Je cssbestand staat in site/css, terwijl je htc bestand in /site staat. Aangezien paden in css bestanden standaard relatief zijn zoekt hij dus naar /site/css/PIE.htc

[RobIII]

C0rnelis schreef op maandag 14 mei 2012 @ 22:40:
Aangezien paden in css bestanden standaard relatief zijn zoekt hij dus naar /site/css/PIE.htc

Uh, een pad dat begint met een / (en dat doet 't in je quote en in de topicstart) is een absoluut pad (/ staat dan voor de root van 't domein). Een pad dat begint met een ./ of ../ of helemaal geen / is een relatief pad.

Zien is geloven? Hier

[ Voor 25% gewijzigd door RobIII op 14-05-2012 22:48 ]

[C0rnelis]

Woops...