Internet explorer laat site anders zien dan Firefox

[ZpAz]

Het menu in mijn site wordt niet goed weergegeven, in Firefox sluit het achtergrond van de content niet goed aan op de balk erboven en er onder.

Firefox fout:


En in Internet Explorer zit de tekst van het menu te ver van de boven en onderkant van de boven en onderkant van het menu, en het onderste menuplaatje zit daar niet tegen de border aan.

Internet Explorer fout:


Site: http://home.planet.nl/~dijk8014/
Css: http://home.planet.nl/~dijk8014/style.css

Waar ligt dit aan? Alvast bedankt

[RM-rf]

Waarschijnlijk een verschil wegens het boxmodel....

(bij een vastgedefinieerde hoogte, telt het W3C boxmodel de padding op bij de hoogte )

er zijn meerdere boxmodel hacks bv http://tantek.com/CSS/Examples/boxmodelhack.html, bij validerende nette XHTML code zal ook explorer6 het W3C model volgen.

[ Voor 10% gewijzigd door RM-rf op 09-12-2005 18:04 ]

[Michali]

Dat ligt aan de standaard margin van een paragraaf (p). Dat kun je dus oplossen door:

Cascading Stylesheet:

#par_menu
{
  margin: 0;
}

[crisp]

en de margin-top van #div_menu op 0 zetten lost je andere probleem op.

Overigens verschilt de default style voor paragrafen van browser tot browser. Sommigen gebruiken padding, en andere ook weer margin.

[ Voor 50% gewijzigd door crisp op 09-12-2005 18:07 ]

[FragileM64]

Beetje off topic maar op men 2 crt's is je site erg donker. Enkel op men tft ziet hij er mooi uit.
Develop je toevallig zelf op een tft? Het is je eigen keuze maar ik zou hem iets lichter maken want voor de rest vind ik hem wel leuk. Test hem maar es op een crt, die geven kleuren donkere kleuren echt donkerder weer.

[ Voor 17% gewijzigd door FragileM64 op 09-12-2005 18:22 ]

[ZpAz]

FragileM64 schreef op vrijdag 09 december 2005 @ 18:21:
Beetje off topic maar op men 2 crt's is je site erg donker. Enkel op men tft ziet hij er mooi uit.
Develop je toevallig zelf op een tft? Het is je eigen keuze maar ik zou hem iets lichter maken want voor de rest vind ik hem wel leuk. Test hem maar es op een crt, die geven kleuren donkere kleuren echt donkerder weer.

Ik heb zelf een CRT en vind de kleuren er leuk uit zien:) Maar de tekst krijgt denk ik wel een ander kleurtje..:)

En ik zal de andere reacties eens proberen:)

Geen van beide tips werkt, maar het probleem zat bij de padding van mijn content achtergrond die ik nu op top en bottom op 12px; heb gezet.

-----------

Ik heb nog één probleem en dat is:

In Internet Explorer, zit de onderkant van het menu nog niet tegen de zwarte border aan.



Hoe los ik dit op?

[ Voor 50% gewijzigd door ZpAz op 09-12-2005 20:39 . Reden: Foutje opgelost, nog één te gaan:) ]

[Verwijderd]

De Firefox-fout heb ik eerder gezien en als je 1px (* 2) verticaal erbij niet erg vindt, kun je het oplossen door in de definitie van #par_menu het onderstaande op te nemen. Op zich een geval van collapsing margins.

code:

margin: 1px;

De Internet Explorer-fouten slaan allemaal op extra verticale ruimte. In alle gevallen is sprake van een whitespace die leidt tot extra ruimte. Daarnaast zie je dat bij "margin: 0;" voor #par_menu de layout voor beide browsers gelijk is. Kortom, definieer de margin voor de <p> in dat element. Zou een list (<ul>..</ul>) overigens niet meer op zijn plaats zijn voor het menu?

[ Voor 26% gewijzigd door Verwijderd op 09-12-2005 20:59 . Reden: typo + betere benaming ]

[Michali]

