[CSS]Div te.. smal ? border breekt weg!
Ik heb nu een website die perfect werkt in Firefox, maar aan de linkerkant van de linkse div "breekt" 'ie uit het andere div wat er om heen zit..
Ik heb hier het staan: http://niek.signet.nl
zoals je ziet klopt die lijn niet helemaal
Weet iemand hoe dat komt, en beter, hoe ik het moet oplossen??
MvG,
Niek
Gewijzigd op 01/01/1970 01:00:00 door Lord Niek
jij weet waar het te vinden is
je broncode staat vol crap en is onoverzichtelijk
je css staat in een stylesheet
ik ga niet alles bij mekaar zoeken
Probeer iets met css hacks:
<!--[if ie]>
<![endif]-->
dit is mijn CSS:
Code (php)
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
body {
font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 10px;
text-align: center;
}
.clear {
clear: both;
}
#clear {
clear: both;
}
.zwart {
color: #000;
}
.pinktext {
color: #000;
}
#content {
margin-top: 90px;
margin: auto;
width: 890px;
padding: 5px;
margin-bottom: 10px;
text-align: left;
font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 10px;
}
.top-left, .top-right, .bottom-left, .bottom-right {
background-image: url('images/corners.gif');
height: 9px;
font-size: 2px;
}
.top-left, .bottom-left {
margin-right: 9px;
}
.top-right, .bottom-right {
margin-left: 9px;
margin-top: -9px;
}
.top-right {
background-position: 100% 0;
}
.bottom-left {
background-position: 0 -9px;
}
.bottom-right {
background-position: 100% -9px;
}
.inside {
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #EFEFEF;
color: #000000;
padding-left: 10px;
padding-right:10px;
}
.notopgap { margin-top: 0; }
.nobottomgap { margin-bottom: 0; }
.inside-small {
padding: 1px 3px;
}
.negative-top h2 {
margin: -12px 0 20px 0;
}
.negative-bottom p {
position: relative;
margin: 20px 0 -8px 0;
}
.cornerexample2, .cornerexample3, .cornerexample4, .cornerexample5, .cornerexample6 {
position: relative;
width:60%;
margin: 0 auto;
padding:1em;
text-align:left;
}
.content {
width:60%;
margin: 15px auto;
padding:1em;
background: #ffffff;
color: #000000;
text-align:left;
}
.inside {
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #ffffff;
color: #000000;
padding-left: 10px;
padding-right:10px;
}
h2, p {
margin: 20px 0;
}
.inside2 {
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #ffffff;
color: #000000;
padding-left: 10px;
padding-right:10px;
}
.inside4, .inside5, .inside6 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background: #ffffff;
color: #000000;
padding-left: 10px;
padding-right:10px;
padding-top: 1px;
padding-bottom: 1px;
}
.inside-small {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background: #ffffff;
color: #000000;
padding: 1px 3px;
}
.negative-top h2 {
margin: -12px 0 20px 0;
}
.negative-bottom p {
position: relative;
margin: 20px 0 -8px 0;
}
#leftbox {
width: 160px;
padding: 5px;
float: left;
text-align: left;
}
#contentbox {
margin-left: 175px;
margin-right: 175px;
border-left: 1px dashed #DEA84E;
border-right: 1px dashed #DEA84E;
padding-left: 5px;
padding-right: 5px;
}
#rightbox {
float: right;
width: 160px;
padding: 5px;
text-align: left;
}
#rightbox ul {
list-style-image: url(images/listdot.gif);
padding: 0px;
margin: 0px;
margin-top: 3px;
padding-left: 15px;
}
#leftbox ul {
list-style-image: url(images/listdot.gif);
padding-left: 15px;
}
.column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
.inside-small {
overflow: hidden;
}
font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 10px;
text-align: center;
}
.clear {
clear: both;
}
#clear {
clear: both;
}
.zwart {
color: #000;
}
.pinktext {
color: #000;
}
#content {
margin-top: 90px;
margin: auto;
width: 890px;
padding: 5px;
margin-bottom: 10px;
text-align: left;
font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 10px;
}
.top-left, .top-right, .bottom-left, .bottom-right {
background-image: url('images/corners.gif');
height: 9px;
font-size: 2px;
}
.top-left, .bottom-left {
margin-right: 9px;
}
.top-right, .bottom-right {
margin-left: 9px;
margin-top: -9px;
}
.top-right {
background-position: 100% 0;
}
.bottom-left {
background-position: 0 -9px;
}
.bottom-right {
background-position: 100% -9px;
}
.inside {
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #EFEFEF;
color: #000000;
padding-left: 10px;
padding-right:10px;
}
.notopgap { margin-top: 0; }
.nobottomgap { margin-bottom: 0; }
.inside-small {
padding: 1px 3px;
}
.negative-top h2 {
margin: -12px 0 20px 0;
}
.negative-bottom p {
position: relative;
margin: 20px 0 -8px 0;
}
.cornerexample2, .cornerexample3, .cornerexample4, .cornerexample5, .cornerexample6 {
position: relative;
width:60%;
margin: 0 auto;
padding:1em;
text-align:left;
}
.content {
width:60%;
margin: 15px auto;
padding:1em;
background: #ffffff;
color: #000000;
text-align:left;
}
.inside {
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #ffffff;
color: #000000;
padding-left: 10px;
padding-right:10px;
}
h2, p {
margin: 20px 0;
}
.inside2 {
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #ffffff;
color: #000000;
padding-left: 10px;
padding-right:10px;
}
.inside4, .inside5, .inside6 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background: #ffffff;
color: #000000;
padding-left: 10px;
padding-right:10px;
padding-top: 1px;
padding-bottom: 1px;
}
.inside-small {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background: #ffffff;
color: #000000;
padding: 1px 3px;
}
.negative-top h2 {
margin: -12px 0 20px 0;
}
.negative-bottom p {
position: relative;
margin: 20px 0 -8px 0;
}
#leftbox {
width: 160px;
padding: 5px;
float: left;
text-align: left;
}
#contentbox {
margin-left: 175px;
margin-right: 175px;
border-left: 1px dashed #DEA84E;
border-right: 1px dashed #DEA84E;
padding-left: 5px;
padding-right: 5px;
}
#rightbox {
float: right;
width: 160px;
padding: 5px;
text-align: left;
}
#rightbox ul {
list-style-image: url(images/listdot.gif);
padding: 0px;
margin: 0px;
margin-top: 3px;
padding-left: 15px;
}
#leftbox ul {
list-style-image: url(images/listdot.gif);
padding-left: 15px;
}
.column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
.inside-small {
overflow: hidden;
}
En mijn html is dit (waar het om gaat tenminste):
Code (php)
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="column" id="content">^M
<div class="top-left"></div>^M
<div class="top-right"></div>^M
<div class="inside-small">^M
<div class="gap-saver"></div>^M
<div id="leftbox">^M
<?php mosLoadModules ( 'left', -2 ); ?>^M
</div>^M
<div id="rightbox">^M
<?php mosLoadModules ( 'right', -2 ); ?>^M
</div>^M
<div id="contentbox">^M
<?php if(mosCountModules('top') == 1) { mosLoadModules( 'top' , -2); } ?>
<?php mosMainBody(); ?>^M
</div>^M
<div id="clear"> </div>^M
<div class="gap-saver"></div>^M
</div>^M
<div class="bottom-left"></div>^M
<div class="bottom-right"></div>^M
<div id="footer">^M
footer^M
<br /><hr />^M
</div>^M
</div>^M
<div class="top-left"></div>^M
<div class="top-right"></div>^M
<div class="inside-small">^M
<div class="gap-saver"></div>^M
<div id="leftbox">^M
<?php mosLoadModules ( 'left', -2 ); ?>^M
</div>^M
<div id="rightbox">^M
<?php mosLoadModules ( 'right', -2 ); ?>^M
</div>^M
<div id="contentbox">^M
<?php if(mosCountModules('top') == 1) { mosLoadModules( 'top' , -2); } ?>
<?php mosMainBody(); ?>^M
</div>^M
<div id="clear"> </div>^M
<div class="gap-saver"></div>^M
</div>^M
<div class="bottom-left"></div>^M
<div class="bottom-right"></div>^M
<div id="footer">^M
footer^M
<br /><hr />^M
</div>^M
</div>^M
Gewijzigd op 01/01/1970 01:00:00 door Lord Niek
Wel eens gehoord van het woord: 're-le-vant'?
Kortom; post NIET je hele CSS maar alleen het stukje wat ertoe doet.
En PHPerik, jij hebt zelfs nog "be frendly" in dat balkje onder je naam staan..
Quote:
Ik snap niet dat jullie zo gemeen doen.. Ik vraag alleen een beetje hulp!
Niet alles té serieus nemen joh ;)
Als je nu ff de goede css weergeeft + aangeeft wat nou het probleem is (want ik snap em zo snel nog niet) dan wordt je echt wel geholpen...
Niek schreef op 03.08.2007 16:28:
Jij bent toch de niek die een tijdje geband is en alles? Of ben je iemand anders? Als je iemand anders bent, dan mijn oprechte excuses. Als je wel die niek bent dan krijg je helaas geen hulp of respect van me.Ik snap niet dat jullie zo gemeen doen.. Ik vraag alleen een beetje hulp!
En PHPerik, jij hebt zelfs nog "be frendly" in dat balkje onder je naam staan..
En PHPerik, jij hebt zelfs nog "be frendly" in dat balkje onder je naam staan..
Maar goed: ik heb nu mijn post verranderd, die hierboven, naar alleen (waarvan ik denk voor jullie) het relevante gedeelte.
in IE7 heb je weer een ander probleem (de border van het linkse onderste inlogdingetje valt eraf).
Maar de linkerdiv heet: #leftbox
En ik kan me voorstellen als iemand vervelend is, dat als ik dezelfde naam heb, dat je je dan verward.. maakt niet uit hoor, PHPerik!