28220 sujets

CSS et mise en forme, CSS3

Rien de tel qu'une illustration pour vous montrer mon pb (sous IE uniquement...bien sûr...ok sous FF):

http://ziad270.free.fr/publicshow/listecss/Liste.png

Vous pouvez trouver l'exemple ici (code simpliste...et lisible)

La css est cssliste.css

Je suis preneur de tout avis...j'ai testé de nombreux Smiley sweatdrop trucs sans succès...Les
toto<BR/>
dans la partie gauche c'est juste pour illustrer que le décrochage dépend de ma barre à gauche.

Ziad O'Hanlon
Modifié par ziad270 (22 Jun 2005 - 17:40)
zia270 a écrit :

(sous IE uniquement...bien sûr...ok sous FF):


a t'entendre on dirait que FF est parfait etc... faut arreter d'y croire c'est loin d'etre vrai Smiley cligne


Tout d'abord pourquoi utiliser un DTD Transitional pour du HTML4 il vaut quand meme mieux une DTD Strict

je sais pas si c'est obligatoire en HTML4 mais il vaut mieux ecrire tous les tags en minuscule et entourer tout les attributs de double quote " pour les id et class mieux vaut eviter les - généralement les caractères alphanumerique suffisent au pire il y a le _ si t'en as vraiment besoin ...

Pour revenir à ton problème a mon avis c'est une marge par défaut de ta side bar, ce que tu peux faire pour plus avoir de difference c'est mettre

 
* {margin:0; padding:0}


comme ca t'auras plus de marge par défaut pour tout le monde, et il te restera plus qu'a mettre celle que tu veux Smiley cligne
CyrilCS a écrit :

Tout d'abord pourquoi utiliser un DTD Transitional pour du HTML4 il vaut quand meme mieux une DTD Strict


ha bon ? pourquoi ? stp ! Smiley smile
Modifié par dominique (22 Jun 2005 - 15:53)
CyrilCS a écrit :


a t'entendre on dirait que FF est parfait etc... faut arreter d'y croire c'est loin d'etre vrai Smiley cligne


Sans doute Cyril...mais chaque fois que je veux faire un truc...(suis assez débutant)..bizarrement ca fonctionne comme ca doit sous Firefox..et je me bats des heures pour avoir le truc ok sous IE...
Je ne dis pas qu'il est parfait... je n'ai pas les connaissances pour.

CyrilCS a écrit :

Tout d'abord pourquoi utiliser un DTD Transitional pour du HTML4 il vaut quand meme mieux une DTD Strict


Parce qu'en fait la page de test que tu vois est une page plus complexe que j'ai complètement épurée/modifié pour essayer d'isoler l'erreur...et je n'ai pas modifié le doctype pour l'exemple.
Et pour tout te dire...je ne sais plus pourquoi j'avais choisi le transitionnal en lisant openweb.eu.org mais c'est ce qui semblait convenir le mieux à ce que je faisais.

CyrilCS a écrit :

je sais pas si c'est obligatoire en HTML4 mais il vaut mieux ecrire tous les tags en minuscule et entourer tout les attributs de double quote " pour les id et class mieux vaut eviter les - généralement les caractères alphanumerique suffisent au pire il y a le _ si t'en as vraiment besoin ...

