CSS : 3 div empilé MAIS espace entre eux sous IE ?

**le Jeu Nov 05, 2009 17:26**

Salut,

J'ai une autre question en css. J'ai 3 blocs les uns au dessus des autres avec pour chacun une image de fond. Sous firefox j'ai bien mes 3 blocs empilés sans espaces entre eux. Sous IE, j'ai un espace entre le bloc cadrerighttop et le bloc cadrerightrepeat.

Code: Tout sélectionner: .cadrerighttop { height:15px; background-image:url("../images/cadrerighttop.jpg"); background-repeat: no-repeat; border:black solid 1px; } .cadrerightrepeat { height:100%; background-image:url("../images/cadrerightrepeat.jpg"); background-repeat: repeat-y; border:black solid 1px; } .cadrerightbottom { height:14px; background-image:url("../images/cadrerightbottom.jpg"); background-repeat: no-repeat; border:black solid 1px; }

HTML :

Code: Tout sélectionner: <div class="cadrerighttop"></div> <div class="cadrerightrepeat"></div> <div class="cadrerightbottom"></div>

Auriez-vous une idée sur comment ne pas avoir d'espace du tout entre les 3 div ??

Merci

**le Jeu Nov 05, 2009 18:06**

tu as un lien où c'est implémenté que l'on puisse faire joujou avec firebug ?

bon courage

**le Jeu Nov 05, 2009 18:09**

Avec une URL ce serait plus simple (barre webdevelopper + edit CSS en live...)
Il n'y aurai pas du padding et/ou margin par hasard ?

Code: Tout sélectionner: .cadrerighttop, .cadrerightrepeat, .cadrerightbottom{ padding:0;margin:0; }

**le Jeu Nov 05, 2009 18:11**

Ouais voilà :

http://www.amisphereclub.be/new/

**le Jeu Nov 05, 2009 18:25**

Dans firefox on ne voit même pas le bloc du milieu.
Ca doit etre un problème de margin/padding par défaut du navigateur

C'est pour faire des bords arrondis à un bloc si j'ai bien compris. tu peux essayer de les faire avec ce site: http://www.roundedcornr.com/
Qui génère CSS + images

Sinon en JS pour éviter les div imbriqués: http://www.methvin.com/jquery/jq-corner-demo.html

Je sais pas si ça t'aide...

**le Jeu Nov 05, 2009 19:38**

J'ai testé jquery mais suis pas une bete en javascript. Je sais pas quoi mettre dans cette balise script en début de page html pour que ça fonctionne. Car dans l'exemple il met ceci :

Code: Tout sélectionner: <div class="demo"><h1>Round</h1> <p>$(this).corner();</p></div>

Mais moi je veux pas afficher $(this).corner(); Je comprends pas trop. Quelqu'un pourrait me donner un exemple hyper bidon avec juste un div et l'appelle à la bonne fonction. J'ai regardé sur le site mais y a tellement de trucs.

**le Ven Nov 06, 2009 8:26**

Le code jquery, tu dois le mettre dans un document.ready:

Dans ton <head> après l'include jquery et jquery corners:

Code: Tout sélectionner: <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $('.demo').corner(); }); //]]> </script>

**le Ven Nov 06, 2009 9:40**

en css3 hhttp://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html

CSS : 3 div empilé MAIS espace entre eux sous IE ?

CSS : 3 div empilé MAIS espace entre eux sous IE ?

Re: CSS : 3 div empilé MAIS espace entre eux sous IE ?

Re: CSS : 3 div empilé MAIS espace entre eux sous IE ?

Re: CSS : 3 div empilé MAIS espace entre eux sous IE ?

Re: CSS : 3 div empilé MAIS espace entre eux sous IE ?

Re: CSS : 3 div empilé MAIS espace entre eux sous IE ?

Re: CSS : 3 div empilé MAIS espace entre eux sous IE ?

Re: CSS : 3 div empilé MAIS espace entre eux sous IE ?

Lectures recommandées sur ce thème :

Qui est en ligne