28118 sujets

CSS et mise en forme, CSS3

[résolu... mais...]Bugs d'internet explorer (float et ... divers)

Pages :
Je faisais le passage d'un site version "mise en page tableaux" à "mise en page CSS", bon 1er point, j'ai divisé l'ensemble du poid de la page par 10 (images, html, css confondu).

Version tableau :
http://www.elmoustikoblog.net/divers/bug/table/
Version CSS :
http://www.elmoustikoblog.net/divers/bug/
Bon ça c'est pour les bonnes nouvelles.

Par contre, j'ai 2 bugs d'IE totalement incompréhensible, je sèche totalement là Smiley sweatdrop

Donc 1er bug, si je met pas une ligne de commentaire au dessus du doctype, IE fait du n'importe quoi avec le menu :
http://www.elmoustikoblog.net/divers/bug/bugs/bug1_sans_commentaire.html
http://www.elmoustikoblog.net/divers/bug/bugs/style.css
Il semble passer en mode Quirks, mais pourquoi ? avez vous une idée ? une solution (pas de hack si possible)
Juste en ajoutant une ligne de commentaire ça règle le problème c'est ça le pire.

2eme bug, clear: both; sur les titres <h2> pour que mon image flottante ne couvre pas les titres en dessous.
Firefox aucun problème ça roule, mais sous IE, tout le texte au dessus disparait Smiley confus
http://www.elmoustikoblog.net/divers/bug/bugs/bug2_clear_sur_titre.html
http://www.elmoustikoblog.net/divers/bug/bugs/style2.css
Si je met un <hr /> avant mon titre et que je met le clear (ou non) idem...

Voilà, je suis un peu perplexe sur ce coup là quand même...
Modifié le 28 Nov 2004 - 01:52
Pour le bug 1, même si ça peut paraître hors de propos, essaye un overflow: hidden; soit dans ton <ul> ou <li>...
En effet ça m'a paru hors de propos, mais tu semblais avoir une idée derriere la tete, j'ai donc testé, mais non rien...

-edit-

Ahh si pardon, je l'avais mis sur le <ul> simplement, mais sur le <li> ça fait un truc.

En fait, je pense que c'est un bordel dû au fait que j'ai padding-top+height, je vais donc faire un hack pour régler le problème (je ne pense pas avoir le choix).
Enfin si quelqu'un à une solution plus propre... (je testerais demain, là je suis claqué Smiley cligne )
Modifié le 28 Nov 2004 - 01:11

ul#menu li
{
	width: 275px ;
	height: 30px ;
	border-bottom: 1px solid #b3c098 ;
	overflow: hidden ;
}


et ....

ul#menu li
{
	width: 275px ;
	height: 30px ;
	border-bottom: 1px solid #b3c098 ;
	overflow: hidden ;
}

li#accueil { background: url(design/accueil.png) no-repeat 135px top ; }
li#portfolio { background: url(design/portfolio.png) no-repeat 125px top  ; }
li#services { background: url(design/services.png) no-repeat 135px top  ; }
li#contact { background: url(design/contact.png) no-repeat 138px top  ; }


/* Commented Backslash Hack
hides rule from IE5-Mac \*/ 
ul#menu li { overflow: hidden; } 
/*/ 
/* End IE5-Mac hack */

Modifié le 28 Nov 2004 - 01:16
Bon, j'ai joué sur le padding et le height avec le hack :


/* Commented Backslash Hack

hides rule from IE5-Mac \*/ 

ul#menu li a { height: 12px ; } 

/*/ 

/* End IE5-Mac hack */


Ca marche impec, mais j'ai pas d'IE5-mac sous la main pour confirmer :s

http://www.elmoustikoblog.net/divers/bug/

Tu peux actualiser pour me confirmer ? s'il te plait.

Sinon, t'as une idée de l'origine du bug ? parceque juste en ajoutant/retirant un commentaire avant le doctype ça modifie du tout au tout Smiley sweatdrop
Impec sous firefox et IE.

J'ai pas de mac sous la main non-plus mais j'ai déjà fait face à ce problème.

<edit>

Après avoir longuement tricoté sur les deux plate-formes et différents navigateurs, j'en suis venu à la solution ci-haut.

</edit>
Modifié le 28 Nov 2004 - 01:37
OKay, donc à priori c'est bon, donc je met résolu, mais j'attendrais tout de même confirmation d'un IE5-Mac user au cas où !
Et pis si quelqu'un à une réponse (parceque les hack, j'aime pas trop !! ) pour le pourquoi du coment de la chose !
PS : Il n'y a pas de hack dans ma solution, juste une règle cachée à IE mac !

<edit>

bah ! Peut-être juste un ptit hack ! Smiley lol

</edit>
Modifié le 28 Nov 2004 - 01:33
Sous IE Mac:

Bah non Smiley sweatdrop

On dirait qu'il ne prends pas en compte le style CSS. Aucune mise en forme. Remplace donc voir :
<style type="text/css" media="screen" title="Style par défaut">
@import url(style.css) ;
</style>


Par un simple :
<link rel="stylesheet" media="screen" type="text/css" title="Style par défaut" href="style.css" />


Je te redirai si ça fonctionne.
@Nyro Xeo

ElMoustiko veut cacher sa feuille de style au vieux navigateurs, c'est pourquoi il utilise @import.

Je ne comprend pas que tu ne puisses voir le CSS.
Enfin on peut considérer qu'IE-5Mac est un vieux navigateur vu comment il est pourri MDR !!!!!!!

Enfin ça m'embete quand même, parcequ'il n'y a que avec @import que les styles alternatifs marchent comme il faut (avec <link> en utilisant le menu firefox pour switcher sur un style alternatif il subsiste des résidut du style par défaut, alors qu'avec @import non).
Si IE 5 Mac prend en compte @import (c'est bien ce que je pensais Smiley cligne ) pourquoi nyro xero ne voit-il aucun style ???

-edit- en regardant le tableau, on voit qu'avec des guillemets simple IE5-Mac ne prend plus en compte @import, mais moi j'en ai pas mis... pfffiiou
Modifié le 28 Nov 2004 - 01:45
Pages :
Sujet clos
Aller à