Bah...pareil...("enregistrer sous" depuis IE qui m'a modifié la casse de mes tags... (Les - ...c'est qu'a l'origine j'ai appris avec Sinorca2 (le design opensource de Harran sur OSWD.org...il en utilise plein)
mais bon...elle est validée par HTML tidy.

Sinon j'ai testé cela:

 
* {margin:0; padding:0}


et aussi celà:
 
#side-bar {margin:0; padding:0}


Sans succès:
Voir ici.
...
Merci pour la réponse.
Ziad
Modifié par ziad270 (22 Jun 2005 - 16:22)
dominique a écrit :


ha bon ? pourquoi ? stp ! Smiley smile


Car j'aime pas HTML4.01 TR Smiley cligne

plus serieusement un peu de rigueur dans le code HTML ne fait pas de mal, et si le site est tout neuf comme ca avait l'air d'etre le cas, mieux vaut partir sur une DTD strict Smiley smile

ziad270 a écrit :

Sans doute Cyril...mais chaque fois que je veux faire un truc...(suis assez débutant)..bizarrement ca fonctionne comme ca doit sous Firefox..et je me bats des heures pour avoir le truc ok sous IE...
Je ne dis pas qu'il est parfait... je n'ai pas les connaissances pour.


j'ai eu aussi le meme reflexe à mes debuts, je criais de partout que IE c'etait nul & co mais il faut quand meme faire avec Smiley smile
on entend souvent ce discours dis par des etudiants, généralement eux leur site ils le font conforme bien jolis etc... et si c'est pas beau sur IE "c'est pas grave" effectivement eux n'ont "rien à vendre" quand on travaille sur des sites un peu plus complexes avec beaucoup de monde, que IE correspond à 80% du traffic on commence à voir les choses differements Smiley cligne

Moi, personnelement je suis toujours etudiant, il y a de ca 6 mois, je disais la meme chose que toi, depuis j'ai participé à la creation de trés gros sites (400 000 pages vues/jour) www.codes-sources.com et aussi discuté avec des professionels du web (la société wygwam) et depuis mon avis a bien changé Smiley smile



* {margin:0; padding:0; border:0 none;}
HTML {
	HEIGHT: 100%
}
BODY {
background-color:purple;
HEIGHT: 100%
FONT: 71%/1.5 verdana, arial, helvetica, sans-serif; 
}
#side-bar {
FLOAT: left; 
WIDTH: 5em; 
BACKGROUND-COLOR: rgb(203,210,255)
}

#main-copy {
margin-left:5em;
padding-left:2em;
background-color:yellow;
BORDER: rgb(0,68,148) 1px solid; 
}

#main-copy LI {
background-color:red;
PADDING-BOTTOM: 1.5ex; 
LIST-STYLE-TYPE: none;
}



ca irait mieux ?
CyrilCS a écrit :

je disais la meme chose que toi

Je dis quoi??
Hum...tu me déformes la...Pourquoi je suis en train de poster sur cette board??
Car je suis en train de faire en sorte que "mon" site (qui est pour une entreprise au profil 95% d'audience IE) soit compatible IE.

Ce que je pense: "c'est plus simple de faire un truc comme on le souhaite pour Firefox que pour IE".
Tout le reste...c'est des discussions entre toi et des trucs que d'autre que moi ont dit...et que tu colles à cette simple phrase: "bien sûr ok sous FF"...(qui pour moi ne découle que d'un constat...Les grosses prises de têtes que j'ai eu en CSS...c'est pour IE...pas pour FF...la s'arrête cette phrase).

Codes-sources.com je connais bien ...je crois d'ailleurs qu'on doit avoir un langage en commun : CS (vu ton nom non??) Smiley cligne

Bon revenons au pb:
Non ce que tu m'as indiqué ne fonctionne pas.
J'ai fait les modifs...voir l'autre lien que j'ai donné.
Mais pour être sur...j'ai copié collé ton code dans une nouvelle Css...et voila le résultat.
Ne marche pas non plus.
Merci bcp d'y avoir regardé cependant.
Ziad
Modifié par ziad270 (22 Jun 2005 - 16:59)
[mode apparté]

CyrilCS a écrit :
Car j'aime pas HTML4.01 TR Smiley cligne

plus serieusement un peu de rigueur dans le code HTML ne fait pas de mal, et si le site est tout neuf comme ca avait l'air d'etre le cas, mieux vaut partir sur une DTD strict Smiley smile


Plus sérieusement, je t'invite cordialement à exposer ton point de vue dans cet échange Smiley cligne
[/mode apparté]
Salut,

Pour revenir au sujet de ce post, je crois qu'il s'agit d'un bug relatif à Internet explorer il s'agit du "IE Three Pixel Gap".

Voici un article qui expose ce problème et sa résolution.

Je ne pense pas que ca vienne de ton code.

a+
Daweed a écrit :

Pour revenir au sujet de ce post, je crois qu'il s'agit d'un bug relatif à Internet explorer il s'agit du "IE Three Pixel Gap".


Merci bcp ca y ressemble...j'ai essayé le hack..et alors la...ca devient relativement amusant:
AVANT ma modif
APRES modif

Mais je n'ai pas du faire ce qu'il fallait

/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #side-bar {
  margin-right:0px;
  }
 
