layout website klopt niet op een mac

[mitchmink]

Hallo,

voor een klant heb ik een website gemaakt. Op een PC is dit prima te zien en werkt alles gewoon, maar op een mac wordt de content naar rechts geplaatst en komt dus buiten de content zone.

Kan iemand mij hier mee helpen ? Alvast bedankt.

Cheers,

Mitchell

 

[bluesbrother]

Zelfse de layout op verschillende versies van Internet Explorer verschillen van elkaar.
Elke Browser bakker, implmenteerd standaarden op zijn manier.

Ik neem aan dat je Safari op de mac gebruikt ? (ben niet thuis op mac)
Ga op zoek naar CSS safari Hacks

Je kan deze hacks dan met een IF statement in je CSS code opnemen,
Als het Safari is, dan gebruik deze CSS regels.

http://www.webmaster-talk.com/css-forum/104362-if-safari-help-friends.html

 

[Naarling]

Kan iemand mij hier mee helpen ?

Zonder de website te zien of te weten in welke browser het mis gaat?
Nee, dat gaat niet echt.

Elke Browser bakker, implmenteerd standaarden op zijn manier.

Dat valt tegenwoordig wel mee. Het is vooral IE, en dan zeker de oudere versies, die voor problemen zorgt.

Je kan deze hacks dan met een IF statement in je CSS code opnemen,
Als het Safari is, dan gebruik deze CSS regels.

eh? Ten eerste horen die IF regels in de HTML thuis en niet in de CSS, ten tweede werken ze, zoals ook op dat forum gezegd wordt, alleen voor IE. Zonder javascript te gaan gebruiken zou je hooguit -web- voor de regels voor Safari in de CSS kunnen zetten. Maar dan worden ze wel door alle webkit browsers gelezen, dus ook Chrome. In principe moet het helemaal niet nodig zijn voor Safari extra regels toe te voegen. Ik vermoed dat deze site gewoon slecht werkt in alles wat niet IE is.

 

[mitchmink]

nouja kijk maar of je vermoeden klopt dan :

klik

Is niet de eerste keer dat ik een website maak overigens dus denk dat het allemaal wel goed zit op IE / Firefox en de rest op PC. snap alleen niet hoe die zo kan zijn op een mac... ik heb toch geen gekke dingen in de CSS staan...

 

[Naarling]

Maar wel 158 fouten in je xhtml http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

<br> is hartstikke fout binnen xhtml, dat moet <br/> zijn. Repareer dat eerst, misschien dat het helpt (ik heb hier geen Safari dus kan het niet testen.)

In xhtml moet ieder element met een / worden afgesloten. <br> moet dus <br/> zijn, <hr> <hr/> en zo voorts.

Er ijn trouwens kennelijk ook nog wat andere elementen verkeerd afgesloten. Dat soort fouten kan heel onvoorspelbare gevolgen hebben.

 

[csshunter]

En ook wat css-foutjes, zegt de css-validator.

Met zoek & vervang is gelukkig het meeste aan html-errors snel gerepareerd, door al die <br><br><br><br><br><br><br>'etjes achter elkaar!

Met vriendelijke groet,
CSShunter

 

[mitchmink]

Oke thanks. ik ga de fouten even uit de xhtml halen, css zijn niet echt noembare fouten lijkt me...

ik laat weten als ik het is gelukt... heeft iemand een mac om voor mij te kijken ?

Cheers.

 

[Naarling]

heeft iemand een mac om voor mij te kijken ?

Cheers.

Je kunt safari ook op windows installeren.

 

[csshunter]

'ns even gekeken ... 't zit 'm niet in de html en css-fouten, blijkt. Jammer!

... ik heb toch geen gekke dingen in de CSS staan...

Nou, eerlijk gezegd vind ik het wel wat onoverzichtelijk, en al die "display: table-cell" dingen (m.i. gewoon overbodig) maken het troubleshooten ook niet eenvoudiger.
Maar heb je al eens geprobeerd:

.content-layout {
   ...
   clear: both;
   ...
   }

Test-screenshot in Safari.

Met vriendelijke groet,
CSShunter

PS:
Ik zag al bladerend dat het om een FairTrade product gaat. Prima! :thumb:
Maar ik kwam het een beetje toevallig tegen - had ik het eerder gezien, dan was mijn belangstelling méér gewekt!
Er kan nog wat accent op komen door het FairTrade-logo'tje op méér plaatsen in te bakken, hetzij als klikbaar logo'tje naar de FairTrade pagina, hetzij gewoon opgenomen in de images:

• voor de FairTrade-aanhangers een extra stimulans,
• voor de nog-niet FairTrade-aanhangers een prikkel om er eens kennis van te nemen.

Goed voor het goede doel, goed voor het image, en in beide gevallen kan het geen kwaad voor de omzet!
Zeker op de FairTrade pagina zelf zou het logo niet mogen ontbreken. Proost!

 

[mitchmink]

thank voor de reactie! ik zal de css code eens proberen...

Ik heb alle fouten eruit gehaald en de css wat aangepast. naar vaste pixels in plaats van procent. De home page is blijkbaar goed maar de andere pagina's gaan niet helemaal goed...

het hele geheel verschuift een halve pagina naar rechts...

EDIT : ik heb de css regel erbij gezet. zou je kunnen kijken of het nu wel werkt ? thanks!

Ik zag al bladerend dat het om een FairTrade product gaat. Prima!
Maar ik kwam het een beetje toevallig tegen - had ik het eerder gezien, dan was mijn belangstelling méér gewekt!
Er kan nog wat accent op komen door het FairTrade-logo'tje op méér plaatsen in te bakken, hetzij als klikbaar logo'tje naar de FairTrade pagina, hetzij gewoon opgenomen in de images:
•voor de FairTrade-aanhangers een extra stimulans,
•voor de nog-niet FairTrade-aanhangers een prikkel om er eens kennis van te nemen.

Thanks! ik zal er eens naar kijken!

 

[mitchmink]

ik heb de mogelijkheid om alles te testen op adobe browselab..

in firefox op een MAC OS gaat het goed maar Safari in Windows en Mac gaat maar steeds fout.. zie screenshot...

 

[mitchmink]

Volgens mij heb ik het opgelost!

ik heb het volgende gedaan:

@media screen and (-webkit-min-device-pixel-ratio:0){

.content-layout {

   clear: both;

   }

}

 

[csshunter]

Bijna!
Onder Windows doet Safari het nog niet: screenshot.
Maar als je die -webkit-min-device-pixel-ratio:0 er af laat,

<style type="text/css">
.content-layout {
   clear: both;
   }
</style>

... doet ie het gewoon wel in Safari onder Windows: screenshot.

• Mijn versie: http://developerscorner.nl/csshunter/mong-nw2.htm met alleen bovenstaande css toegevoegd.

Ook bij Browsershots.org komt hij er goed van af (ook de oude Safari 3): kijk. - Jammer dat browsershots op dit moment geen Safari op Mac kan testen.

Met vriendelijke groet,
CSShunter