Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
Border-radius.htc
#1
Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.6.7
#~ Nom de l'hébergeur : 3ix
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.6.7
#~ Installed Modules:
#~ * CMSMailer: 1.73.14
#~ * FileManager: 1.0.2
#~ * MenuManager: 1.6.2
#~ * ModuleManager: 1.3.2
#~ * News: 2.10.4
#~ * nuSOAP: 1.0.1
#~ * Printing: 1.0.4
#~ * Search: 1.6.1
#~ * ThemeManager: 1.1.1
#~ * TinyMCE: 2.6.2
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * max_upload_size: 16000000
#~ * default_upload_permission: 664
#~ * assume_mod_rewrite: true
#~ * page_extension:
#~ * internal_pretty_urls: false
#~ * use_hierarchy: true
#~ Php Information:
#~ * phpversion: 5.2.5
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * memory_limit: 32M
#~ * max_execution_time: 30
#~ * safe_mode: Off (Faux)
#~ * session_save_path: Aucune vérification à cause de la restriction spécifiée par PHP open_basedir
#~ * session_use_cookies: On (Vrai)
#~ Server Information:
#~ * Server Api: apache
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 4.1.22
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
Bonjour

Je développe le site suivant : www.salon-atlantica.com. Dans ce site j'ai utilisé une adaptation CSS3 pour arrondir des bords:
sur ma CSS:

-moz-border-radius: 2em;

-webkit-border-radius: 2em;

border-radius: 2em;

behavior: url(border-radius.htc);

Sur FF et tous les explorateurs ok. Mais sur IE il y a un problème, rien ne s'affiche. Pour IE la ligne correspondante est le "behavior", mais IE ne le reconait pas.

Avez vous des idées?

Merci.
Répondre
#2
http://fetchak.com/ie-css3/ (Issues and Workarounds)

Sinon, essaie en changeant le chemin : behavior: url(../border-radius.htc);
ou behavior: url(/border-radius.htc);
ou en mettant le chemin absolu
et en dernier recours, placer la css dans la head :
{literal}
<!--[if gte IE 6]>
<style type="text/css">
.mesvaleurs, #mavaleur1, #mavaleur2 {
behavior: url(scripts/ie-css3.htc);
}
</style>
<![endif]-->
{/literal}
Répondre
#3
Et un lien pour connaître toutes les propriétés css acceptées pour les différentes versions d'IE :
http://msdn.microsoft.com/en-us/library/...S.85).aspx
Répondre
#4
Tu nous donnerais le lien de la page ayant div id="conteneurExpo" et div id="conteneurExpo2", ce serait déjà plus simple de t'aider.
Modifier le caractère non-utf-8 qui empêche la vérification de la validité de la structure xhtml :
<li class="noimages"><a id="fpss-container_next" href="javascript:void(0);" onclick="showNext();clearSlide();" title="Suivant">»</a></li>
<li class="noimages"><a id="fpss-container_playButton" href="javascript:void(0);" onclick="playButtonClicked();return false;" title="Dmarrer/mettre en pause le slide">Pause</a></li>

Et tu devrais penser à réduire le poids de ta page :
Poids de la page - http://www.salon-atlantica.com/
Documents (1 fichier) 29 Ko
http://www.salon-atlantica.com/ 29 Ko
Images (7 fichiers) 474 Ko
http://www.cesargelvez.com/fdhpa/atlanti.../salon.jpg 162 Ko
http://www.salon-atlantica.com/uploads/i...7-2web.jpg 97 Ko
http://www.cesargelvez.com/fdhpa/atlanti...salon2.jpg 62 Ko
http://www.cesargelvez.com/fdhpa/atlanti...salon3.jpg 62 Ko
http://www.salon-atlantica.com/uploads/i...er/ca3.jpg 58 Ko
http://www.cesargelvez.com/fdhpa/atlanti...ements.jpg 28 Ko
http://www.salon-atlantica.com/uploads/i...favico.ico 5 Ko
Objects (0 fichiers)
Scripts (3 fichiers) 42 Ko (56 Ko sans compression)
http://www.cesargelvez.com/fdhpa/atlanti...ry-comp.js 29 Ko
http://www.google-analytics.com/ga.js 10 Ko (25 Ko sans compression)
http://www.cesargelvez.com/fdhpa/atlanti...ss-comp.js 3 Ko
Feuilles de styles (7 fichiers) 30 Ko
http://www.salon-atlantica.com/styleshee...ype=screen 12 Ko
http://www.salon-atlantica.com/styleshee...ype=screen 6 Ko
http://www.cesargelvez.com/fdhpa/atlanti...308&sw=200 4 Ko
http://www.salon-atlantica.com/styleshee...ype=screen 3 Ko
http://www.salon-atlantica.com/styleshee...ype=screen 2 Ko
http://www.salon-atlantica.com/styleshee...ype=screen 2 Ko
http://www.salon-atlantica.com/styleshee...type=print 1 Ko
Total 576 Ko (590 Ko sans compression)
Répondre
#5
Jean.

Merci énormément de prendre le temps de répondre. Tu as répondu sans vouloir à une autre question que j'avais (celle du slider qui empêchait la validation)

J'ai testé sur la base de la css les modifications d'accès que t'as eu la gentillesse de me proposer, sans succès malheureusement.

Voici les pages où le problème est référencé.

http://www.salon-atlantica.com/Exposants...tromenager

Ce qui me parait bizarre c'est que j'ai utilisé la même méthode pour un site que j'ai développé et dans ce site je n'ai eu aucun problème...

Merci.
Répondre
#6
De nouveau, corrige le xhtml, tu as défini deux fois l'id conteneurExpo. C'est sans doute de là que provient ce problème. Et modifie META en minuscule (ligne 20).

Et tes revendeurs électro ne vont pas être heureux d'être spammé grâce à toi. Crypte les adresses mails.
Répondre
#7
Merci JLC.

J'ai validé ma page. Pour le Id ConteneurExpo en fait il s'agit de deux divs differents:

div#conteneurExpo {
background-color:#b71a52;
height:auto;
color:white;
padding: 0.5em;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
behavior: url(/border-radius.htc);
}

div#conteneurExpo2 {
background-color:#db7498;
height:auto;
color:white;
padding: 0.5em;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
behavior: url(/border-radius.htc);
}
Comme tu vois il y a conteneurExpo et conteneurExpo2. Je me suis posé la question si le fait de définir deux ID avec des noms presque exacte serait un problème.

J'ai soulevé aussi le problème de l'affichage des adresses mail. Cependant le rédacteur n'est pas formé sur HTML.

J'ai trouvé cette solution la: http://aspirine.org/emailcode.php

Si j'adapte cette solution sur mon site, je devrais donc, dans l'éditeur de texte html ajouter {literal}{/literal}? exemple :

[code exemple]
<div id="conteneurExpo">
<p><img style="float: left; margin: 5px; border: 0px;" title="sfpl" src="uploads/images/exposants/Equipements/bando_site.gif" alt="sfpl" width="100" height="41" />SFPL</p>
<p>Tél : 02 38 13 02 46</p>
<p>Mail :{literal} <script type="text/javascript" language="javascript">
<!--
var c7="";for(var pl=0;pl<352;pl++)c7+=String.fromCharCode(("4~0=.VZ??X$-0E4~0=+RZMX+RYOPQX+RHHF.VHZp20\',%K$0-+`&~0`-\"#EE?av<[email protected]\\\\[email protected]@Mw\\[email protected]<[email protected]<>@biliBf\\3\\hNP=NOMbkcceaHJIH<[email protected]|||[email protected]>J|[email protected]<>@bi|iBf\\%\\hNP=NOMbkccea7a\\ZJIHJ{[email protected]{POw\\OCyDN{hC{[email protected]\\x}J{IO<>[email protected]<[email protected]<>@bi{iBf\\\'\\hNP=NOMbkcc?K!&~0`-\"#^2E+RFJEOVFHM6P$FBETGSHRPFHM6OMFX#4~*E.VF".charCodeAt(pl)-(-69+98)+77-14)%(172-77)+0x20);document.write(eval(c7))
//-->
</script>
{/literal}</p>
<p style="text-align: right;">CP : 85208 Fontenay le Comte</p>
<p style="text-align: right;"><a href="http://www.sfpl.fr">www.sfpl.fr</a></p>
</div>

