Het bekende IE vs FF probleem met CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Steven Hack

Steven Hack

25/10/2008 23:54:00
Quote Anchor link
Goedenavond / nacht,

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)
PHP script in nieuw venster Selecteer het PHP script
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
#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;
}


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/
 
PHP hulp

PHP hulp

29/03/2024 08:20:37
 
Jan Koehoorn

Jan Koehoorn

26/10/2008 00:09:00
Quote Anchor link
Die negatieve margin op je menublock class zorgt voor de problemen in IE.
 
Steven Hack

Steven Hack

26/10/2008 00:33:00
Quote Anchor link
Klopt Jan, daar zit het probleem. Maar in FF doet hij hem anders niet bovenaan uitlijnen, dat komt wss door de ul, dan gaat hij hem inspringen.

Maar zodra ik die weghaal doet hij het dus in FF niet.
 
Jan Koehoorn

Jan Koehoorn

26/10/2008 00:35:00
Quote Anchor link
Dan kun je beter dit doen voor je ul:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
ul    {list-style-type: none; margin: 0; padding: 0;}
 
Steven Hack

Steven Hack

26/10/2008 01:01:00
Quote Anchor link
Hmmm, heb dat even geprobeerd, maar daar trapt FF niet in.
 
Pieter Jansen

Pieter Jansen

26/10/2008 02:08:00
Quote Anchor link
text align:left dan?
 
Steven Hack

Steven Hack

26/10/2008 11:25:00
Quote Anchor link
Hmm, ik heb die margins verwijderd en wat geknutseld, en in FF doet hij dit nu perfect:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
#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;
}

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
 
Martijn B

Martijn B

26/10/2008 11:43:00
Quote Anchor link
negatieve margins werken gewoon goed in IE.

Probeer eens een goede doctype te gebruiken.
Gewijzigd op 01/01/1970 01:00:00 door Martijn B
 
Justin S

Justin S

26/10/2008 12:26:00
Quote Anchor link
Je kan ook eerst een browsercheck inbouwen waarna hij het goede CSS bestand selecteerd lijkt mij? Deze kan je dan vervolgens met een if en else statement maken:

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?
 
Steven Hack

Steven Hack

26/10/2008 19:51:00
Quote Anchor link
Zal eens naar doctype gaan kijken Martijn!. Bedankt.

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.