div buiten website

[willem008]

Goede dag

Ik ben nog bezig met een site waar alles goed stond.
Ik had er een paar weken niets mee gedaan en nu vallen er bij internet expl ineens twee div's buiten de site

Namelijk de datum #datum en het zoekvenster #zoek
Ze staan er alle twee absolute in mischien is float beter maar waar het mij even om gaat is waarom ze ineens buiten de hoofdcontainer staan.


Het klinkt mischien gek maar het is altijd goed geweest,
en waarom het bijv in opera nog wel goed is

En wat ik ook zo vreemd vindt als ik hem test in netrenderer is hij wel goed op ie7 na


http://kortebaandatabase.nl/joep/werkmap/index.php

 

[csshunter]

Soms heeft IE er bij een absolute positie ook {left: 0;} nodig.
Heb je dat al eens geprobeerd voor de #datum en de #zoek?

 

[willem008]

hallo

Nou ik ben eruit mischien stom van mijn maar ik wist niet van het bestaan ervan,

het was namelijk dat mijn browser (expl 9) op de compatibiteits weergaven stond heb ik mischien
per ongeluk aan gezet.

Maar dat toch even een vraag over die compatibiliteits weergaven als hij aanstaat waar verwijst hij dan naar.

 

[csshunter]

Als IE9 bij de bezoeker op de compatibiliteits-weergave staat, doet hij alsof hij een oudere versie is.
Maar je weet niet, of een bezoeker met IE9 de compatibiliteits-weergave uit heeft staan (en dus de meest geavanceerde resultaten te zien geeft), dus daar kan je sowieso niet op vertrouwen. *)

Conclusies:

1. Als IE9 in de compatibiliteits-weergave een verkeerd beeld geeft, dan ziet een surfer met IE7 of IE8 ook een verkeerd beeld.
2. Op dit moment heeft ruim 50% van de InternetExplorer-gebruikers in Nederland geen IE9, maar gebruikt IE7 of IE8 (inmiddels ligt IE6 er helemaal uit).
3. Ruim de helft van de IE-bezoekers krijgt dus een verkeerd beeld te zien --> dringend aanbevolen om maatregelen te treffen zodat die het goed gaan zien!
4. Gelukkig: als het verholpen is voor IE7, doen IE8 en hoger het bijna altijd ook goed.

Testen:
Hoe de verschillende versies van IE het er van af brengen, kan je zien als je de URL van de pagina invult in Netrenderer.

• Je kunt daar aanvinken welke versie van IE je wilt zien (vanaf IE5.5 t/m IE10) en dan krijg je een screenshot van de betreffende versie.
• Als je niet genoeg ziet, omdat het beeld onder de onderrand verdwijnt, kan je ook in een invulvakje opgeven hoeveel px naar beneden moet worden gescrolld: dan krijg je een opgeschoven screenshot.
• Opm.: Omdat het een afbeelding is, kan je bv. niet uitproberen of een hover of javascript goed werkt. **)

Met vriendelijke groet,
CSShunter
___________
*) Omgekeerd kan het wel: als webbouwer kan je IE9 (en/of IE8) forceren om bij een pagina altijd de compatibiliteits-weergave te gebruiken (en dus het resultaat van een voorgaande versie te tonen = terugschakelen). Soms kan dat wel eens handig zijn.

**) D.w.z. voor een css-hover moet je even tijdelijk de style van de normale stand in de hover-stand zetten, bv. bij een uitklap-menu > dan zie je of de IE's de uitgeklapte vorm ook in de goede opmaak vertonen.
Ook javascript kan je soms tijdelijk iets anders laten doen om het IE-resultaat op het screenshot van Netrenderer te kunnen zien.

 

[willem008]

ok duidelijk

als in nu deze site test met ie7 is zowel de datum als het zoekvenster weg ,
in ie8 is die wel weer goed,

hoe los je zoiets op

is het mischien toch wijst om voor bijv ie7 een arparte style te maken met een Conditional Comments

 

[csshunter]

Hoi Willem,

hoe los je zoiets op

Tip van reactie nr. #2 opvolgen , dus toevoegen:

#datum {
	...
	left: 0;
	}
#zoek {
	...
	left: 0;
	}

Verder moet de {float:left;} uit het #menu gehaald worden, dan komt ook in IE7 de beginhoogte van het menu op dezelfde plaats.

• Hier hoeft er rechts naast het menu niets meer te komen, dus een float is overbodig.
• In het algemeen: als het niet hoeft, geen floats toepassen.

Test: test-jenj.htm

=======

Is het misschien toch wijs om voor bijv ie7 een aparte style te maken met een Conditional Comment?

Alweer: als het niet persé hoeft, niet doen.
Hier is het met een paar kleine toevoegingen voor IE7 in orde, en de rest heeft er geen last van.
Om voor zoiets een speciaal stylesheet te laten aanrukken maakt de pagina alleen maar langzamer.

Met vriendelijke groet,
CSShunter

 

[willem008]

ok

het is gelukt door #zoek en #datum left 0 mee te geven ,alleen ik snap
nog niet wat er nu presies gebeurt,
waarom worden de twee div's niet zonder left 0 weergeven in ie7

 

[csshunter]

Waarom?
Tja, dat zou je eigenlijk aan IE7 zelf moeten vragen.
Die {left:0;} hoort er niet bij te hoeven, en IE kon altijd slecht overweg met de standaard css-regels: het is een dom ding vol bugs en eigenwijze opvattingen over wat zou horen.
En dan is IE7 nog een stuk beter dan zijn voorgangers, dus je kan wel nagaan!
Maar voetje voor voetje worden de IE-versies gelukkig beter.

Met vriendelijke groet,
CSShunter

PS:
Ik zie trouwens dat alleen het niet floaten van het menu ook al genoeg is. Dan hoeft er geen {left:0;} voor de #datum en de #zoek meer bij.
Wat er gebeurde, is dat door het floaten het menu bij IE7 te hoog kwam te staan, en de datum en het zoekvakje er dan niet meer tussen zouden passen. Waarom is weer de vraag, maar IE7 plaatste dan de absolute #datum en #zoek meteen rechts van het menu, wat IE7 als eerst vrijkomende ruimte zag. Bij nameten via een screenshot klopt dat precies: de afstand tussen de rechterkant van het menu en de linkerkant van de #datum-box was bij IE7 precies de 87px van de linker-margin van de #datum.