Hoe krijg ik dit nou weer gefixt?

Status
Niet open voor verdere reacties.
Systemizer X100

Systemizer X100

Terugkerende gebruiker
Lid geworden
24 mei 2003
Berichten
1.636
Ik ben net anderhalf uur bezig geweest met het proberen te fixen van de fouten in mijn pagina. Als ik m open in Firefox staat alles verkeerd en wordt gewoon alles verkeerd weergegven. Open ik m in Internet explorer, dan is alles wel goed. Wat doe ik fout?
Overigens zie ik dat mijn rechtertextbox dichter bij het midden staat dan de linker, hoe los ik dat op? Ik heb al van alles geprobeerd! :mad:

(Ik weet niet of ik deze pagina online zet, maar ik wil het in ieder geval goed hebben!)
 

Bijlagen

Laatst bewerkt:
Er kwam iets in voor over dat er iets dubbel was, maar dat heb ik gefixt. Verder geen fouten, maar nog wel een rommeltje :(
 
Nee, de vraag is nog niet opgelost. De layout stinkt nog, alleen ik weet niet wat ik fout heb gedaan :(
 
De enige fout die ik vind is de afbeelding onderaan. De url van die afbeelding is gewoon fout. Verander die even. Maar wat is er verder nog fout? Ik wil je graag helpen.
 
Nou, kijk eens naar de plaatjes in de bijlage. De 'Stinklayout' is een screenshot genomen via Firefox. Het rechterplaatje is buiten de lijn, het bovenste kadertje klopt helemaal niet en het plaatje puilt uit, de menuutjes staan niet op z'n plek etc.
Het andere plaatje is wat ik zie via Internet Explorer, het enige wat eraan scheelt is dat het menu iets teveel naar links is geschoven, maar niet zo chaotisch als in Firefox... hmm :confused:

EDIT: Whoops, verkeerd plaatje toegevoegd, maar de bijlage is te groot. Ik plaats het even op mijn webspace

EDIT #2: Download
 
Laatst bewerkt:
Goed nieuws: Het gaat bijna zeker lukken, maar ik ga nu naar bed. Morgen ga ik weer verder.
 
Nog niet zo lang met CSS bezig, maar kwam hier op uit:

In de CSS voor "#top" heb je 2 x height staan en in "#right" 2 x width (met de Box model Hack wordt dat 3 x).

Verder heb je op "#top" onnodig/verkeerd de Box Model Hack toegepast. Als je die weghaalt (of correcte waarden geeft), wordt "#top" goed weergegeven in FF.

Voor #right heb je ook de Box Model Hack toegepast, deze keer terecht, alleen kloppen ook hier je berekeningen niet.
Ook moet je hier je (left-)margin op 0px zetten om dezelfde margin te krijgen als tussen "#left" en "#middle".

Je DOCTYPE is niet compleet en je geeft geen charset aan, belangrijk voor valideren.

Kijk hier voor een voorbeeld met de juiste code. Getest in IE, FF, Opera en Netscape.

1 probleem nog: in IE krijgen "#top" en "#right" een extra bottom-padding van 5 pixels en ik zie niet waarom... :confused:
 
Nou, hij is me net voor:( Ik had het ook al klaar. Zo heb ik het gedaan:

1. Maak van de eerste #top, .top
2. Haal de 2 height tags weg onder .top
3. Maak van de eerste #right, .right
4. Haal de onderste width tag weg onder .right
5. Maak van de 150 achter de bovenste width tag 140
5. Haal de div tags weg bij de 2 afbeeldingen
6. Zet als attribuut in de tag van het 'logo' class="top"
7. Zet als attribuut in de tag van 'See all my sites' class="right"

Het enige wat met mijn methode nog niet lukt is dit:
Bij de afbeelding van 'See all my sites' komt er bij FF een donkergrijze en een lichtgrijze rand en bij IE alleen een lichtgrijze. Als je dat erg vindt, kun je beter die van rkw pakken.

Als het goed is doet hij het nu in Internet Explorer en in Mozilla Firefox. (Andere misschien ook wel, maar die heb ik niet gestest.) In de bijlage zit de code voor als je geen zin hebt om alles te veranderen of het lukt niet.
 

Bijlagen

Ik gebruik altijd id="xxx" en #xxx. Maar bedankt he, het werkt eindelijk :)
Maar wat ik eigelijk niet begrijp is die voice-family: "\"}\"";
voice-family:inherit;;... is dat de Box-Hack? Ik begrijp eigelijk niet zo goed wat die doet en waar die nou eigelijk geplaatst moet worden.
Ook dat van:
html>body #right {
width: 140px;
}

Wat moet dat eigelijk voorstellen? Hehe, ik las dat ergens, maar ik weet nog niet echt wat het doet..
 
Ik weet het ook niet wat die dingen betekenen. Ik had het eerst weggehaald en toen keek ik wat voor resultaat het was, maar het bleef hetzelfde. Toen heb ik het maar weer terug gezet.
 
Geplaatst door Systemizer X100
Ik gebruik altijd id="xxx" en #xxx. Maar bedankt he, het werkt eindelijk :)
Maar wat ik eigelijk niet begrijp is die voice-family: "\"}\"";
voice-family:inherit;;... is dat de Box-Hack? Ik begrijp eigelijk niet zo goed wat die doet en waar die nou eigelijk geplaatst moet worden.
Ook dat van:
html>body #right {
width: 140px;
}

Wat moet dat eigelijk voorstellen? Hehe, ik las dat ergens, maar ik weet nog niet echt wat het doet..
Klik om te vergroten...


Dat is idd de Box Model Hack. Browsers met gebrekkige CSS ondersteuning interpreteren een box (div) anders dan browsers met goede CSS ondersteuning.

De ene trekt de borders en margins van de breedte/hoogte van de content af, de andere telt ze er juist bij op. Daardoor valt in de ene browser de content (in dit geval je plaatje) buiten de div en in de andere wordt hij wel goed getoond. De hack zorgt ervoor dat het in verschillende browsers zo getoond wordt als de bedoeling is.

@ jeroendenoot:
Een class gebruiken als je de tag rechtstreeks kan benaderen is overbodige (en soms incorrecte) code creëeren, je kan het je dus beter anders aanwennen.
 
Maar hoezo is met een div tag dan beter? class is toch veel korter en het werkt volgens mij gewoon goed.
 
Mooi hoor :thumb: .

Zou alleen de tekst nog even doorlopen, zitten nog wat kleine foutjes in. Een voorbeeld:
Een "trail" is een pad, weg.
Een "trial" is een probeer(versie).
Probeer wat minder het woord "stuff"te gebruiken...

Verder is je lettertype veel te klein, mijn schermfont staat op 120 dpi (resolutie 1600 x 1200) en moet bijna met de neus tegen het scherm aan om te kunnen lezen (zwarte tekst op donkergrijze ondergrond helpt dan ook niet echt, de links met witte tekst zijn al veel beter leesbaar).
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan