Probleempje met layout in internet explorer 7

[Verwijderd]

Hallo allemaal,

Een paar dagen geleden heb ik mijn website, http://emle.nl, voorzien van een nieuwe skin. Deze heb ik primair ontwikkeld met behulp van safari, maar zoals verwacht rendert firefox 'm ook helemaal correct. Opera 9, zelfde verhaal. Een paar tweaks heb ik moeten maken voor IE7, maar dat was ook niet heel veel schokkends.

Echter, er is toch een probleempje waar ik niet uit kom, en dat zijn de datum aanduidingen bij elke post. In internet explorer 7 lijken deze afgeknipt te zijn, en ik krijg dat niet goed. Ik heb de situatie geïsoleerd in een kleine test case: http://emle.nl/test.html . Deze ziet er op de diverse browsers zo uit:


Heeft iemand de verlossende tip hoe ik dit ook in IE7 goed krijg?

[RainerSGF]

Ja, Internet Explorer is typisch voor dit verschijnsel (waar het goed gaat met Firefox, Safari, Opera, ... gaat het natuurlijk mis bij IE). In elk geval al goed van je dat je denkt aan de layout in de verschillende bestaande browsers!

Als je met CSS werkt voor de layout (Cascading Style Sheets), zou het een oplossing kunnen zijn om te werken met verschillende CSS-bestanden (nl. één voor Firefox, Safari, ... en dan een aparte enkel voor Internet Explorer-browsers). In je html-bestanden zul je dan moeten werken met het volgende om telkens het juiste CSS-bestand aan te spreken:
vb.
<!--[if IE 7]>
<link href="1/ie7.css" rel="stylesheet" type="text/css">
<![endif]-->

zie voor verdere info: http://www.mozbrowser.nl/forum/viewtopic.php?p=75256

[Sebazzz]

Lijkt een soort boxmodel bug te zijn, in ieder geval in IE8 wél opgelost.

RainerSGF schreef op woensdag 11 maart 2009 @ 14:40:
[...]

Dat lost het probleem natuurlijk niet op, het is enkel een workaround.

[Zeebonk]

Ik weet niet hoe je zit qua "echte" styling. Maar je kan natuurlijk .postdate een achtergrond plaatje geven in plaats van de span classes kleur achtergronden te geven. En dan hoef je alleen de tekst te positioneren.

<span class="month">maart</span>
<span class="day">09</span>
<span class="year">2008</span>

[Verwijderd]

Zeebonk schreef op woensdag 11 maart 2009 @ 17:05:
Ik weet niet hoe je zit qua "echte" styling. Maar je kan natuurlijk .postdate een achtergrond plaatje geven in plaats van de span classes kleur achtergronden te geven. En dan hoef je alleen de tekst te positioneren.

<span class="month">maart</span>
<span class="day">09</span>
<span class="year">2008</span>

De kleuren zijn alleen voor mezelf om de positionering van de diverse elementen voor mezelf inzichtelijk te maken. Wat overigens wel grappig is (of niet eigenlijk) is dat als ik de layout bekijk met de developer toolbar voor internet explorer, hij wel vierkantjes tekent om de div's, met de juiste afmetingen! Alleen bij het renderen knipt 'ie er een stuk af. Wanneer ik de tekst niet in floating div's plaats werkt e.e.a. ook wat beter, alleen krijg ik 't dan weer niet makkelijk voor elkaar om tekst rechts uit te lijnen... grmbl.

[tonyisgaaf]

Verwijderd schreef op woensdag 11 maart 2009 @ 23:12:
[...]

De kleuren zijn alleen voor mezelf om de positionering van de diverse elementen voor mezelf inzichtelijk te maken. Wat overigens wel grappig is (of niet eigenlijk) is dat als ik de layout bekijk met de developer toolbar voor internet explorer, hij wel vierkantjes tekent om de div's, met de juiste afmetingen! Alleen bij het renderen knipt 'ie er een stuk af. Wanneer ik de tekst niet in floating div's plaats werkt e.e.a. ook wat beter, alleen krijg ik 't dan weer niet makkelijk voor elkaar om tekst rechts uit te lijnen... grmbl.

Ondanks het feit dat Zeebonk wat anders wil bereiken, denk ik wel dat het probleem/de oplossing zit in de geneste spans => de line height van span.date snijdt de content van span.bigdate af. Toch weer raar dat dan de hoogte van span.bigdate de (achtergrond?)positie van span.date verandert.
Nog een paar dingetjes:

• Waarom een margin-top&bottom van 10px op span.bigdate?
• Wat gebeurt er als je op div.postdate overflow:hidden; zet?

Geen oplossing, wel een paar oplossingsrichtingen...

[Pkunk]

* Pkunk mompelt iets over dat het wel weer met haslayout te maken zal hebben.

//edit: even samengevat: probeer eens op de betreffende elementen en/of hun parents zoom:1 te zetten. Wil ook wel eens helpen

[ Voor 30% gewijzigd door Pkunk op 12-03-2009 00:05 ]

[Verwijderd]

Timlog schreef op donderdag 12 maart 2009 @ 00:03:
/me mompelt iets over dat het wel weer met haslayout te maken zal hebben.

//edit: even samengevat: probeer eens op de betreffende elementen en/of hun parents zoom:1 te zetten. Wil ook wel eens helpen

Grappig. Dat helpt gedeeltelijk... 'maart' en '2008' worden dan goed, maar '09' blijft nog steeds afgesneden. Wat een maf concept, dat hasLayout...

[Verwijderd]

tonyisgaaf schreef op donderdag 12 maart 2009 @ 00:02:
[...]

• Waarom een margin-top&bottom van 10px op span.bigdate?
• Wat gebeurt er als je op div.postdate overflow:hidden; zet?

Die margin staat er nog van de vorige versie van de layout. Die ben ik vergeten weg te halen. Voor het eindresultaat maakt het overigens in geen van de browsers iets uit of 'ie er wel of niet staat (net even uitgeprobeerd)...

Div.postdate met een overflow:hidden maakt zo op het eerste gezicht ook geen verschil. In de vorige layout had ik dit redelijk op orde overigens (via een heel ingewikkelde constructie met veel div's), maar knipten juist safari en firefox weer boven- en onderkanten van grote letters af... Deze html lijkt me veel cleaner...

[DoubleJ]

Ik denk dat je probeer in de line-height zit, schroef deze eens op...

IE vind het niet leuk als de line-height lager is dan de font-size. Ik zet de line-height in dit soort situaties vaak even hoog als de hoogte van het element, lost een hoop browser inconsistentie op

[ Voor 64% gewijzigd door DoubleJ op 12-03-2009 13:17 ]

[Verwijderd]

Ik heb het opgegeven. In m'n PHP code kijk ik nu naar de user agent string. Als 't IE6 is, dan geef ik er niks om, en als 't IE7 is, dan krijgt 'ie vereenvoudigde HTML die hij met z'n kleine hersentjes wel kan bevatten.

In IE8 werkt 't overigens wel allemaal goed... zou 't dan toch nog goed gaan komen met IE?

[DoubleJ]

Heb je uberhaupt naar mijn suggestie gekeken?

[Verwijderd]

DoubleJ schreef op maandag 16 maart 2009 @ 08:02:
Heb je uberhaupt naar mijn suggestie gekeken?

Jazeker... alleen heb ik er weinig succes mee gehad. Ik heb alle suggesties in dit topic geprobeerd, telkens op een verse kopie van mijn testscenario.

Als het zo is dat jij het ook op mijn test HTML hebt geprobeerd en daar wel succes mee had, wat natuurlijk kan, want dan heb ik 't zelf fout gedaan, dan ben ik wel benieuwd naar jouw html?