Het bekende IE vs FF probleem met CSS
Ik weet dat het wat laat zal zijn om te breinkraken, maar ik ga het toch even voorleggen.
Ik heb een pagina met 2 menu's aan zowel de linker als rechterzijde, alleen in IE is het weer eens verknalt (as usual) Ik kom er niet uit, want wanneer het in IE lukt, is het in FF weer verknalt.
De relevante code:
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
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
#menu {
float: left;
width: 15%;
height: 500px;
border-right: 5px solid #0f202f;
}
#news {
float: right;
width: 15%;
height: 486px;
border-left: 5px solid #0f202f;
}
.menuBlock {
display: block;
margin-top: -12px;
margin-left: -40px;
list-style-type: none;
}
.menuTitle {
background-color: #0f202f;
border-bottom: 1px solid #0f101f;
color: #eeee00;
display: block;
cursor: pointer;
font-size: 11px;
font-weight: bold;
margin-left: -5px;
padding: 3px 10px;
text-align: left;
text-decoration: none;
}
a.menuBlock {
background-color: #808f8f;
border-bottom: 1px solid #707f7f;
color: #fff;
display: block;
font-size: 11px;
margin: 0;
padding: 3px 15px;
text-decoration: none;
}
float: left;
width: 15%;
height: 500px;
border-right: 5px solid #0f202f;
}
#news {
float: right;
width: 15%;
height: 486px;
border-left: 5px solid #0f202f;
}
.menuBlock {
display: block;
margin-top: -12px;
margin-left: -40px;
list-style-type: none;
}
.menuTitle {
background-color: #0f202f;
border-bottom: 1px solid #0f101f;
color: #eeee00;
display: block;
cursor: pointer;
font-size: 11px;
font-weight: bold;
margin-left: -5px;
padding: 3px 10px;
text-align: left;
text-decoration: none;
}
a.menuBlock {
background-color: #808f8f;
border-bottom: 1px solid #707f7f;
color: #fff;
display: block;
font-size: 11px;
margin: 0;
padding: 3px 15px;
text-decoration: none;
}
De html code is nogal veel, dus zal ik hier niet posten. Denk dat het voornamelijk om de CSS gaat. Anders kun je hem altijd nog via de broncode bekijken, mijn excuses voor deze vermoeiende extra klikjes.
Een online voorbeeld: http://monkey.trabot.net/Idle/
Maar zodra ik die weghaal doet hij het dus in FF niet.
Code (php)
1
ul {list-style-type: none; margin: 0; padding: 0;}
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
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
#middle {
height: 500px;
position: relative;
}
#menu {
float: left;
width: 170px;
height: 500px;
border-right: 5px solid #0f202f;
}
#content {
float: center;
height: 500px;
position: absolute;
margin-left: 180px;
}
#news {
float: right;
width: 170px;
height: 500px;
border-left: 5px solid #0f202f;
}
.menuBlock {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menuTitle {
background-color: #0f202f;
border-bottom: 1px solid #0f101f;
color: #eeee00;
display: block;
cursor: pointer;
font-size: 11px;
font-weight: bold;
margin-left: -5px;
padding: 3px 10px;
text-align: left;
text-decoration: none;
list-style-type: none;
}
a.menuBlock {
background-color: #808f8f;
border-bottom: 1px solid #707f7f;
color: #fff;
display: block;
font-size: 11px;
margin: 0;
padding: 3px 15px;
text-decoration: none;
list-style-type: none;
}
height: 500px;
position: relative;
}
#menu {
float: left;
width: 170px;
height: 500px;
border-right: 5px solid #0f202f;
}
#content {
float: center;
height: 500px;
position: absolute;
margin-left: 180px;
}
#news {
float: right;
width: 170px;
height: 500px;
border-left: 5px solid #0f202f;
}
.menuBlock {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menuTitle {
background-color: #0f202f;
border-bottom: 1px solid #0f101f;
color: #eeee00;
display: block;
cursor: pointer;
font-size: 11px;
font-weight: bold;
margin-left: -5px;
padding: 3px 10px;
text-align: left;
text-decoration: none;
list-style-type: none;
}
a.menuBlock {
background-color: #808f8f;
border-bottom: 1px solid #707f7f;
color: #fff;
display: block;
font-size: 11px;
margin: 0;
padding: 3px 15px;
text-decoration: none;
list-style-type: none;
}
In IE doet hij nog steeds witte ruimte tussen de li's. En de border van de news div loopt niet mooi over vanaf de div rechtsboven (klokje). Ook loopt de border van de news div niet door tot de footer.
Edit: De overgang met het klokje heb ik gefixt door de width van percentage naar pixels te vervangen.
Gewijzigd op 01/01/1970 01:00:00 door Steven Hack
Probeer eens een goede doctype te gebruiken.
Gewijzigd op 01/01/1970 01:00:00 door Martijn B
if als de browser IE is, selecteer je CSS bestand 1
else browser is FF of een andere, selecteer css bestand 2
of praat ik nou complete onzin?
Justin: Dit is inderdaad mogelijk, maar zo'n check is niet altijd 100% volgens mij.
En ik vind het gewoon professioneler en leuker als het me lukt om 1 code voor beide browsers werkend te krijgen. Ik doe dit tenslotte voor mijn lol ^^
<edit>
Na het doctype er in gezet te hebben werkt alles perfect, harstikke bedankt Martijn! En ook Jan en de rest, alle tips waren nuttig deze keer.
</edit>
Gewijzigd op 01/01/1970 01:00:00 door Steven Hack