Kleine CSS foutjes

Status
Niet open voor verdere reacties.
B

BellaChiCa

Gebruiker
Lid geworden
10 mei 2008
Berichten
8
Hallo,


Zou iemand me kunnen helpe met enkele kleine foutjes?

Ik weet namelijk niet hoe ik dit moet oplossen :s

voorbeeld1 hier zie je dat er 3 albums komen en dat de rest er dan onder valt, heeft wss te maken met de 'li.last' of type gezien deze gebaseerd is op maar 4 albums. Als ik enkel 4 albums plaats dan komt het wel mooi naast elkaar (zie : voorbeeld2), zodra het er meer zijn komen ze na de 3de onder elkaar te staan.

Alvast bedankt!
 
Ik zie in beide gevallen rijen van 3 albums. Met IE7 en Firefox gekeken

Ron
 
Vreemd, dit is bij mij niet het geval, heb het uitgetest met IE7, Chrome en Firefox.

Iemand enig idee hoe dat komt en hoe ik dat kan oplossen?
 
Als je :last-of-type doet dan neem je inderdaad alleen de allerlaatste mee. Wat je nodig hebt is dit
Code: 
.albumBox li:nth-of-type(4n){
padding-right:0;}
Dat pakt ieder vierde li element in .albumBox. (overigens weet ik niet in hoeverre dit door oudere versies van IE wordt ondersteund.)

@Haaren101, bij mij eerst ook, volgens mij was BellaChiCa even iets aan het uitproberen.
 
Laatst bewerkt:
Mooi dat het opelsot is, vergeet niet de vraag (bovenaan) op opgelost te zetten.
 
de omgekeerde oplossing

Hoi BellaChiCa,
Hola, mag ik nog even de handrem aanzetten? ;)


  • Dit werkt uitstekend in Firefox, Chrome, Opera, Safari en IE9.
  • Maar IE7 en IE8, nog ruimschoots in omloop, laten het afweten: die tonen de 3 ipv 4 kolommen. Zie: Netrenderer!

Dat kan kloppen, want deze ondersteunen niet de css3-eigenschap nth-of-type (zie hier, of doe bv. de CSS3 Selectors Test in IE7 of 8).

Tot zover het slechte nieuws. Nu het goede! :)
  • De opmaak was zo ingericht, dat alle linkerkolom foto-boxjes links-lijnend tegen de .albumBox aanzaten, en de foto-boxjes een padding-right gebruikten om op afstand van elkaar te komen.
  • Daartoe moest dan elke 4e foto ontdaan worden van z'n padding-right, om al floatend niet buiten de oevers van de .albumBox naar beneden te vallen.

Maar er valt een Columbiaans eitje toe te passen:
  • De foto-boxjes krijgen de padding aan de linkerkant ipv aan de rechterkant.
  • De meest linkse kolom begint dan aan de linkerkant te veel naar rechts, en er passen nog steeds geen 4 naast elkaar op.
  • Dat wordt opgelost door .albumBox te verbreden met 1 padding-breedte, zodat er 4 naast elkaar kunnen, en vervolgens de hele .albumBox een negatieve margin-left te geven van diezelfde breedte. Dan staat alles weer op z'n plaats.
  • Nu staat alleen de header nog pal tegen de <div id="leftCntr"> aan, wat gecompenseerd wordt door deze weer een positieve margin-left van dezelfde waarde te geven.

Dus niet zo:
marocs-a.png

Maar zo:
marocs-b.png

Het aan de linkerkant transparant ietsje overlappen kan geen kwaad, en zo kunnen alle foto-boxjes hetzelfde blijven zonder dat elke 4e afgezaagd hoeft te worden.
Aldus met css2.1:
Code: 
.albumBox {
   	margin-left: -29px;
   	width: 736px;
	}
.albumBox li {
	padding-right: 0;
	padding-left: 29px;
}
.albumBox .heading {
	margin-left: 29px;
	}

Met vriendelijke groet,
CSShunter
______________
PS!!!
  • Op regel 213 begint uit het niets een nieuwe <!Doctype> declaratie, gevolgd door een <html>, een <head> en een <body> met diversen er in.
  • Op regel 350 eindigt de </html>.
  • Om op regel 351 weer vrolijk met een nieuw Doctype en een nieuwe <html> te beginnen...
  • ... die op regel 374 eindigt met </html>.
  • Daarna komt in regel 380 de <div id="contentCntr"> alsof er niets aan de hand is.
- Ik vond de pagina al zo traag laden. Kudo's voor de foutafhandeling van de browsers, inclusief de IE's! ;)

- En had ik toch even verzuimd m'n handtekening-tips op te volgen: de html-validator en de css-validator éérst, en dan pas knutselen!
 
Laatst bewerkt:
Beste,

eerst en vooral bedankt voor uw bericht en voor de uitgebreide uitleg, begrijp het nu wat beter.

