28234 sujets

CSS et mise en forme, CSS3

Div bloquer a 100%=plus de float sous IE

Bonjour, voilà j'ai un petit problème de css sous IE. La page qui me pause problème est http://postit.petitchevalroux.net. Je ne veux pas fixer de taille de mes div car elle sont flottantes et je trouve l'effet de désordre plutot sympas sous firefox. Par contre depuis que j'ai rajouter des span pour faire les coins arrondis, IE se borne a les afficher en 100%, donc plus de float.
les spans posant problèmes (.corner-top, .corner-left, .corner-bottom) ont pour css et se trouve a l'intérieur des div flottantes(.postit)

div.postit {
	float:left;
	border:2px solid #666666;
	margin-right:10px;
	margin-top:5px;	
}
.corner-top, .corner-left, .corner-bottom {
  background-repeat:no-repeat;
  display:block;
  position:relative;
  font-size:0;
  margin:0;
  height:10px;
}
.corner-top {
  background-position:100% 0;
  width:auto;
  top:-2px;
  right:-2px;
}
.corner-top .corner-left {
  background-position:0 -20px;
  width:10px;
  left:-4px;
}
.corner-bottom {
  background-position:100% -10px;
  clear:both;
  width:auto;
  bottom:-2px;
  right:-2px;
}
.corner-bottom .corner-left {
  background-position:0 -30px;
  width:10px;
  left:-4px;
}
.corner-bottom, .corner-left, .corner-top {
 background-image:url(./images/corner.png);
}

Merci d'avance de votre aide..
Houlà je bosse sur ce bug, mais j'ai du mal à le cerner. Là j'ai une piste, donc la suite un peu plus tard.
Merci bien mpop Smiley cligne . Je pense que le problème vient essentiellement du fait que internet explorer affiche tous les éléments de type blocke en 100% par défaut donc mes petit span qui sont en display block. Voilà un peu plus de précision
Modifié par petitchevalroux (21 May 2006 - 18:09)
petitchevalroux a écrit :
Merci bien mpop Smiley cligne . Je pense que le problème vient essentiellement du fait que internet explorer affiche tous les éléments de type blocke en 100% par défaut donc mes petit span qui sont en display block. Voilà un peu plus de précision


Et hop, voilà une page de test bien épurée. Le problème se produit avec des éléments en type d'affichage block et dotés de layout, lorsqu'ils se situent à l'intérieur d'un conteneur flottant ou positionné en absolu.

Avec des flottants :
Largeur anarchique avec IE – flottants

En absolu :
Largeur anarchique avec IE – positionnement absolu

À regarder avec IE et un autre navigateur, pour comparer.

C'est donc un problème de HasLayout.
Cf Laurent Denis : http://www.test.blog-and-blues.org/haslayout/
Mais je n'ai pas vu ce bug-là référencé sur les pages de Laurent Denis…

Si quelqu'un a une solution, je suis preneur !
Modifié par mpop (30 Jun 2006 - 22:17)
Salut la foule

Et comme sous IE 7 (Beta), les problèmes de HasLayout ne sont pas résolus, Smiley decu

Ont va encore s’amuser longtemps Smiley bawling

A+
gege71 a écrit :
On va encore s’amuser longtemps Smiley bawling

Bah, quand on a acquis une compétence en débugage de HasLayout, ça serait bête de la rendre inutile, non ? Smiley lol
Pour mpop

Vu comme ca ! Smiley ravi

Mais je me suis mis a rêvé que tous les navigateur utilisait le même standard, pouvoir faire un site fonctionnelle partout sans avoir a lancer 10 navigateur différent le tout sur 3 ordi, et encore que se passe t’il sous Mac (j’en n’ai pas) ?

! soupir Smiley decu

A+
gege71 a écrit :
Mais je me suis mis a rêvé que tous les navigateur utilisait le même standard, pouvoir faire un site fonctionnelle partout sans avoir a lancer 10 navigateur différent le tout sur 3 ordi, et encore que se passe t’il sous Mac (j’en n’ai pas) ?

Globalement, le paysage qui se dessine, c'est une floppée de navigateurs quand même vachement compatibles entre eux (les navigateurs utilisant Gecko, Safari, Konqueror, Opera…), et un seul navigateur à la traîne. Du coup, on code standard, et ensuite on s'arrange pour IE. Avec l'expérience, on apprend à utiliser les 70% des standards qui passeront sous IE Win 5.5+ et sous les autres navigateurs. Quelque part, on cherche le plus petit dénominateur commun (adieu la transparence graduelle du PNG, adieu les sélecteurs CSS avancés…), et on s'en sort pas trop mal.

Je trouve beaucoup plus sain l'attitude qui consiste à se contenter du plus petit dénominateur commun (n'est-ce pas aussi cela, un standard ?), plutôt que de coder standards + hacks pour IE.
Par contre il m'arrive parfois, en connaissance de cause, d'utiliser certaines choses non supportées par IE, en sachant que ça me donnera quelque chose qui se dégradera bien. Je construit mes autoroutes pour tous, avec une vitesse idéale à 130km/h. Si les conducteurs préfèrent le solex IE, je m'arrange pour qu'ils puissent rouler à 30 km/h sur la même voie que les autres. C'est-y pas beau ?

Pour Mac OS X, avec Safari et Firefox, ça va quand même plutôt bien. Le seul problème, c'est le parc installé avec IE Mac 5.3, qui pose un certain nombre de problèmes. Heureusement, il est appelé à disparaître, puisque Microsoft ne distribue plus IE pour Mac depuis fin 2005. Si seulement ils l'avaient fait un ou deux ans plus tôt… mais bon, c'est bien parti.


Bon alors, personne n'a de fix pour ce bug ?
Faut tout faire soi-même sur ce forum ? Smiley bawling
Bon toujour personne pour mon problème que l'on va re-baptiser de layout.
Bon c'est deja une bonne chose de mettre un nom sur cette chose bizarre. On avance, on avance on avance... C'est une évidence ....
petitchevalroux a écrit :
Bon toujour personne pour mon problème que l'on va re-baptiser de layout.
Bon c'est deja une bonne chose de mettre un nom sur cette chose bizarre. On avance, on avance on avance... C'est une évidence ....

Tu auras remarqué qu'il y a des cas où le problème ne se pose pas. Si le bloc (ou élément de type en-ligne en display:block) n'a pas de largeur fixe, par exemple.
Préciser une largeur de 100% ne devrait pas être nécessaire. Reste le problème de la hauteur, que l'on peut peut-être bidouiller avec une hauteur de ligne, par exemple.

Sinon, pourquoi ne pas tout simplement faire des bords arrondis avec des images de fond ?
Cf :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html

(Une version simplifiée de la page fluide, par exemple…)
Sujet clos
Aller à