[CSS] Aanpassingen voor IE op PC

Hey,

Naar aanleiding van dit draadje: http://forum.macosx.nl/viewtopic.php?t=53420
Heb ik een paar reacties gekregen dat deze site www.freshface.be/sinkin er niet goed uitziet op pc.
Screenshot IE op PC: http://forum.macosx.nl/album_page.php?pic_id=8572

Aangezien ik geen pc heb (anderen mss wel) was mijn vraag of iemand deze kleine probleempjes kon oplossen of met helpen?
Deze personen met een pc kunnen dan gemakelijker testen, het is voor mij echt omslachtig om dit altijd te moeten vragen.

De bestanden kan je hier downloaden: http://www.freshface.be/sinkin/Sinkin.zip

Alvast bedankt.

Ik weet niet of je er budget voor hebt maar je kan natuurlijk VIrtual PC installeren: http://www.microsoft.com/mac/products/virtualpc/virtualpc.aspx

Je zou eventueel deze website kunnen gebruiken, duurt echter wel even voordat je klaar bent dan: [url]http://browsershots.org/[/url]

Geen optie, is te traag. Een betere optie is dat ik me een pc laptop koop. Alhoewel ik mijn geld daar niet aan wil uitgeven :)

Dus reken ik op de bereidwilligheid van mede-macosx’ers

Ah t'is gratis bedankt WebJ. Indd wel lang wachten ...

Te lang wachten … dus het is ook geen optie.

ik heb niet de hele code doorspit, maar ik weet wel twee dingen die er mee te maken kunnen hebben: - IE op PC kan plots extra marges nemen als je geen float mee geeft aan een div. Ik heb dus niet je code van naaldje tot draadje bekeken, maar ik denk dat je één en ander kan oplossen door floatende div's te plaatsen ipv absolute binnen je center div. - op sommige momenten reageert IE op PC nogal vreemd met margins - ook daar verschuiven dingen. Het kan opgelost worden door padding te gebruiken ipv margin. Als dat niet kan (door bv een achtergrond) kan je twee divs in elkaar steken waarbij de buitenste padding heeft en de binnenste 100% is.

Je mag me eventueel een mailtje sturen als ik een keer op m’n pc moet kijken (die enkel voor deze reden gekocht is, nl. de brakke CSS ondersteuning van IE).

[quote:77010f5c9b="konijn"] Een betere optie is dat ik me een pc laptop koop. Alhoewel ik mijn geld daar niet aan wil uitgeven :)[/quote:77010f5c9b]

Dat is inderdaad dé oplossing in dit geval. Ik heb nu sinds een paar weken zo’n noodzakelijk kwaad in huis gehaald, en heb er tot nu toe geen spijt van! Natuurlijk zag ik - net als ieder ander forum lid hier - enorm tegen de aanschaf van zo’n monster op… heb dan ook de allergoedkoopste del(l) laptop besteld (een laptop steek je makkelijker weg! uit het zicht - uit het hart zullen we maar zeggen) … maar eens je stap voor stap je xhtml/css kunt opbouwen en onmiddelijk het resultaat ervan kunt controlleren, wil je nooit meer terug… en ja, ook ik heb Virtual PC ooit gebruikt, en nee, die goedkope del(l) doet niks anders dan IE 6 draaien… de rest doe ik lekker op mijn vertrouwde Macje :wink:

Het geeft meer zekerheid en je kunt sneller handelen… ik was het beu om bij de klant te komen om daar soms pas de gehele site in volle IE ‘glorie’ te kunnen zien… is niet goed voor je zelfvertrouwen :roll:

Kortom, wil je als pro sites ontwikkelen, dan zul je helaas toch de 90% + markt in de gaten moeten houden :?

mischien kun je voor een apple en en ei wel een PC towertje kopen. Dit kost je kop echt niet. Of mischien wel een nieuwe... Je hebt namelijk helemaal niet zo veel nodig om alleen IE en Opera etc te kunnen draaien.

De PC die ik zelf heb, heb ik zelf inelkaar gezet en heeft me “compleet” 400 euro gekost…
Dit had ook nog een stuk goedkoper gekunt als ik een goedkoper moederbord, cpu en minder geheugen had gekocht…

Ik bouw zelf ook vaak sitejes, en een PC is daarbij onmisbaar helaas.
( De HD space die door de aanwezigheid van de PC erbij komt is ook mooi meegenomen )

same here: €250 voor een tweedehands PC, en dan €200 om het in een deftige kast te steken :P

en idd: je moet stap voor stap werken, want achteraf de hele boel rechttrekken kan lukken, maar kan ook zeggen +/- opnieuw beginnen. Als alles één voor één opbouwt weet je precis vanaf waar het mis gaat. Dan komt het er natuurlijk op aan om de oorzaak beter te lokaliseren en een deftige opossing te vinden…

ik heb je code (nog steeds niet) helemaal bekeken, maar het kan dat het menu onderaan alles open duwt (dacht ik net aan door je ander draadje over dat menu). Geef eens een line-height mee daar, want IE pakt steeds meer dan andere browsers. Verder kan je de omsluitende div steeds overflow: hidden meegeven.

Het is maar iets dat in me opkwam, het is niet gezegd dat dit de oorzaak is. Probeer gewoon eens mat wat gekleurde vlakjes en achtergronden in div’s uit te zoeken wat de verplaatsingen veroorzaakt.

Ik gebruik soms een ruler die ik daarvoor gemaakt heb, ik heb 'm even online gezet: http://www.3sign.com/images/pixel_meter.gif
Je kan dat in achtergrond van een div zetten (repeat-x oid) om één en ander uit te zoeken.

Hey,

Iedereen al bedankt voor de tips!
tennapel heeft me al zeer goed geholpen door het css bestand aan te passen http://www.freshface.be/sinkin/

Ik heb zelf nog niet naar het resultaat gekeken op een pc.

Maar nu het volgende probleem, als je het browser window verkleint, dan zie je dat de kader van de content verdwijnt onder het browservenster door en er komen geen scrollbars.
Ook verspringt dan de horizontale balk tov het contentvlak en zie je een verschuiving.

Iemand een idee om dit op te lossen?

Door alles relatief te positioneren, nu heb je <div id="center-container"> absoluut gepositioneerd op 50% van het midden van het browser venster, dus verdwijnt je site "gecentreerd", scrollbalken krijg ik overigens wel (safari 2.0)

[quote:795598b1c9="mac748"]scrollbalken krijg ik overigens wel (safari 2.0)[/quote:795598b1c9]

Ik ook, maar er is dan al een deel “verstopt” onder de browser.

Als ik deze veranderingen in het css gebruik krijg je scrollbalken maar de site verdwijnt niet aan alle kanten. Wel is de top-margin fixed, om je body-background te laten aansluiten op je content-background (persoonlijk en professioneel heb ik een hekel aan gecentreerde en fixed-size websites, als je dat wilt ga je maar ansichtkaarten ontwerpen :wink:) [code:1:2d35659c1d]body { margin:0; padding:0; background-color: #F9F9F8; background-image:url(http://www.freshface.be/sinkin/images/7.gif); background-repeat: repeat-x; background-position: center -83px; font-family:Helvetica; font-size:11px; color:#063E5B; text-align: center; } #center-container { background-image:url(http://www.freshface.be/sinkin/images/4.gif); background-repeat: no-repeat; background-position: center center; width:770px; height:570px; margin: 16px auto auto auto; position: relative; text-align: left; }[/code:1:2d35659c1d] getest in IE6 en werkt perfekt

De enige oplossing die ik me kan bedenken is gebruik maken van javascript (oei! wat zegt 'ie nu toch weer!)

Standaard de CSS van Mac748 gebruiken (vaste positie) en als javascript aanstaat (via een DOM sniffer te controleren) dan de CSS vervangen voor je gecentreerde verhaal, zolang de hoogte van het canvas (en dus niet het venster!!) groter is dan de hoogte van je #center-container div .

Ik zou het doen door een extra stylesheet met javascript te laten linken die de body en #center-container declaraties voor het gecentreerde verhaal bevatten en die gelinkt wordt NA de standaard sheet.

De javascript guru’s op dit forum weten waarschijnlijk wel
(a) wat de correcte DOM sniffer is
(b) hoe je de hoogte van het canvas kan afvangen en
(c) hoe je dan de extra stylesheet met de centreer declaraties kan laten toevoegen

Dit alles natuurlijk met onobstrusive scripting. In theorie :wink: