CSS Séparateur dynamique

Version imprimable

Bonjour,

J'essaie actuellement de faire un petit popup dynamique, qui s'étend avec le titre, et je cherche a faire un séparateur de la largeur du popup.
Chose faite sous FF, marche nickel... alors quoi me direz vous ? Et bien IE bien sûr !

Sous IE, pas de séparateur. Si quelqu'un pouvait m'aider, merci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
 
	<head>
		<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
		<script type="text/javascript" src="functions.js" ></script>
	</head>
 
	<body>
 
		<div class="div1" >
 
			<div class="div2" >
				<h3>
					<div class="tableauInvisible">
						<span id="menuTitle">
							Popup Title
						</span>
						<span>
							<a><img style="padding-left:10px" src="close.png"></a>
						</span>
					</div>
				</h3>
				<ul>
					<li id="viewMode" >Menu1</li>
					<li id="editMode" >Menu 2</li>
					<hr id="separator" ></hr>
					<li id="editMode" >Menu3...</li>
				</ul>
			</div>
 
		</div>
 
	</body>
 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
h3 {
	font-size: 10px;
	background-color: #6600CC;
	border-top:1px solid #564b47;
	border-bottom:1px solid #564b47;
	padding: 3px 3px 3px 3px;
	margin:0px;
	color: black;
}
 
h3 label {
	float: left;
	text-transform: none;
	color: #000000;
}
 
h3 img {
	padding-left: 10px;
	width: 10px;
}
 
.tableauInvisible table, .tableauInvisible tr, .tableauInvisible td, .tableauInvisible caption {
	width:100%;
	min-width: 30px;
	border-color:white;
	border-style:none;
	border-width:0px;
	background:none;
	font-size: 90%;
}
 
.div1{
	padding: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
}
 
.div2{
	position: absolute;
	width: auto;
	border: 1px solid black;
	background: #6666CC;
	font-size: 9px;
	font-family: Verdana,Arial,SunSans-Regular,Sans-Serif;
	text-align: left;
	color: white;
}
 
.div2 ul li{
	width:auto;
	padding: 3px 3px 3px 3px;
	height:10px;
}
 
.div2 li:hover{
	color:black;
}
 
dl, dt, dd, ul, li, hr {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
 
 
#separator {
	background-color: black;
	width: auto;
	padding: 0;
	height: 1px;
}
 
#separator:hover {}

J'ai essayé pas mal de trucs, et j'avoue être à court d'idée... ah si tout le monde pouvait être sous FF :roll:
Mais comme c'est loin d'être le cas, je m'en remets à vous.

Merci et bonne journée

EDIT : Pour le close.png mettez n'importe quoi ou virez le, désolé.

10/09/2009, 14h32
Bisûnûrs

Citation:

Envoyé par Fabthebug

ah si tout le monde pouvait être sous FF :roll:

Ah, si tout le monde pouvait coder correctement. :roll:

Plusieurs erreurs dans ton code :

1. L'élément <hr> est un élément auto-fermant, il n'a pas de deuxième balise.
2. Un élément <ul> ne prend comme enfant direct que des <li>, que fait ton <hr> en plein milieu ?
10/09/2009, 15h00
Fabthebug

Citation:

Ah, si tout le monde pouvait coder correctement. :roll:

1. L'élément <hr> est un élément auto-fermant, il n'a pas de deuxième balise.

Hehe, je ne suis pas codeur web habituellement :D

Citation:

2. Un élément <ul> ne prend comme enfant direct que des <li>, que fait ton <hr> en plein milieu ?

C'est un developpeur web qui me l'a conseillé pour remédier au problème, bien que ça ne fonctionne pas :(
10/09/2009, 15h05
Bisûnûrs

Citation:

Envoyé par Fabthebug

C'est un developpeur web qui me l'a conseillé

Un mauvais alors, ou pas consciencieux.

Soit tu mets ton <hr> dans un le <li> précédent, soit tu gères la séparation autrement, en mettant une bordure basse en CSS au <li> précédent par exemple.

Il ne faut pas non plus oublier ce que pourrait être ta page sans CSS. Est-ce une séparation physique du contenu que tu souhaites faire ou une séparation graphique ? Dans le premier cas le <hr> est indiqué (mais une séparation physique du contenu au milieu d'une liste, j'y crois moyen), dans le deuxième cas le mieux est la stylisation en CSS.
10/09/2009, 15h17
Fabthebug
A l'origine j'avais fait ca :
Code:

1 2 3 4 5 6 7 <ul> <li id="viewMode" >Menu1</li> <li id="editMode" >Menu 2</li> <li id="separator" ></li> <li id="editMode" >Menu3...</li> </ul>
Avec un background noir et un height de 1px (je l'ai laisse dans le css). Ca marche impeccablement avec FF mais pas avec IE.
10/09/2009, 15h23
Bisûnûrs

Citation:

Envoyé par Fabthebug

Ca marche impeccablement avec FF mais pas avec IE.

Sur quelle version de IE ? Je ne vois aucun problème personnellement. Mais ce n'est toujours pas la meilleure solution, puisqu'en désactivant la CSS tu as élément de ta liste vide.
10/09/2009, 15h25
Fabthebug

Citation:

Envoyé par Bisûnûrs

Sur quelle version de IE ? Je ne vois aucun problème personnellement. Mais ce n'est toujours pas la meilleure solution, puisqu'en désactivant la CSS tu as élément de ta liste vide.

Je code pour IE7 pour le moment, car il y a encore pas mal de personnes dessus. Ce serait une erreur de les laisser de côté. Je t'invite à utiliser la compatibilité dans le navigateur pour voir le résultat.
10/09/2009, 15h28
Bisûnûrs

Comme je te l'ai dit, je n'ai vu aucun problème. IE7 compris.

Si tu as une page en ligne de ton problème ça sera plus facile. Et n'oublie pas mes recommandations deux posts au-dessus.
10/09/2009, 15h38
Fabthebug

Citation:

Envoyé par Bisûnûrs

Comme je te l'ai dit, je n'ai vu aucun problème. IE7 compris.

Etrange... mon patron aussi a "l'erreur" :lol:

Citation:

Si tu as une page en ligne de ton problème ça sera plus facile. Et n'oublie pas mes recommandations deux posts au-dessus.

Malheureusement, c'est sur un backoffice avec mot de passe, tu comprends donc que je ne peux pas te montrer ce problème en ligne :D . De toute façon en local ça donne la même chose.
Pour ce qui est de mettre une bordure sur l'élément du dessus, impossible car certains menus ne sont pas affichés en fonction des droits.

Bon admettons avec ca :
Code:

1 2 3 4 5 6 7 8 9 <ul> <li id="viewMode" >Menu1</li> <li id="editMode" >Menu 2</li> </ul> <hr id="separator" /> <ul> <li id="editMode" >Menu3...</li> </ul>
Ca a l'air d'être plus propre, mais c'est toujours pareille chez moi.

10/09/2009, 16h34
Bisûnûrs

As-tu essayé de faire un copié/collé du code que tu nous proposes dans une autre page que ton backoffice complet ? Parce que ce code n'a aucun problème, et ce depuis le début.

Donc mon avis c'est que tu as un style (ou autre chose) que tu ne nous montres pas qui vient perturber l'affichage de ta séparation.
10/09/2009, 18h23
Fabthebug

Citation:

Envoyé par Bisûnûrs

As-tu essayé de faire un copié/collé du code que tu nous proposes dans une autre page que ton backoffice complet ? Parce que ce code n'a aucun problème, et ce depuis le début.

Donc mon avis c'est que tu as un style (ou autre chose) que tu ne nous montres pas qui vient perturber l'affichage de ta séparation.

En fait ce code est un sample que j'ai fait à partir du backoffice. Bien sûr que je l'ai testé. C'est même la dessus que j'ai testé pas mal de trucs CSS pour essayer d'obtenir un bon résultat.
Ce code a un problème certain, mais l'émulation IE7 via IE8 est peut être simplement pourrie...
J'ai envoyé mon code à un pote pour qu'il test, si quelqu'un test et que ça ne fonctionne pas, j'aimerais qu'il me le dise que je sois sûr. Si ça n'est que chez moi, et bien tant mieux après tout ! :lol:
11/09/2009, 17h01
rivsc
Bonjour,

Et pourquoi pas ça :
Code:

1 2 3 4 5 6 <ul> <li id="viewMode">Menu1</li> <li id="editMode">Menu 2</li> <li id="separator"><hr /></li> <li id="editMode">Menu3...</li> </ul>
C'est pas très juste d'un point de vue sémantique mais bon...
Sinon entre les <div> et les <span> il faut des <p>...

De même <h3> ne sert pas à "grossir" le texte mais informe d'un titre (balise sémantique).
25/09/2009, 12h36
Fabthebug
Citation:
Envoyé par rivsc

Bonjour,

Et pourquoi pas ça :

Code:

1 2 3 4 5 6 <ul> <li id="viewMode">Menu1</li> <li id="editMode">Menu 2</li> <li id="separator"><hr /></li> <li id="editMode">Menu3...</li> </ul>

C'est pas très juste d'un point de vue sémantique mais bon...
Sinon entre les <div> et les <span> il faut des <p>...

De même <h3> ne sert pas à "grossir" le texte mais informe d'un titre (balise sémantique).
J'ai abandonné l'espoir sur IE 7.... mais un sincère merci pour vos aides rapides.