Bonjour,
J'utilise trois CSS.
La première sert à réinitialiser les valeurs (comme ça je n'utilise pas les CSS par défaut des navigateurs). Cette feuille contient fieldset { border: 0; }.
Une seconde qui sert à définir les style de base, l'objectif est simplement d'améliorer la lisibilité (style globaux). Dans celle ci, j'ai mis fieldset { border: 1; border:#FF9900 solid 2px; }. Pour tester sur IE.
Mais il s'avère que les bnordures de fieldset n'apparaissent pas sous IE.
Pourtant dans le HTML j'ai fais ceci (et dans cette ordre)
et voici mes CSS.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 <link rel="stylesheet" href="./stylesheet/default.css" type="text/css" /> <link rel="stylesheet" href="./stylesheet/common.css" type="text/css" />
Tout d'abord la première
et la seconde
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132 * { margin: 0; padding: 0; } html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; background-repeat: no-repeat; } /** * CSS to redifine browser default stylesheet * DO NOT EDIT */ body { line-height: 1; font-family: "Times New Roman", serif; color: #000000; font-size: 100%; background-color: #FFFFFF; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 { font-size:2em; } h2 { font-size:1.5em; } h3 { font-size:1em; font-weight:bold; } small { font-size:0.75em; } ol, ul { list-style: none; list-style-type: none; } blockquote, q { quotes: none; } img { border:0; } span { display: block; margin-top: 0.8em; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } sup { position:relative; bottom:0.25em; vertical-align:baseline; } sub { position:relative; bottom:-0.25em; vertical-align:baseline; } acronym, abbr { cursor:help; letter-spacing:1px; border-bottom:1px dashed; } /***** Links *****/ a, a:link, a:visited, a:hover { text-decoration:underline; } form { margin:0; padding: 0; padding:0; display:inline; } input, select, textarea { font:1em Arial, Helvetica, sans-serif; } textarea { width:100%; line-height:1.25; } p { display: inline; }
PS : Elles sont valides et fonctionnels sous FF
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115 .clear { clear:both; } .float-left { float:left; } .float-right { float:right; } .text-left { text-align:left; } .text-right { text-align:right; } .text-center { text-align:center; } .text-justify { text-align:justify; } .bold { font-weight:bold; } .italic { font-style:italic; } .underline { border-bottom:1px solid; } .highlight { background:#FFCFFC; } .wrap { width:960px; margin:0 auto; } label { cursor: pointer; } /** image styles */ img { padding-top: 2%; padding-bottom: 2%; } label img { margin: 0; padding: 0; } img.right { float:right; } img.left { float:left; } img.center { position: relative; left: 25%; } .nopadding { padding:0; } .noindent { margin-left:0;padding-left:0; } .nobullet { list-style:none;list-style-image:none; } .indented { margin-left: 8%; } input[type=radio] { background-color: blue; } .warning { font-weight: bolder; color: #FF0000; } /** All <fieldset> in <form> or not, and for all <div>, in the part of the web page to write */ div.body div.content fieldset, div.body div.content form fieldset, div.body div.content div { position: relative; line-height: 1.6em; height: 100%; } /** All <label> in <fieldset> (which is in a form or not, web put in a the left of the container, because in french we read from left to right => I've to evolve for english person ;) */ div.body div.content fieldset label, div.body div.content form fieldset label { float: left; } /** All <fieldset> that contain a <input> text next to a label */ div.content fieldset label + input[type=text], div.body div.content form fieldset div label + p input[type=checkbox], label + select, div.content fieldset div p.indented, div.body div.content form fieldset div label + p input[type=text], div.body div.content div label + p input[type=text], div.body div.content div label + p select, div.body div.content div label + p input[type=radio] { float: right; margin-top: -1.5em; margin-bottom: 0.5em; clear: both; } /*div.body div.content div label + p select, div.body div.content div label + p input[type=radio] { margin:0; vertical-align:middle; }*/ label + input[type=text].number { width: 4em; } div.content form.first-step { position: relative; left: 35%; } div.content form.first-step label + p { float: right; margin-right: 74%; margin-top: -2.8em; } div.content form.first-step div /** Enlarge the first step form */ { line-height: 3em; } div.important { margin-bottom: 2em; margin-top: 2em; } div.spaced { margin-bottom: 4em; } input[type=text].days { width: 4em; }
PSS : Si vous voyez des améliorations à y faire n'hésitez pas
Partager