28218 sujets

CSS et mise en forme, CSS3

[bug css] Internet explorer ... c'est vraiment pourris ...

Bonjour,

Voici un code ultra simpliste qui bug sous IE :


<style>
.gros_carre
{
background-color: blue;
height: 60px;
width: 60px;
}
.petit_carre
{
background-color: black;
height: 5px;
width: 5px;
}
</style>


Et les 2 lignes d'HTML qui vont avec :


<div class="gros_carre">
<div class="petit_carre"></div></div>


Voila ce qui apparais sur un vrai browser :

upload/4462-1.jpg

Et voila ce qu'affiche ce machin nommé IE :

upload/4462-2.jpg

Au lieu que le petit carré noir soit de taille 3x3 px il est alongé en hauteur , noté que ce bug disparait à partir de 15x15px Smiley eek ( je vois pas le rapport ??? mais bon ..... )

Plus qu'une solution , j'aimerais surtout comprendre ........ Smiley bawling

J'en ais tellement marre de ce "navigateur" à la con , seul un webmaster peut imaginer à quel point .... Smiley fache
Modifié par stel (13 Apr 2006 - 04:37)
Exact, si tu essais avec ce code :


#petitacrré {
width : 3px;
height : 3px;
background-image : url(images/petitcarenoir.gif);
background-repeat : no-repeat;
background-color : #ffffff;


Tu verras qu'en dessous de l'image, il y aura un espace de la couleur du background-color. C'est en effet parce que IE étant le claque à la hauteur du texte au minimum.
Bonjour,

Tout d'abord merci à tous d'avoir répondus .

Alors ... c'est peut être parce que j'ais pas dormis lol , mais j'ais bien lus l'article en question Raphael (http://forum.alsacreations.com/faq/#item58) le paragraphe intitulé "Espaces indésirables sous les images et hauteur minimale sous IE" , et malgres que j'ais appris quelque chose au passage Smiley langue Smiley smile , cela ne m'aide pas beaucoup dans le cas présent car je n'utilise absolument pas d'image . Le petit_carre est juste un background-color: black;

Comme précisé dans le code plus haut je n'ais pas non plus précise le padding ( qui pose souvent problème avec IE ) , ca me fait un peu halucinner ce problème ..... comment se compliquer la vie avec un truc simple oO

papyjo > mon doctype est : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

La page entiere est :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
.gros_carre
{
background-color: blue;
height: 60px;
width: 60px;
}
.petit_carre
{
background-color: black;
height: 5px;
width: 5px;
}
</style>
</head>
<body>
<div class="gros_carre">
<div class="petit_carre"></div>
</div>
</body>
</html>

Modifié par stel (13 Apr 2006 - 10:22)
Bonjour,

Peux-tu modifer ton titre pour un libellé plus évocateur : en l'état, il ne sera pas exploitable pour une recherche future.

A la fin de l'item, il est précisé la chose suivante :

a écrit :

Hauteur minimale des éléments sous IE :

Note : de façon générale, Internet Explorer affecte une hauteur minimale aux éléments.
Cette hauteur est celle de la taille du texte par défaut, la hauteur de ligne "line-height" pour être précis (aux alentours de 13-20px si rien n'est spécifié)
En clair, si la taille de texte par défaut est supérieure à la hauteur d'un élément, cet élément sera "forcé" à avoir cette hauteur minimale.

Les solutions évoquées ci-dessous règlent également ce problème.

Liens complémentaires

* http://incongru.webdynamit.net/EspaceSousLesImages
* http://forum.alsacreations.com/topic-4-9631-1-Hauteur-minimale.html


Smiley cligne
Modifié par Vero (13 Apr 2006 - 10:43)
Salut,

Ajoute overflow:hidden; à .petit_carre

Sinon avec ce DOCTYPE, IE 6 (et supérieur) travaille en Quirks mode. Pour être en mode standard : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Sujet clos
Aller à