Heb daarnaast uw tips gevolgd en de html fouten grotendeels weggewerkt. De anderen krijg ik momenteel niet opgelost. (zie: http://validator.w3.org/check?uri=h...roup=0&verbose=1&user-agent=W3C_Validator/1.2)

Daarbij kan ik ook de css foutjes niet oplossen gezien ik dan een grote gedeelte moet weghalen (jquery ui, blijkbaar kan dit niet worden opgelost; zie http://forum.jquery.com/topic/jquery-ui-css-61-errors), maar denk niet dat dit een groot probleem is? zie http://jigsaw.w3.org/css-validator/...m=all&warning=1&vextwarning=&lang=nl#warnings
 
Hoi BellaChiCa,

De 4 html-errors
De eerste is, dat de validator graag een <div><select ...>...</select></div> wil zien. Als je om de <select> heen een <div> zet, is de validator tevreden
Bij de tweede error geeft de validator eigenlijk een verkeerd regelnummer op, maar dat kan de validator ook niet weten. Er staat namelijk:
HTML: 
...
   <h3>Nieuwe albums</h3>
   <a href="albums.php">Meer</a>
</div>
                    
<ul>
<ul>
   <li><div class="photo"><a href="artiest.php?artiest=21" ... enz.
De validator vindt dat er op Line 374 (van de tweede <ul>) eerst een <li> moet staan, na de eerste <ul> die ervoor staat.
Maar de eerste <ul> is gewoon een verdwaalde <ul> die er teveel in staat. Als je die weg haalt is de fout ook weg.

De derde en vierde error hebben nu zichzelf opgelost! :)
  • Na een fout geeft de html-validator vaak vervolg-fouten aan, die niet meer bestaan als de fout verholpen is. Dat is erg prettig!
  • Daarom moet je bij het corrigeren van errors ook altijd van boven naar beneden werken: soms zijn er zomaar vanzelf 20 vervolg-fouten verdwenen.

De css-errors en warnings
Het stylesheet marocside.be/websitenieuw/stylesheets/global.css
De css-validator vindt dit ervan.
  • Op regel 175 staat: .maroctube {align:center;}, dat is een echte fout en moet waarschijnlijk zijn: .maroctube {text-align:center;}.
  • De 4 "Parse Errors" op regels 151, 222, 234 en 253 worden ook terecht gesignaleerd. Er staat: .albumBox img.photo img/layout {display: inline;}, wat niet klopt en daarom door de browsers genegeerd wordt.
    Ik vermoed dat dit er door een foutje bij het knippen en plakken is ingekomen, maar zie ook niets mis gaan nu het niet wordt toegepast.
    Misschien moet het voor sommige (oudere?) browsers zijn: .albumBox img.photo {display: inline;}, maar dat weet ik niet zeker; je kunt deze regels weghalen en afwachten tot iemand van de bezoekers begint te mopperen.
  • De melding "Onbekend pseudo-element of pseudo-class :last-of-type" bij regel 249 is de css3-eigenschap om de laatste <li>'s van de div.albums geen padding-right te geven, maar dat is overbodig geworden nu we de hele padding-right hebben afgeschaft. Deze regel kan er dus uit.
De waarschuwingen over de font-family en het kleurgebruik zijn slordigheden van de ontwerper van het stylesheet, maar zie ik ze niet direct schadelijke gevolgen hebben.

Het stylesheet [url]http://marocside.be/websitenieuw/js/JPlayer/skin/jplayer.blue.monday.css[/URL]
De css-validator vindt dit ervan.
  • Loopt vooruit op css3, en heeft browser-specifieke regels aan boord (voor browsers die ook alvast experimenteren met css3). Geeft geen problemen.

Het stylesheet [url]http://marocside.be/websitenieuw/css/custom-theme/jquery-ui-1.8.16.custom.css[/URL]
De css-validator vindt dit ervan, als je laat controleren op css2.1, en vindt dit ervan, als je laat controleren op css3.
  • Behalve de css3 nieuwigheden zijn het weer browserspecifieke codes/hacks, die geen kwaad kunnen. Hier hoeft dus ook niet ingegrepen te worden.

Al met al valt het dus reuze mee, en valt er inderdaad weinig aan te doen als je optimaal wilt profiteren van de nieuwe css3-eigenschappen.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Beste,

De site heeft net een php update gehad (naar 5.3.6 zover ik weet), waardoor ik de bovenstaande fouten nog niet heb gewijzigd. Nu heb ik een ander probleem waar ik eerst vanaf wil komen, het blijkt dat de update mijn website op IE (enkel hier dan) helemaal heeft vervormd, zou ik mogen vragen of u weet hoe dat dit komt?

url

Dit geldt dan enkel voor de index.php bestand, de rest heeft dit niet (bv hier)

Edit: ik zie dat het te maken heeft met het forum, de update heeft het forum (template dan) een beetje om zeep geholpen. Eerst deze dan maar proberen op te lossen..
 
Laatst bewerkt:
Hoi BellaChiCa,
Tja, dat is niet echt iets waar je op zit te wachten. :rolleyes:


  • Het stylesheet van het forum doet het in principe prima, volgens de andere browsers. Daar zou ik niet aan gaan knutselen.
  • Het ziet ernaar uit dat hetzelfde verschijnsel zicht bij IE voordoet op zowel de index-pagina als de forum-pagina, en wellicht ook andere pagina's (niet gecheckt).
  • Het verschijnsel treft alle IE's: bij mij IE7, en volgens Netrenderer ook IE8 en IE9.
  • Maar: als ik een kopie van de index maak, en die upload, doet deze het vlekkeloos in IE !

Zie: marocs-nw2.htm

Dat is toch wel heel merkwaardig! - Maar ik heb 'm! :)

De broncode van de pagina blijkt te beginnen met:
HTML: 
  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
...
enz.
Die rare tekentjes aan het begin betekenen dat de pagina is opgeslagen met een "BOM", een ByteOrderMark. Zie dit topic.

Die is er waarschijnlijk in gekomen doordat de pagina wel een meta-charset met utf-8 heeft, maar zelf niet als (bomvrij) utf-8 is opgeslagen (dat gebeurt o.a. als je de pagina in Kladblok opent en als ANSI opslaat).
De methode om het te verhelpen staat ook in bovengenoemd topic: even door Notepad++ heen halen.

Wat er gebeurt met de IE's, is dat deze er niet tegen kunnen als er ook maar het minste geringste vóór het Doctype staat. Dan schiet IE in de z.g. "quirks mode" (de fratsen-toestand), waarbij de css-standaarden niet meer gevolgd worden en de site-opmaak aardig kan ontploffen. Andere browsers hebben er geen last van, maar laten soms wel de rare tekentjes aan het begin van de pagina zelf zien.

En daarom doet mijn testpagina het wel: deze is correct opgeslagen als utf-8.
Gelukkig geen ernstige zaken dus, en het staat denkelijk ook los van de php-upgrade.

Succes!
Met vriendelijke groet,
CSShunter
_________
PS: de index-pagina heeft twee keer het ByteOrderMark gekregen.
En ja hoor, de forum-pagina heeft het ook: zelfs 3 keer (3 keer aangepast op een Windows-machine?).
 
Laatst bewerkt:
Beste,

Hartelijk bedankt voor uw uitleg; had al een idee dat het daaraan zou liggen. Maar; welke pagina's moet ik dan weer opnieuw uploaden met deze wijziging?

Heb namelijk 10000 bestanden (als het aankomt op het forum dan vooral); weet niet waar ik moet beginnen.

Of geldt dit alleen voor de hoofdpagina (index.php?)

Alvast bedankt ! :)

