CSS: Firefox & IE doen het zowel goed als fout...

[sariel]

Hallo iedereen,

heb 2 probleempjes met een websiteje die ik aan het bouwen ben.

Probleem 1: De algehele vormgeving wordt wel goed weergegeven met Firefox, maar niet met Internet Explorer
Probleem 2: Het plaatje (met popup) wordt wel goed weergegeven met Internet Explorer, maar niet met Firefox

Zie http://darkness.dune.net/jf voor de site....

Hoe kan ik er voor zorgen dat beide browsers de site hetzelfde weergeven?

[Cubix]

Je gebruikt bijna alleen maar span's en geen div's. De werking van beide is hetzelfde, alleen wordt een span inline weergegeven, een een div als block, iets wat veel meer van toepassing is voor je layout.

Ben je trouwens bewust van de verschillen tussen Quircks en Standards mode? Ik denk dat daar je verschillen uit voortkomen.

Verder zet je alles absolute neer. Waarom? Je hebt een perfecte flow layout naar mijn idee.

edit: Ik zie nu dat in beide browsers standards mode gebruiken. Dat is het dus niet.

[ Voor 11% gewijzigd door Cubix op 19-07-2005 10:42 ]

[sariel]

divs omgezet naar spans. geen verschil in layout.

nee, ik heb er eigenlijk nooit van gehoord, en ben me er dus niet bewust van. Ik heb net wel ff een site gevonden over quirks mode (www.quirksmode.org) maar snap er nog niet veel van.

Ik zet alles absolute neer, omdat ik absoluut zeker wil zijn waar alles komt te staan. Op deze manier is het mogelijk om later dingetjes te verplaatsen als ik ze elders wil hebben, simpelweg door de css locaties aan te passen.

[BtM909]

http://www.quirksmode.org/css/quirksmode.html Dit is wellicht een iets handigere link om even door te lezen. Er zijn wel meer resources daarvoor beschikbaar (ook hier op GoT).

Wat je ontwerp betreft: ik kies bijna nooit voor alleen maar absolute positionering. Je ontwerp moet je eigenlijk al anders doen. Begin eerst desnoods met de plain tekst (content) wat je weer wilt geven en ga dan vervolgens naar de opmaak kijken

[sariel]

Net quirksmode (volgens http://hsivonen.iki.fi/doctype/) in almost-standards mode en standards mode gezet, maar het lijkt niet te helpen....het is exact hetzelfde als origineel...

[sariel]

BtM909: zou je uit kunnen leggen hoe je absolute kunt ontwijken, als je een layout wil krijgen zoals ik heb het gemaakt op die site?

[KappuhH]

sariel schreef op dinsdag 19 juli 2005 @ 10:18:

Probleem 2: Het plaatje (met popup) wordt wel goed weergegeven met Internet Explorer, maar niet met Firefox

Wordt de popup niet gewoon geblokkeerd door de popup-blocker van Firefox?
Sorry te vroeg geschreeuwd... laat maar

[ Voor 10% gewijzigd door KappuhH op 19-07-2005 10:56 ]

[sariel]

Hrm, die doctype aanpassing heeft het plaatje in ieder geval wel goed gemaakt, nu alleen nog uitvinden waarom:
- Internet Explorer de links in het menu *groen* maakt (staat nergens groen in de css)
- Internet Explorer de links in het menu altijd een grijze achtergrond geeft (witte achtergrond+links hebben inherit....dus zou wit moeten blijven, en alleen grijs bij hover)
- Internet Explorer zo'n belachelijk eind inspringt

[Borizz]

sariel schreef op dinsdag 19 juli 2005 @ 11:02:
Hrm, die doctype aanpassing heeft het plaatje in ieder geval wel goed gemaakt, nu alleen nog uitvinden waarom:
- Internet Explorer de links in het menu *groen* maakt (staat nergens groen in de css)
- Internet Explorer de links in het menu altijd een grijze achtergrond geeft (witte achtergrond+links hebben inherit....dus zou wit moeten blijven, en alleen grijs bij hover)
- Internet Explorer zo'n belachelijk eind inspringt

- Je hebt wel degelijk ergens groen staan in de CSS:

Cascading Stylesheet:

a:visited {
    color: #aaffaa;
    text-decoration: none;
}

Dit stukje zegt dat elke link die je bezocht hebt groen wordt, DUS dit word ook overgenomen door de link met class menu, omdat je dit niet overruled door a.menu:visited te definieren.

- Hetzelfde geldt voor de grijze achtergrond, IE ondersteund nog geen 'inherit' waarde bij background-color. Hierdoor wordt de stijl overgenomen van:

Cascading Stylesheet:

a {
    text-decoration: none;
    color: #ffaaaa;
    background-color: #e8e8e8;
}

Dit is dus wel degelijk een grijze achtergrond!
Het beste kan je je achtergrond dezelfde kleur geven als het parent element, of de waarde 'transparent' meegeven.

- Wat het inspringen van de lijst betreft, dit heeft met de margin en of padding van de lijst te maken, die moet je dus even goedzetten in je CSS!

[sariel]

Nou ja, ik krijg het niet goed, zoals ik het wil, maar zoals het nu is, komt het wel redelijk in de buurt...alleen jammer dat IE dat uitspringen bij een hover niet goed lijkt te kunnen

[Borizz]

sariel schreef op dinsdag 19 juli 2005 @ 12:52:
Nou ja, ik krijg het niet goed, zoals ik het wil, maar zoals het nu is, komt het wel redelijk in de buurt...alleen jammer dat IE dat uitspringen bij een hover niet goed lijkt te kunnen

Dat komt omdat in IE :hover alleen maar op het link element (a) werkt.