[HTML/CSS] Website laad niet altijd het zelfde(willekeurig)?

[moijamie]

verwijdert.

[ Voor 96% gewijzigd door moijamie op 20-08-2017 15:24 ]

[André]

Zet een clear:both op je hr

[moijamie]

André schreef op zondag 18 mei 2014 @ 20:06:
Zet een clear:both op je hr

Ik heb het geprobeerd maar het probleem blijf alleen word de hr mee naar beneden gedrukt met de 3 links. ik laat hem nu en en keer verversen met :

<script type="text/javascript">
if(window.location.href.substr(-2) !== "?r") {
window.location = window.location.href + "?r";
}
</script>


en dan zie ik het af en toe fractie van seconde normaal voor dat hij ververst. nu werkt het dus in principe allee als iemand toevallig een nettere manier weet hoor ik het graag :D!

[André]

Zet de H1 eens na div#menu in de code.

[html]

Is het een optie om de <hr /> weg te halen en dan een border-bottom op die menu/header div te zetten?

[C0rnelis]

Hoi Jamie, heb je al eens gekeken naar welke CSS-rules worden toegepast op de misplaatste elementen wanneer het verkeerd wordt weergegeven ? Druk maar eens op appeltje + option + i om daar eens naar te kijken! Ik weet niet hoevaak het "willekeurig" verkeerd gaat, maar ik zie wel dat je je CSS-bestand cachet, ging het daar toevallig mis toen je het bestand aan het wijzigen was ? Probeer het eens zonder caching. Je kunt in ieder geval in twee losse tabs de goede en foutieve weergave dan naast elkaar vergelijken of er ook andere CSS wordt toegepast.

Drie verbeterpuntjes:
• Je scroll-mechanisme werkt niet goed op een 1440p scherm, zie http://oi58.tinypic.com/30blkk7.jpg
• Open http://moijamie.nl/?r#profiel of http://moijamie.nl/?r#projecten, druk op verversen en kijk eens wat er met de url gebeurd
• Je font-family: fantasy is niet aanwezig op elke computer (je kunt zien wat er gebeurd met je fonts op bovenstaande tinypic) - probeer hier een webfont vervanging voor te vinden!

[sschalkwijk]

Het lijkt mij dat die nu soms blijft hangen op de combinatie van een position static en een float:right op je menu. Al zou dat natuurlijk gewoon moeten werken. Ik krijg het probleem ook enkel in Chrome en Opera(beide Blink-engine) bij de eerste keer inladen op een nieuw tab. Na refreshen is het vervolgens weg.
In Firefox of Safari krijg ik het probleem niet gereproduceerd..

Ik denk dat je het probleem oplost door je #header h1 een float:left; mee te geven en de padding-top:10px; te verwijderen. Door een float voor zowel rechts als links te gebruiken komen ze standaard op 1 regel mits de ruimte daarvoor is, in het geval dat de website responsive moet zijn, moet je daarop aanpassingen doen dmv media-queries.

C0rnelis schreef op donderdag 22 mei 2014 @ 21:50:
• Je font-family: fantasy is niet aanwezig op elke computer (je kunt zien wat er gebeurd met je fonts op bovenstaande tinypic) - probeer hier een webfont vervanging voor te vinden!

@font-face is natuurlijk ook een optie. Is tegenwoordig prima werkend te krijgen in elke browser.

[R4gnax]

moijamie schreef op zondag 18 mei 2014 @ 18:33:
Weet iemand misschien waardoor dit komt?

De webkit engine heeft problemen met hardware accelerated rendering en het repainten van content die position:fixed is. Dat gaat semi-willekeurig fout waardoor zaken niet gerenderd worden of op verkeerde plekken gerenderd worden.

Voeg op elementen die zo gepositioneerd zijn ook eens backface-visibility:hidden toe. Dit forceert de engine om alle inhoud van zo'n element samen in een nieuwe laag te zetten om door de compositor af te laten handelen. Dat voorkomt het probleem.

[ Voor 13% gewijzigd door R4gnax op 22-05-2014 22:42 ]

[C0rnelis]

sschalkwijk schreef op donderdag 22 mei 2014 @ 22:09:
[...]

@font-face is natuurlijk ook een optie. Is tegenwoordig prima werkend te krijgen in elke browser.

Jep, met webfont bedoel ik ook dat je de client de font-bestanden laat downloaden (i.t.t. "web-safe" font), maar misschien was het woord vervanging misleidend.

Ik krijg het probleem sowieso niet geproduceerd in Chrome (35.0.1916.114 m). Tijdens het laden van de pagina zie ik alleen dat de header iets hoger is bij het laden en dat is het enige moment dat het menu niet op de juist plek wordt getoond.

[sschalkwijk]

C0rnelis schreef op vrijdag 23 mei 2014 @ 09:51:
[...]


Jep, met webfont bedoel ik ook dat je de client de font-bestanden laat downloaden (i.t.t. "web-safe" font), maar misschien was het woord vervanging misleidend.

Ah ik dacht dat je iets in de vorm van bv Google-Fonts bedoelde door inderdaad het woord "vervanging".

C0rnelis schreef op vrijdag 23 mei 2014 @ 09:51:
[...]
Ik krijg het probleem sowieso niet geproduceerd in Chrome (35.0.1916.114 m). Tijdens het laden van de pagina zie ik alleen dat de header iets hoger is bij het laden en dat is het enige moment dat het menu niet op de juist plek wordt getoond.

[afbeelding]

Moet zeggen dat dat nu bij mij in Chrome onder Windows ook het geval is. Zodra de "?r" wordt toegevoegd is het weer goed.
Heb gisteren getest via Chrome OSX en daar bleef die dus wel hangen zonder refresh.