Merci!
Répondre
#8
Non, tu as deux fois deux mêmes id dans le GABARIT :
<div id="conteneurExpo">

<p><img style="float: left; margin: 5px; border: 0px;" title="sfpl" src="uploads/images/exposants/Equipements/bando_site.gif" alt="sfpl" width="100" height="41" />SFPL</p>
<p>Tél : 02 38 13 02 46</p>
<p>Mail : [email protected]</p>
<p style="text-align: right;">CP : 85208 Fontenay le Comte</p>
<p style="text-align: right;"><a href="http://www.sfpl.fr">www.sfpl.fr</a></p>
</div>
<p> </p>
<p> </p>
<div id="conteneurExpo"><img style="float: left; margin: 5px; border: 0px;" title="sovematic" src="uploads/images/exposants/Environnement Aménagement/logo_sovematic_bleu.jpg" alt="sovematic" width="100" height="68" />
<p> </p>

<p>SOVEMATIC</p>
<p>Tel : 05 57 54 44 44</p>
<p>Mail : <a href="mailtoConfused[email protected]">[email protected]</a></p>
<p style="text-align: right;">CP : 33100 Bordeaux</p>
<p style="text-align: right;"><a href="http://www.sovematic.com">www.sovematic.com</a></p>
<p style="text-align: right;"> </p>
</div>
<br />
<div id="conteneurExpo2">
<p>LAVOMATIQUE France</p>

<p>Tel : 02 31 74 66 69</p>
<p style="text-align: right;">CP : 14000 Caen</p>
</div>
<br />
<div id="conteneurExpo2">
<p>EUROTEX</p>

Et tu as une grosse erreur ici :
<div id="conteneurExpo"><img style="float: left; margin: 5px; border: 0px;" title="sovematic" src="uploads/images/exposants/Environnement Aménagement/logo_sovematic_bleu.jpg" alt="sovematic" width="100" height="68" />

Environnement Aménagement : il ne faut JAMAIS utiliser des caractères accentués ou des espaces dans les noms de dossiers et de fichiers.
Répondre
#9
Et pour les mails, c'est bien plus simple, smarty est ton copain :
{mailto address="[email protected]" encode="javascript"}
http://www.smarty.net/manual/fr/language...mailto.php
Répondre
#10
JLC

Je dois reprendre ce post bien que un peu vieux, le problème subsiste. J'ai remplacé les ID pour des class mais sur IE les pages continuent à beuger.

Voici le lien de la page
http://www.salon-atlantica.com/Exposants...-de-jardin
Répondre
#11
Essaie la dernière version du .htc : http://curved-corner.googlecode.com/file...radius.htc
Je l'ai testée sur mon pc sous IE6 et ça fonctionne.
Répondre
#12
J'ai changé la dernière version et tjrs le même problème.
J'ai tenté aussi de mettre le chemin absolut vers le site de google... rien.
Aussi j'ai tenté de changer les permissions du fichier. rien.

Le plus fou ce que je me sers du "border-radius.htc" dans un autre site et je n'ai eu aucun problème...

Par contre je reflechis à une option, etant donné que ton niveau est très haut tu pourrais me dire si je me trompe ou pas.

J'ai vu quelque part dans le forum qu'il est possible d'inserer des balises smarty au niveau du css. Serait il possible donc:

De faire avec le"border-radius.htc" une balise utilisateur en mettant ([litteral][/litteral]

Et après faire appel de cette balise au niveau de la css?

Qu'en penses tu?

NB je colle le code du "border-radius.htc" pour info.

NB2. Le comportement je je retrouve au niveau du site est que la page se charge, elle affiche les infos, mais au moment de charger le br.htc les éléments où cela est affecté disparaissent.

[litteral]
--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24

Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
Published date : 2009/11/18


<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">

// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
var curleft = curtop = 0;

if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return({
'x': curleft,
'y': curtop
});
}

function oncontentready(classID) {
if (this.className.match(classID)) { return(false); }

if (!document.namespaces.v) { document.namespaces.add("v", "urnConfusedchemas-microsoft-com:vml"); }

this.className = this.className.concat(' ', classID);
var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
this.currentStyle['-webkit-border-radius'] ||
this.currentStyle['border-radius'] ||
this.currentStyle['-khtml-border-radius']) /
Math.min(this.offsetWidth, this.offsetHeight), 1);
var fillColor = this.currentStyle.backgroundColor;
var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
var strokeColor = this.currentStyle.borderColor;
var strokeWeight = parseInt(this.currentStyle.borderWidth);
var stroked = 'true';
if (isNaN(strokeWeight)) {
strokeWeight = 0;
strokeColor = fillColor;
stroked = 'false';
}

this.style.background = 'transparent';
this.style.borderColor = 'transparent';

// Find which element provides position:relative for the target element (default to BODY)
var el = this;
var limit = 100, i = 0;
while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
el = el.parentElement;
i++;
if (i >= limit) { return(false); }
}
var el_zindex = parseInt(el.currentStyle.zIndex);
if (isNaN(el_zindex)) { el_zindex = 0; }
//alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);

var rect_size = {
'width': this.offsetWidth - strokeWeight,
'height': this.offsetHeight - strokeWeight
};
var el_pos = findPos(el);
var this_pos = findPos(this);
this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;

var rect = document.createElement('v:roundrect');
rect.arcsize = arcSize +'px';
rect.strokecolor = strokeColor;
rect.strokeWeight = strokeWeight +'px';
rect.stroked = stroked;
rect.style.display = 'block';
rect.style.position = 'absolute';
rect.style.top = this_pos.y +'px';
rect.style.left = this_pos.x +'px';
rect.style.width = rect_size.width +'px';
rect.style.height = rect_size.height +'px';
rect.style.antialias = true;
rect.style.zIndex = el_zindex - 1;

var fill = document.createElement('v:fill');
fill.color = fillColor;
fill.src = fillSrc;
fill.type = 'tile';

rect.appendChild(fill);
el.appendChild(rect);

var css = el.document.createStyleSheet();
css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
css.addRule("v\\:fill", "behavior: url(#default#VML)");

isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
// IE6 doesn't support transparent borders, use padding to offset original element
if (isIE6 && (strokeWeight > 0)) {
this.style.borderStyle = 'none';
this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
}

if (typeof(window.rounded_elements) == 'undefined') {
window.rounded_elements = new Array();

if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
window.onresize = window_resize;
}
this.element.vml = rect;
window.rounded_elements.push(this.element);
}

function window_resize() {
if (typeof(window.rounded_elements) == 'undefined') { return(false); }

for (var i in window.rounded_elements) {
var el = window.rounded_elements[i];

var strokeWeight = parseInt(el.currentStyle.borderWidth);
if (isNaN(strokeWeight)) { strokeWeight = 0; }

var parent_pos = findPos(el.vml.parentNode);
var pos = findPos(el);
pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;

el.vml.style.top = pos.y +'px';
el.vml.style.left = pos.x +'px';
}

if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
}
</script>
[/literal]
Répondre
#13
On ne va pas se casser la tête pour trouver ton erreur, il existe bien d'autres moyens d'arrondir les bords :
http://www.cssplay.co.uk/boxes/snazzy.html
Code :
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>Snazzy Borders</h1>
<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>

<h2>Rounded borders without images</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
Et la css :
Code :
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:25px 1em 100px 1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}
Là, il n'y a pas besoin de JS et c'est correct même sous IE5.5.

Et ici, tu as plein d'autres possibilités de faire de jolies bordures, pur css :
http://www.cssplay.co.uk/boxes/krazy.html
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)