* html #main-copy LI  {
  height: 1%;
  margin-left: 0px;
  }
 
/* End hide from IE5/mac *


Je vais lire celà en détail car je crois que je suis dans le cas de l'image....donc je n'ai pas apporté la modif correcte...mais vois-tu Cyril je suis ENCORE en train de me prendre la tête avec les CSS pour IE... avec des trucs tordu de chez tordu.
Et je pense que j'emploierai à nouveau la phrase: "Bien sûr Ok sour FF"...on verra...bientot je dirais pê "Bien Sur Ok sous FF et IE7 Smiley ravi "

Je viendrai poster la solution à ce cas particulier du "Three Pixel Gap" si c'est bien celà et si je la trouve

Merci encore Daweed

Ziad
Modifié par ziad270 (22 Jun 2005 - 17:16)
Salut Ziad270

J'ai eu le même problème et c'est effectivement le fameux bug des 3 pixels

Regarde ici le post qui m'a permis de le résoudre.
J'espère que cela va pouvoir t'aider ...

Bon courage Smiley cligne
Modifié par GuizBizet (22 Jun 2005 - 17:25)
J'avoue que j'ai peut etre été excessif Smiley cligne

en ce moment on arrete pas de me dire que FF est parfait que IE est null etc... et je commence à exploser Smiley langue (je dis pas non plus que IE est parfait Smiley lol juste que FF l'est pas;) )

Bref, tout ceci ne resoud pas ton problème et apparement c'est un bug connu de IE mais que j'avais encore jamais rencontré ... Smiley confused


Je serais donc interessé par la résolution, et je vais me taire ou alors passer mes nerfs contre ceux qui glorifient FF et insulte IE Smiley smile (je me comprend)

bon courage, et toutes mes ecuses pour cet aparté Smiley confus

PS : pour CS ca veut dire CodeS-SourceS, mon langage de prédiléction reste asp.net Smiley smile
GuizBizet a écrit :
Salut Ziad270

J'ai eu le même problème et c'est effectivement le fameux bug des 3 pixels

Regarde ici le post qui m'a permis de le résoudre.
J'espère que cela va pouvoir t'aider ...

Bon courage Smiley cligne


MERCI Guizbizet !!!
C'est résolu en donnant une hauteur à mon Main-Copy:




* {margin:0; padding:0; border:0 none;}
HTML {
HEIGHT: 100%
}
BODY {
background-color:purple;
HEIGHT: 100%
FONT: 71%/1.5 verdana, arial, helvetica, sans-serif;
}
#side-bar {
FLOAT: left;
WIDTH: 5em;
BACKGROUND-COLOR: rgb(203,210,255)
}

#main-copy {
height: 6em;
margin-left:5em;
padding-left:2em;
background-color:yellow;
BORDER: rgb(0,68,148) 1px solid;
}

#main-copy LI {
background-color:red;
PADDING-BOTTOM: 1.5ex;
LIST-STYLE-TYPE: none;
}



Tout tient dans le
#main-copy {
height: 6em;}


Aberrant ceci-dit...
exemple résolu :ici

Ziad
Modifié par ziad270 (22 Jun 2005 - 17:41)