CSS fout in beide IE's en niet in FF
Nadat ik een paar dingen had veranderd voor Lightbox, zie ik dat boven mijn header en onder mijn header, er geen ruimte van 20px meer is, maar een grotere van 40px. In beide IE's geeft hij die ruimte van 40px weer en in FF gewoon zoals hij hoort te zijn, 20px.
klik
Hier kun je het zien.
Voor de css van mij header en mijn content en menu eronder:
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
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
#header {
position: relative;
top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px; /* breedte van je menu */
}
#headerfoto {
float: left;
_margin-top: 20px;
padding: 5px;
width: 144px;
background-color: #625c4f;
background-image: ;
border: 2px solid #f4e9bc;
color: #f4e9bc;
}
#headertekst {
padding: 5px;
background-image: url(../images/content_bg_w750_h1010d.jpeg);
margin-left: 180px;
margin-bottom: 20px;
border: 2px solid #f4e9bc;
}
#menu {
clear: both;
width: 190px;
float: left;
font-size: 16px;
font-weight: bold;
}
#menu a {
width: 100%;
}
#menu ul li {
margin: 20px 20px 0px 20px;
list-style: none;
}
#menu li a {
display: block;
background-color: #202020;
color: #625c4f;
border: 2px solid #f4e9bc;
text-decoration: none;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
#menu li a:hover {
background-color: #282828;
color: #f4e9bc;
border: 2px solid #f4e9bc;
}
#content {
position: relative;
height: auto;
margin-top: 63px;
margin-left: 200px; /* Zelde als breedte van #menu */
margin-right: 20px;
bottom: 43px;
border: 2px solid #f4e9bc;
background-image: url(../images/content_bg_w750_h1010d.jpeg);
background-repeat: no-repeat;
background-position: center;
}
div#content h1 {
padding: 10px;
font-size: 22px;
color: #202020;
text-align; center;
}
div#content p {
font-weight: bold;
font-size: 16px;
color: #202020;
padding: 0px 5px 0px 5px;
}
div#content a img {
border: none;
padding: 20px;
}
position: relative;
top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px; /* breedte van je menu */
}
#headerfoto {
float: left;
_margin-top: 20px;
padding: 5px;
width: 144px;
background-color: #625c4f;
background-image: ;
border: 2px solid #f4e9bc;
color: #f4e9bc;
}
#headertekst {
padding: 5px;
background-image: url(../images/content_bg_w750_h1010d.jpeg);
margin-left: 180px;
margin-bottom: 20px;
border: 2px solid #f4e9bc;
}
#menu {
clear: both;
width: 190px;
float: left;
font-size: 16px;
font-weight: bold;
}
#menu a {
width: 100%;
}
#menu ul li {
margin: 20px 20px 0px 20px;
list-style: none;
}
#menu li a {
display: block;
background-color: #202020;
color: #625c4f;
border: 2px solid #f4e9bc;
text-decoration: none;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
#menu li a:hover {
background-color: #282828;
color: #f4e9bc;
border: 2px solid #f4e9bc;
}
#content {
position: relative;
height: auto;
margin-top: 63px;
margin-left: 200px; /* Zelde als breedte van #menu */
margin-right: 20px;
bottom: 43px;
border: 2px solid #f4e9bc;
background-image: url(../images/content_bg_w750_h1010d.jpeg);
background-repeat: no-repeat;
background-position: center;
}
div#content h1 {
padding: 10px;
font-size: 22px;
color: #202020;
text-align; center;
}
div#content p {
font-weight: bold;
font-size: 16px;
color: #202020;
padding: 0px 5px 0px 5px;
}
div#content a img {
border: none;
padding: 20px;
}
Wat is hier het probleem? Zie ik een domme css fout over het hoofd?
Offtopic:
Iedereen nog een gelukkig nieuwjaar toegewenst!
oplossing een eenvoudige hack...
http://www.webdevout.net/css-hacks
Hier de link voor de lay-out met includes enzo, die niet klopt in FF, IE6 en IE7
klikje
Mijn content zit bij alledrie 10px te ver naar onderen vanaf mijn header en in IE6 en IE7 zit er onder en boven mijn header nog een extra rand van 20px.
Dit is het html bestand met interne css die precies hetzelfde is als mijn andere bestand die hierboven gebruikt word. Hier gebruik ik geen php includes en heb ik ook geen lightbox bestanden geincluded. Hier ziet de site er wel goed uit.
klikje
Hoe kan dit? Lijkt me stug dat het door de includes komen van Ligthbox, toch...?
Edit:
De content die 10 px teveel naar onderen stond vanaf de header is opgelost
De content die 10 px teveel naar onderen stond vanaf de header is opgelost
Gewijzigd op 01/01/1970 01:00:00 door J V
Code (php)
1
2
3
2
3
#header {
margin: 20px;
}
margin: 20px;
}
Dit zou precies hetzelfde resultaat opleveren.
ps. Ook aan de onderkant zou je de position:relative kunnen verwijderen en deze vervangen door een margin, dit is een wat logischere aanpak...
Gewijzigd op 01/01/1970 01:00:00 door Joren de Wit
Nu heb ik nog steeds dat bij IE6 en IE7 een balk onder en boven de header van 20px extra zit.
Moet ik nu met hacks gaan werken?
Edit:
Door die position relatives weg te werken loopt mijn tekst wel door mijn footer heen.
Quote:
Geef je content een margin-bottom mee...Door die position relatives weg te werken loopt mijn tekst wel door mijn footer heen.
Als ik hem position relative meegaf en een bottom: bla px;
Dan deed hij het wel, maar zonder die position relative doet hij dat niet meer.
Wel raar.
Maar in IE6 en 7 heb ik nog steeds die lege ruimte boven en onder mijn header van 20px ongeveer. Terwijl die er in FF niet is. Het lijkt wel of IE daar een extra margin ofzo zit, terwijl ik die niet kan vinden in mijn css file. Kan ik voor beide IE's een bepaalde margin anders laten zijn dan voor de andere browsers?
_margin: 20px;
maring: 20px;
Dat is toch alleen voor IE6?
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
#header {
margin: 20px;
}
#headerfoto {
float: left;
padding: 5px;
width: 144px;
background-color: #625c4f;
background-image: ;
border: 2px solid #f4e9bc;
color: #f4e9bc;
}
#content {
height: auto;
margin-top: 40px;
margin-left: 200px; /* Zelde als breedte van #menu */
margin-right: 20px;
margin-bottom: 43px;
padding: 0px 5px 0px 5px;
border: 2px solid #f4e9bc;
background-image: url(images/content_bg_w750_h1010d.jpeg);
background-repeat: no-repeat;
background-position: center;
}
margin: 20px;
}
#headerfoto {
float: left;
padding: 5px;
width: 144px;
background-color: #625c4f;
background-image: ;
border: 2px solid #f4e9bc;
color: #f4e9bc;
}
#content {
height: auto;
margin-top: 40px;
margin-left: 200px; /* Zelde als breedte van #menu */
margin-right: 20px;
margin-bottom: 43px;
padding: 0px 5px 0px 5px;
border: 2px solid #f4e9bc;
background-image: url(images/content_bg_w750_h1010d.jpeg);
background-repeat: no-repeat;
background-position: center;
}
klik
Hier ziet hij eruit in FF zoals hij er overal hoort uit te zien.
Maar IE maakt er weer iets doms van. Die voegt gewoon extra ruimte toe of hij verdubbeld de ruimte. Ik snap niet waarom hij dat doet, want ik heb nergens zo'n grote ruimte staan en er zijn ook geen dubbele margins ofzo. Ze moeten dat IE verbannen, kan daar echt helemaal gek van worden.