Ik zou sowieso die IMGs dumpen en gewoon gebruik maken van de css background property. IMG tags gebruiken voor zaken als dit is gewoon fout imo. Het menu top en menu bottom zijn gewoon design (opmaak) elementen die niet thuis horen in de HTML. Bovendien is het dan ook nog eens beter controleerbaar en heb je minder last van margins en paddings die effect hebben op de afbeelding.

[Verwijderd]

Michali schreef op vrijdag 09 december 2005 @ 18:04:
Dat ligt aan de standaard margin van een paragraaf (p). Dat kun je dus oplossen door:

Cascading Stylesheet:

#par_menu
{
  margin: 0;
}

]

klopt

[Nvidiot]

De site is op mijn goed afgestelde CRT bijna niet te lezen. Het verschil tussen het donkergrijs van de achtergrond en de zwarte letters is klein.

[Michali]

Verwijderd schreef op zaterdag 10 december 2005 @ 12:11:
[...]


]

klopt

offtopic:
Kan aan mij liggen, maar ik snap je reactie niet helemaal?

[ZpAz]

Michali schreef op zaterdag 10 december 2005 @ 12:07:
Ik zou sowieso die IMGs dumpen en gewoon gebruik maken van de css background property. IMG tags gebruiken voor zaken als dit is gewoon fout imo. Het menu top en menu bottom zijn gewoon design (opmaak) elementen die niet thuis horen in de HTML. Bovendien is het dan ook nog eens beter controleerbaar en heb je minder last van margins en paddings die effect hebben op de afbeelding.

Ja maar als het menu 'groter' wordt, als je ergens opklikt ofzo wil ik dat de plaatjes ook mee gaan, en dat niet de tekst over de onderkant van het menu gaat.

Nvidiot schreef op zaterdag 10 december 2005 @ 12:31:
De site is op mijn goed afgestelde CRT bijna niet te lezen. Het verschil tussen het donkergrijs van de achtergrond en de zwarte letters is klein.

Ik wou het lettertype (kleur) ook nog gaan veranderen
Maar ik wou eerst de layout zelf in orde hebben voor ik dat ga doen:)

Verwijderd schreef op zaterdag 10 december 2005 @ 12:11:
[

code:

#par_menu
{
  margin: 0;
}

]


]

klopt

Werkt ook niet.

-----------

Nog meer tips?:)

[ Voor 37% gewijzigd door ZpAz op 10-12-2005 14:35 ]

[Verwijderd]

We hebben aangedragen hoe je de problemen uit de TS kunt verholpen (zie uitwerking), we hebben gewezen op "best practices" die je kunt gebruiken en op de kleuren in je ontwerp. Wat voor tips wil je nog meer?

[Michali]

Ik weet de oplossing wel, dat doe je door de css display property van die img tags op block te zetten. Anders zit er standaard 2 pixels ruimte onder (vraag me niet waarom). Verder kun je achtergrond afbeeldingen gewoon onderin uitlijnen. Als het element dan verticaal uitrekt om een of andere reden dan gaat de achtergrond afbeelding ook gewoon mee. Dat doe je overigens zo:

Cascading Stylesheet:

background-position: bottom center;
/* of */
background-position: 50% 100%;

Beide hebben exact hetzelde effect als het goed is. Ik blijf erbij dat img tags misbruiken voor design elementen gewoon verkeerd is. Het is zelfs gemakkelijker op te lossen door ze helemaal niet te gebruiken. Ze leveren vaak alleen maar problemen op zoals dit.

[Verwijderd]

Mee eens, Michali, dat afbeeldingen hier enkel een illustratieve functie hebben en beter via CSS (als achtergrond) kunnen worden opgenomen in de uitwerking.

Wanneer de render mode bepaalt dat afbeeldingen als inline worden getoond, zullen afbeeldingen met enige witruimte onder getoond worden. DIt is omdat voor inline verticale ruimte wordt overgelaten onder de baseline voor letters als g, j, p, q en y (zie: quirksmode.org).

[ZpAz]

Verwijderd schreef op zaterdag 10 december 2005 @ 17:43:
Mee eens, Michali, dat afbeeldingen hier enkel een illustratieve functie hebben en beter via CSS (als achtergrond) kunnen worden opgenomen in de uitwerking.

Gedaan

En nu staat alles goed in IE en FF, Bedankt voor het helpen:D