28220 sujets

CSS et mise en forme, CSS3

Problème de débordement ?

Bonjour à tous,

J'ai trouvé un script sympa pour pour faire des onglets en html.
Cependant, l'affichage des onglets plante quand j'enlève 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
de la page et seulement sous IE. Je dois absolument arriver à corriger ce bug d'affichage pour que les onglets s'affichent correctement sous IE et cela sans mettre de doctype (et oui c'est comme ça).
Voici les exemples en images :
Affichage sous IE avec le doctype
http://www.lifematon.info/divers/ok.jpg
voir démo
Affichage sous IE sans le doctype
http://www.lifematon.info/divers/bug.jpg
voir démo

Voici le CSS :

	.dhtmlgoodies_tabPane{
		height:21px;	/* Height of tabs */
		border-bottom:1px solid #919b9c;
	}
	.dhtmlgoodies_aTab{
		border-left:1px solid #919b9c;
		border-right:1px solid #919b9c;
		border-bottom:1px solid #919b9c;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		padding:5px;		
		
	}
	.dhtmlgoodies_tabPane DIV{
		float:left;
		height:100%;	/* Height of tabs */
		padding-left:3px;
		vertical-align:middle;
		background-repeat:no-repeat;
		background-position:bottom left;
		cursor:pointer;
		position:relative;
		bottom:-1px;
		margin-left:0px;
		margin-right:0px;
	}
	.dhtmlgoodies_tabPane .tabActive{
		background-image:url('../images/tab_left_active.gif');
		margin-left:0px;
		margin-right:0px;	
		z-index:10;	
	}
	.dhtmlgoodies_tabPane .tabInactive{
		background-image:url('../images/tab_left_inactive.gif');
		margin-left:0px;
		margin-right:0px;
		z-index:1;
	}

	.dhtmlgoodies_tabPane .inactiveTabOver{
		background-image:url('../images/tab_left_over.gif');
		margin-left:0px;
		margin-right:0px;
	}
	.dhtmlgoodies_tabPane span{
		font-family:arial;
		vertical-align:top;
		font-size:11px;
		padding-left:3px;
		padding-right:3px;		
		line-height:21px;
		float:left;
	}
	.dhtmlgoodies_tabPane .tabActive span{
		padding-bottom:1px;
		line-height:20px;
	}
	
	.dhtmlgoodies_tabPane img{
		float:left;
	}



J'espère que quelqu'un pourra m'éclairer sur les modifications à effectuer dans les CSS afin que l'affichage fonctionne correctement sous IE sans le doctype.
Merci d'avance pour vos réponses.
Modifié par chaps (03 Aug 2006 - 09:57)
Bonjour,

chaps a écrit :
J'ai trouvé un script sympa pour pour faire des onglets en html.


Malheureusement, ce script n'est pas si "sympa" que cela :
- contenu anonyme non structuré (les en-têtes d'onglets et le reste sont des divs)
- pas d'alternative sans javascript (pseudos-liens js)
- pas de contenu réellement ordonné et cohérent sans CSS (en-têtes séparés des contenus).

Il serait préférable de chercher une autre solution pour réaliser ces onglets Smiley cligne
Modifié par Laurent Denis (03 Aug 2006 - 10:13)
Laurent Denis a écrit :
Bonjour,



Malheureusement, ce script n'est pas si "sympa" que cela :
- contenu anonyme non structuré (les en-têtes d'onglets et le reste sont des divs)
- pas d'alternative sans javascript (pseudos-liens js)
- pas de contenu réellement ordonné et cohérent sans CSS (en-têtes séparés des contenus).

Il serait préférable de chercher une autre solution pour réaliser ces onglets Smiley cligne

Je comprends mais
1 / je prends ce script car il fonctionne bien que j'en ai besoins rapidement.
2 / c'est pour un intranet et sur le cahier des charges client le navigateur utilisé est IE avec javascript activé. Donc si il n'y a pas d'alternative à js, ce n'est pas grave.
...
Modifié par chaps (03 Aug 2006 - 10:30)
Et le cahier des charges précise également qu'il faut travailler en mode Quircks, sans déclaration de type de document ? Pourquoi n'est-il pas possible d'utiliser un doctype ?
mpop a écrit :
Et le cahier des charges précise également qu'il faut travailler en mode Quircks, sans déclaration de type de document ? Pourquoi n'est-il pas possible d'utiliser un doctype ?

Parce que la page dans laquelle sera inclut les onglets n'est pas standard donc si je mets ce doctype l'affichage plante; donc je ne mets pas de doctype car nous n'avons pas le temps de refaire tout l'affichage conforme aux standards....
As-tu testé en modifiant la valeur de var strictDocType dans ton script ?

Si IE6 est en mode Quirks, cette valeur devrait logiquement être fixée à false.

Je n'ai pas regardé beaucoup plus avant, mais elle sert manifestement à adapter les styles de l'image droite de l'onglet en fonction du mode d'IE (if((navigatorVersion && navigatorVersion<6) || (MSIE && !strictDocType)){...)

<edit>Après vérification, c'est bien ça</>
Modifié par Laurent Denis (03 Aug 2006 - 14:10)
Laurent Denis a écrit :
As-tu testé en modifiant la valeur de var strictDocType dans ton script ?

Si IE6 est en mode Quirks, cette valeur devrait logiquement être fixée à false.

Je n'ai pas regardé beaucoup plus avant, mais elle sert manifestement à adapter les styles de l'image droite de l'onglet en fonction du mode d'IE (if((navigatorVersion && navigatorVersion<6) || (MSIE && !strictDocType)){...)

<edit>Après vérification, c'est bien ça</>

Méa culpa je ne l'avais pas vu....
De toute façon je viens de refaire les onglets avec des listes.
Merci @+
et vous venez de me décider à apprendre plus en profondeur les standards, c'est déjà ça de gagné !
Sujet clos
Aller à