Edit: heb enkel de index pagina veranderd op de hoofdpagina en die doet het al. Nu dat nog op het forum proberen op te lossen :) enkel index.php veranderen haalt niets uit.

Mercikes!
 
Laatst bewerkt:
Opgelost!

Heb ze toch allemaal doorgenomen, language/common.php daar zat de fout (opgeslagen als UTF-8) :)

nu nog enkel de bovenstaande foutjes oplossen.

CSShunter, je bent érg bedankt!
 
Hoei,
Hoe het met het forum moet zou ik niet weten. Het is erg afhankelijk van hoe het CMS in elkaar zit dat de forum-php toestanden aanstuurt. Dat valt vanaf de buitenkant niet te zien.


  • Als elke forum-pagina begint met één en dezelfde php-include waarin het ByteOrderMark zit, dan zou het op te lossen moeten zijn door dat ene php-bestand te schonen.
  • Maar als elke forum-pagina (of rubriek) een zelfstandig begin met ByteOrderMark, Doctype enz. heeft, wordt het lastiger. Dan zou je op zoek moeten gaan naar een tool die dat als batch-opdracht kan uitvoeren (na een stevige backup!) op alle betrokken pagina's (Google zegt: clean bom in batch).

Er schijnen ook php-oplossingen voor bom-verwijdering te zijn, maar daar heb ik niet genoeg verstand van. Ik vond o.a. deze:

PHP: 
<?php
// Remove Byte Order Mark
function removeBOM($str="")
{
        if(substr($str,0,3) == pack("CCC",0xef,0xbb,0xbf))
        {
                $str=substr($str,3);
        }

        return $str;
}
?>
Voor eventueel twee of meer BOMmen achter elkaar zou zoiets dan aangepast moeten worden.

Om hier uitsluitsel over te krijgen, zou je een vraag kunnen stellen op de php-afdeling van het helpmij-forum, want dit valt niet meer onder "Kleine css-foutjes". ;)

Met vriendelijke groet,
CSShunter
 
Haha, inderdaad. Sorry voor de moeite!

En je bent héél héél erg bedankt !!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan