Schone nieuwe install, layout verkeerd.

[peterkuli]

• Adres van je forum: http://
  Event. modificaties op je forum:
  Wanneer ontstond het probleem?Vanaf het begin
  phpBB versie: 3.0.8
  
  
  Heb je onlangs iets veranderd aan je forum? Nee, enkel geinstalleerd
  Wat is het probleem?

Als ik een schone installatie van phpBB 3.0.8 uitvoer, dus verder niks aanpas aan de layout of zelfs maar een ander theme kies, is de layout niet goed. Het lijkt of er een een linkse margin aanwezig is, waardoor al het andere opschuift en vervolgens zelfs op een andere regel wordt weergegeven dan waar het zou moeten. Het plaatje maakt het wellicht iets duidelijker:



Zoals te zien is, zijn de woorden 'Forumoverzicht' zowel aan de boven- en onderkant en de titel van het onderwerp naar rechts verschoven.

Iemand enig idee hoe dit kan?
De installatie ging verder goed, overal schrijfrechten en geen foutmeldingen gekregen. phpBB draait op SQL Server 2008 met PHP versie 5.3.5

[Ger]

Heb je een link naar je forum?

[peterkuli]

Dat heb ik uiteraard wel, maar het forum is niet publiek en ik wil niet zomaar de url hier neerzetten. Ik snap dat het nu een beetje lastig is om te bepalen wat er fout zit maar de url bekend maken is geen optie.

[Paul]

Stuur dan de url naar mij/ger, want zonder url wordt het gewoon lastig te helpen.

[peterkuli]

Het forum maakt deel uit van een klantenportaal en zit dus achter een login.

Ik heb inmiddels meer informatie over het probleem; de padding wordt veroorzaakt door een 'user agent stylesheet', in het bijzonder de volgende regel: -webkit-padding-start: 40px;

Die 40 pixels zijn precies de ruimte die wordt ingesprongen.



Nu dus de vraag: hoe dit aan te passen?

[Ger]

Normaliter zou dit al geregeld moeten zijn door de browser reset die onderdeel is van ProSilver. In styles/prosilver/theme/common.css staat bovenaan als het goed is:

Code: Selecteer alles

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

Misschien kun je daaraan onderstaande toevoegen, al weet ik niet zeker of dat gaat helpen. In theorie echter wel.

Code: Selecteer alles

ul, menu, dir {
	-webkit-padding-start: 0 !important;
}

Vergeet natuurlijk niet het thema te vernieuwen in het beheerderspaneel.

[peterkuli]

Common.css ziet er nu zo uit:

Code: Selecteer alles

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
	-webkit-padding-start: 0 !important;
}

ul, menu, dir {
   -webkit-padding-start: 0 !important;
}

Dat heeft wel iets geholpen, maar nog niet zoals het hoort:



Kan het niet een andere reden hebben? Het lijkt mij namelijk hoogst onwaarschijnlijk dat er 'fouten' zitten in de ProSilver style. Ook omdat er bijzonder weinig over dit probleem te vinden is. Om een of andere reden berekent Chrome (maar ook FireFox) deze padding zelf; ik kan het in de developer tools van Chrome niet uitzetten. Heeft dit iets te maken met het feit dat het een user agent stylesheet is?

Overigens; SubSilver 2 lijkt het wel goed te doen.

[Ger]

Heeft dit iets te maken met het feit dat het een user agent stylesheet is?

Jep. Weet je een beetje hoe CSS werkt? Het staat voor cascading stylesheets, ofwel een verzameling van stylesheets wat tot een uiteindelijk resultaat leidt. Daarbij geldt dat bepalingen die later komen eerdere bepalingen over hetzelfde element overschrijven.

User agent stylesheets komen als laatste in de rij en gaan dus boven de stylesheet van de pagina. Dat is hetgeen wat bij het probleem lijkt te veroorzaken. Door de bepaling !important mee te geven aan een eigenschap, voorkom je dat die later nog eens wordt overschreven door de user agent.

Daar moet je over het algemeen zeer terughoudend in zijn, vandaar dat ik het in eerste instantie bij 1 regeltje hield. Blijkaar hielp het niet voldoende, dus dan gaan we een stapje verder. Maak dit er eens van:

Code: Selecteer alles

ul, menu, dir {
   -webkit-margin-before: 0 !important;
   -webkit-margin-after: 0 !important;
   -webkit-padding-start: 0 !important;
}

PS: haal deze regel even weg bij * {

Code: Selecteer alles

-webkit-padding-start: 0 !important;

Dat kan ongewenste neveneffecten hebben. Het sterretje staat namelijk voor alle elementen en dat heb je niet nodig.

Wijziging: ps-je

[peterkuli]

Nu ziet common.css er als volgt uit:

Code: Selecteer alles

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;	
}

ul, menu, dir {
   -webkit-margin-before: 0 !important;
   -webkit-margin-after: 0 !important;
   -webkit-padding-start: 0 !important;
}

In de developer tools zie ik nu dat er bepaalde -webkit regels zijn doorgestreept, waaronder de 40px; padding start. Echter, het resultaat ziet er hetzelfde uit als in mijn vorige post.

Waarom heeft niemand dit eerder opgemerkt? Ik vind het een apart verhaal en ik geloof eigenlijk nog steeds niet dat het aan de css van phpBB ligt.

Kijkende naar dit plaatje:

Zie je bijv. dat de titelbalk te hoog is, de uitlijning niet goed is en 'geen berichten' op een verkeerde plek staat. Er is dus meer aan de hand...

[Ger]

Heb je ook weer het thema vernieuwd (beheerderspaneel, tabblad stijlen, stijlonderdelen, klik op vernieuw achter prosilver).

[peterkuli]

Jazeker doe ik dat, ik vernieuw Templates, Themas en Afbeeldingsets bij elke css wijziging.

EDIT:
De uitlijning heb ik nu ook redelijk onder controle:

Code: Selecteer alles

dd {
	-webkit-margin-start: 0 !important;
}

Maar nog steeds is de titelbalk te hoog.

Het is duidelijk dat er iets niet goed zit. Ik ga echt niet elke keer kijken of de layout goed is, kijken welke css-regels daarbij horen, dat aanpassen/toevoegen in de css, vernieuwen en maar hopen dat het goed is.

Dit is niet de eerste keer dat ik phpBB installeer. Dit probleem heb ik nog niet gehad. Toen heb ik het geinstalleerd op een MySQL server, php versie 5.3.6 en phpBB versie 3.0.8 (wel engels).

[Ger]

phpBB is met beide servers compatible en ik heb nog niet eerder van zulke problemen gehoord. En ik draai toch al mee sinds de eerste BETA van 3.0 (en 2.0 ook, maar da's minder relevant).
Vandaar ook dat ik graag het forum zelf zou bekijken, zodat ik uit de eerste hand kan zien wat er mis is. Op deze manier is het toch een beetje gissen.

[peterkuli]

Ik heb je een PB gestuurd met de link.

[Ger]

Ik zie het.
Als ik naar de broncode kijk, zie ik er niets vreemds aan. Het lijkt ook niet specifiek aan de user-agent te liggen, want ongeacht de browser gaat het toch mis....

Heel eerlijk: hier heb ik vooralsnog geen antwoord op.

[peterkuli]

Ok! Bedankt in ieder geval dat je het even hebt willen bekijken.

[ferdri3]

Ik heb hier wel vaker last van gehad.. en nu opeens weer.. Bij mij duikt dit probleem altijd op als ik in common.css iets verander (maakt niet uit wat).. Vandaag probeerde ik de width te veranderen van 1024 naar 900 en toen zag ik dat ik die padding weer kreeg.. Toen heb ik die 900 weer trg veranderd naar 1024 en weer geupload en thema weer vernieuwd en de buffer leeggehaald, Opera gestart (omdat deze nog nooit de website bezocht had) en nog steeds het probleem..

de stijl compleet deleten en weer opnieuw uploaden lijkt tot nu toe de enige oplossing :s
Iemand anders die hier meer ervaring mee heeft?

EDIT:
Heb net wat nieuwe dingen geprobeerd.... even wat dingen op een rij:
- stijl deleten en opnieuw uploaden heeft geen zin ALS deze stijl al eens is aangepast, ook al heb je alles precies weer terug gezet zoals het orgineel was. (alleen een compleet nieuwe werkt)
- ik opende common.css in expression web 4 (en het ging dus fout)
- nu heb ik het in notepad geprobeerd en het lukt!!!!

nu de vraag:
veranderd er iets in common.css als ik deze open, iets verander en opsla in een edittor?
(behalve dan wat je zelf veranderd hebt).. in andere woorden, voegen deze edittors iets aan de file toe uit zichzelf?

[Paul]

Open even een nieuw topic, i.p.v. een topic van een tijd uit te kapen.