CSS website ziet er soms vreemd uit

[Gunneweg]

Hallo,

Ik maak gebruik van onderstaande CSS om mijn website vorm te geven.
Ik krijg geregeld klachten van mensen dat alle onderdelen van de website
niet goed geplaatst worden. Dat is dan wel te verhelpen met CTRL +
scroll wieltje van de muis, maar ik zou het eigenlijk altijd goed willen
laten zien zodat alles een vaste plaats heeft.
Ik kom er niet uit.
De website waar het over gaat is www.aspartaam.nl

Ik hoop dat iemand raad weet.



#footer{
clear: right;
width: 100%;
background: #fff8ee;
color: #fff8ee;
text-align: right;
padding: 4px 0;
}

#footer a{
color: #fff8ee;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

#maincontainer{
position: fixed;
top: 0px; /*Set top value to HeightOfTopFrameDiv*/
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto;
background: #fff8ee;
}

#lefttable{
float: left;
width: 33%; /*Width of left column in percentage*/

}

#middletable{
float: left;
width: 34%; /*Width of middle column in pixels*/

}

#righttable{
float: right;
width: 33%; /*Width of right column in pixels*/
margin-left: -15%; /*Set margin to that of -(RightTableWidth)*/

}

 

[grumbkow]

De combinatie van HTML en CSS is sowieso een beetje vreemd.
Erg onduidelijk om nu alles door te lopen.

Eerst eens kijken of er fouten in je HTML zitten.
Zie hier het resultaat

En hier het resultaat voor de controle van je css

Fouten in je HTML en CSS zijn nooit goed en zorgen voor verkeerde interpretatie van je website door de browsers.
Als alle fouten er uit zijn en er zijn nog steeds problemen, dan is dat waarschijnlijk alleen in Internet Explorer en dat kun je dan oplossen met speciale stylesheets voor IE browsers.
Maar eerst alle 62 html en 6 css errors er uit halen

 

[Gunneweg]

Volgens de Tidy html validator heb ik in de HTML geen enkele fout en werkt de website bij
mijzelf zoals hij zou moeten werken in Firefox 14.0.1. De W3C validator is behoorlijk streng zoals
je weet.

Wat de CSS betreft staan er alleen fouten m.b.t. Dezelfde kleur en achtergrondkleur in twee contexten
en dat is nou net iets wat ik niet begrijp.

 

[grumbkow]

Hoezo streng?
De W3C validator leest je pagina zoals de browser dat zou doen.
In jou gevla als HTML 4.01 Strict dit omdat je dit zelf in je doctype hebt staan.

Zet je de validator op Transitional, de wat meer vergevende validatie dan heb je alsnog 15 errors.
Minder dan Transitional mag het echt niet wezen dus los eerst deze 15 errors op.
De css errors zijn vaak wat overdreven ja en hoef je niet altijd op te letten.

http://validator.w3.org/check?uri=h...sitional&group=0&user-agent=W3C_Validator/1.3

Tevens gebruik je deprecated elementen als <center> dit kun je veel beter vervangen voor een <p> met text-align: center; in de CSS.

 

[Gunneweg]

Hallo grumbkow,

Dat was wel even een werkje, maar met de onderstaande "fouten" weet ik geen raad.
Als ik nu <p> gebruik voor een paragraaf dan staat uiteraard de gehele tekst gecentreerd.
Ik was gewend om te sluiten met </p> maar dat wordt ook niet goed gekeurd.
Website bevat nu in ieder geval minder fouten.

Error Line 167, Column 72: end tag for element "P" which is not open
<p><div class="note">Light frisdrank schadelijk tijdens zwangerschap</p></div>

Line 362, Column 72: document type does not allow element "DIV" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
…artikelen/zino.html"><div class="note">Biologisch eten<br>in Rotterdam</div><b…

3 waarschuwingen, waar ik ook niet zo veel mee kan

Warning Line 283, Column 126: unclosed start-tag requires SHORTTAG YES
…="390" src="http://www.youtube.com/embed/ytUO8WC6-38" frameborder="0" </iframe>

De laatste twee waarschuwingen is de code van de nieuwsbriefprovider, kan ik ook niet zoveel mee.

Terug naar mijn uiteindelijke vraag, die nog niet is opgelost door het bewerken van de fouten.

 

[grumbkow]

De eerste error komt omdat je de code niet afsluit zoals het hoort
Je hebt nu

<p><div></p></div>

Dit moet zijn

<p><div><?div></p>

2e error zal ik meer code van die regels moeten zien.

3e waarschuwing is waarschijnlijk omdat hij met /> moet gesloten worden ipv </iframe>

HTML vereist trouwens geen close tags. Dit is meer xHTML

 

[csshunter]

Hoi Ed en grumbkow,

Op dit moment staat er als Doctype op de homepage:

<!DOCTYPE "html 4.01 transitional">
<head>
... enz.

Dat moet zijn:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<head>
... enz.

Dan kan de html-validator van w3c er ook mee overweg (kan anders het document niet goed controleren).

=======
Error Line 167, Column 72: end tag for element "P" which is not open
Het mag ook niet zijn:

<p><div>...</div></p>

Want een <div> is een block-element dat niet in een <p> (ook een block-element) mag zitten.
Binnen een <p> mag wel een <span>, dus het zou kunnen worden:

<p><span class="note">Light frisdrank schadelijk tijdens zwangerschap</span></p>

Maar in dit geval is een <span> niet echt nodig, want de class="note" kan ook rechtstreeks aan de <p> zelf gekoppeld worden:

<p class="note">Light frisdrank schadelijk tijdens zwangerschap</p>

=======
Line 362, Column 72: document type does not allow element "DIV" here;
Hier zit een <div> binnen een <a>, wat ook niet mag; ook hier kan er een <span> van worden gemaakt.

=======
Warning Line 283, Column 126: unclosed start-tag requires SHORTTAG YES
Er staat nu:

<iframe title="YouTube video player" ... enz. ... frameborder="0" </iframe>

Daar wordt de > vlak voor de </iframe> gemist:

<iframe title="YouTube video player" ... enz. ... frameborder="0"[B][COLOR="#B22222"][SIZE=4][FONT=Arial]>[/FONT][/SIZE][/COLOR][/B]</iframe>

=======
Maar met dit soort verbeteringen is inderdaad het hoofdprobleem niet opgelost.
Dat zit hem in de html-paginastructuur en de bijbehorende css: het model klopt niet meer (is i/d loop der tijd te ingewikkeld geworden).
Complicerende zaken zijn o.a.:

• Soms is een {position:fixed;} toegepast.
• Soms zijn in de breedte percentages toegepast.
• Soms zijn de zijkanten op vaste pixel-maten ingesteld.
• Deze dingen lopen voor de verschillende pagina-elementen nogal door elkaar.

Helaas zie ik niet zo gauw een manier om dat even snel op te lossen - ik ben bang dat hiervoor een algehele renovatie nodig is (= in de praktijk: herbouw...).

Met vriendelijke groet,
CSShunter

 

[Gunneweg]

Bedankt csshunter en grumbkow.

Ik kreeg van W3C de volgende melding:

Congratulations
The document located at <http://www.aspartaam.nl/> was tentatively checked as HTML 4.01 Transitional

Nou dat vind ik wel een felicitatie waard (voor jullie) :thumb:
Er zijn nu nog een aantal waarschuwingen maar geen fouten.

In de de CSS zitten nog wel een aantal fouten en een flink aantal waarschuwingen.

Csshunter bedankt voor je zeer duidelijke uitleg, daar kon ik wat mee.

 

[grumbkow]

@CSSHunter ik bedoelde die <div> in de <p> ook slechts als voorbeeld dat de code wel semantisch opgebouwd moet worden.
Ik zal al te wachten op je reactie, want jij hebt altijd het geduld problemen zo mooi te omschrijven en op te lossen =)!

@Gunneweg
Je weet nu wat er fout ging/gaat en hoe je de problemen kunt omzeilen dat is al heel wat.
Fijn dat we je kunnen helpen

 

[Gunneweg]

Ik ben druk bezig met de wijzigingen in de websites. Ik heb wel de goedkeuring van
W3C, dus geen fouten meer, maar met het volgende probleem weet ik geen raad.

Als ik op mijn PC de CSS van de drie kolommen pagina heb veranderd zodat het
goed werkt, blijkt het na het uploaden naar website absoluut niet te werken en komt
het oude onderwerp weer tevoorschijn.
Ik heb de PC uitgeschakeld zodat de pagina niet in de cache kan zitten, tevergeefs

Ik had een kopie van de index.html gemaakt, deze bewerkt toen de oude index
verwijderd en indexkopie hernoemd. Meerdere malen heb ik dit herhaald.

Kan er niet achter komen wat de oorzaak daarvan is.

 

[csshunter]

Hoi Ed,

Ik heb de PC uitgeschakeld zodat de pagina niet in de cache kan zitten, tevergeefs

Als je de PC uit- en aanschakelt, is inderdaad de cache/buffer van het werkgeheugen weg.

Maar er kan nog steeds een "cache" in de browser zitten: de Tijdelijke Internet Bestanden.

• Firefox: menu Extra > Recente geschiedenis wissen ... > (wissen wat je weg wilt hebben, zoals de offline websitegegevens!).
• Internet Explorer (7): menu Extra > Internetopties > Tabblad Algemeen > Browsegeschiedenis > knop Verwijderen... > (minstens de Tijdelijke internetbestanden).

Dan is er zeker niets meer op je PC blijven hangen. - Probleem dan weg?

(Veiligheidshalve wis ik altijd alles voordat ik een browser afsluit.)

Met vriendelijke groet,
CSShunter
_____________
Uit de site haal ik op dit moment:

• Laatste wijziging van de pagina zelf (www.aspartaam.nl/index.html):
  dinsdag 14 augustus 2012 15:42:51
  
  
• Laatste wijziging van het stylesheet (www.aspartaam.nl/styles/stylestest.css):
  dinsdag 7 augustus 2012 23:27:03

Klopt dat? Zo nee, dan is er iets misgegaan bij het uploaden (andere naam? / naar een andere map?)

 

[Gunneweg]

Hoi CSShunter,

Dacht ik dat ik de website nu voor elkaar had, blijkt:

Laatste wijziging van het stylesheet (www.aspartaam.nl/styles/stylestest.css):
dinsdag 7 augustus 2012 23:27:03

de dader te zijn. Op de een of andere manier dacht ik dat ik zoals ik in het vorige bericht
schreef dat ik de wijzigingen van "stylestest2.css zoals ik het bij de veranderingen
genoemd had op de website hernoemd had naar stylestest.css.

Als het goed ik heb ik nu de klachten over het niet goed plaatsen van de site
alvast in FireFox voor elkaar. Maar in IE9 blijkt het er nog niet uit te zien.

Wil ik wel aan werken maar weet niet waar ik moet beginnen, want het is niet
mijn browser. Ik werk denk ik al 10 jaar met FF.

Weer bedankt dat je me uit de brand hebt geholpen

 

[csshunter]

Hoi Ed,
Ja, het stylesheet staat nu op: dinsdag 14 augustus 2012, 20:00:17. :thumb:

Ik ga nog even loeren naar Internet Ex, maar ik heb alleen IE7 (hoewel: als iets in FF en in IE7 draait, gaat het in 9 van de 10 gevallen ook goed in IE8 en IE9).

Bevindingen volgen!
CSShunter

 

[Gunneweg]

Hoi CSShunter

Ik ben zelf ook op internet aan het zoeken hoe de verschillen zijn op te lossen, maar dat blijkt niet eenvoudig te zijn.
Veel kaf onder het koren.:shocked:

 

[csshunter]

Hoi Ed,
Ik moet zeggen: met de laatste css-opmaak is de site met sprongen vooruit gegaan: een heel verschil met een paar maanden geleden! Pluim! :thumb:
Jammer alleen dat Internet Explorer dwars ligt.

Dat zit 'm gedeeltelijk in de allereerste regel vóór het Doctype. Deze forceert Internet Explorer naar de "quirksmode" (de fratsen-toestand), en dat moeten we juist niet hebben. Ook IE moet zich baseren op de standaard van css2.1. De allereerste regel moet daarom geschrapt worden; heeft verder geen consequenties.
Dit scheelt al wat (de pagina komt zo ook in IE in het midden te staan).

Verder zal het ook zitten in de wat merkwaardige <div>-structuur waarmee de pagina is opgebouwd, gedeeltelijk met absolute posities (dat is iets waar IE nooit goed mee overweg kon).

En ik kwam een paar advertentieblokken tegen, die niet bestaan en onzichtbaar zijn in andere browsers. Ze zitten via javascripts in <iframe>'s waarin via javascripts lege andere <iframe>'s zitten (!). Een soort Droste cacao-blikjes effect, maar dan zonder inhoud in het binnenste blikje.
Desondanks pikken ze wel (spook-)ruimte in waar IE niet tegen kan.

Maar in principe kan het goed komen als een wat ander pagina-model wordt gebruikt.

• In de praktijk is het even klussen, want zowel de html als de css moet gedeeltelijk omgebouwd worden.
• Ik ben al een stukje op weg.

Als ik iets van resultaat heb, zal ik het hier melden (zal nog wel even wat tijd overheen gaan).

Met vriendelijke groet,
CSShunter

 

[Gunneweg]

Hoi CSShunter,

Bedankt voor het compliment.

Door de regel met "quirksmode" weg te halen ziet het idd ineens een
stuk vriendelijker uit in IE.

De regels met <iframe... kan ik niet ontdekken, waarschijnlijk door dat
ik er het programma niet voor heb.

Ik kan ook nog wel in de CSS duiken voor die absolute posities

Zou het zin hebben om de website ook nog geschikt te maken voor mensen
met een 800 x 600 monitor? Of zullen dat er niet zoveel meer zijn.

Fijn dat je nog aan de IE weergave wil klussen.

 

[csshunter]

Hoi Ed,
Van de mensen met een desktop zal er nog nauwelijks iemand zijn die op 800*600px zit. Dit formaat komt niet meer voor in de statistieken.
Maar de site is wel zo te maken dat je 'm zonder pijn op 800*600 kunt lezen zonder links-rechts te hoeven scrollen: als de linkerkolom en de inhoud-kolom samen maar kleiner dan 800px zijn (min iets voor de verticale scrollbar). Dan missen de 800*600 toeschouwers in eerste instantie de rechterkolom, maar dat is toch reclame!

Een ander verhaal is, dat er tegenwoordig behalve desktops ook allerlei andere moderniteiten in gebruik zijn: iPods, iPads, tablets die je liggend en staand kunt gebruiken, telefoons met een browser, enz. Die hebben allemaal afwijkende beeldscherm-formaten.

Als je die ook allemaal zou willen bedienen, zouden die met speciale instructies (en allemaal een eigen stylesheet) moeten worden toegesproken.
Maar dat kan altijd nog. Of gewoon: niet.
Belangrijker lijkt me om eerst de site geschikt te maken voor de Internet Explorers.

Met vriendelijke groet,
CSShunter

 

[Gunneweg]

Hoi CSShunter,

Al die moderniteiten lijken me idd van later zorg. Eerst maar IE

Ik probeer alvast wel een ander horizontaal menu te maken zonder JS.
Dan past dat denk ik ook gelijk in IE

PS.
Met welk programma krijg ik de code zo netjes uitgelijnd?

 

[csshunter]

Met welk programma krijg ik de code zo netjes uitgelijnd?

Ah, bovenstaand plaatje had ik ge-screenshot vanuit Firebug. Dat is een (gratis) add-on voor Firefox, waarmee je heel snel kunt zien hoe een pagina in elkaar zit, en welke styles bij een bepaald element horen. Je kunt ook meteen online iets wijzigen of uitproberen.
Geweldig gereedschap!
Maar de code van een pagina krijg je er niet schoon mee.

Daarvoor kan je een andere add-on voor Firefox gebruiken, de HTML-Tidy. Die ken je al / heb je al, want die staat op de site genoemd.
Werkwijze:

• Open de pagina in Firefox.
• Klik op "Paginabron bekijken".
• In het paginabron-venster (met Tidy): menu HTML-validator > "Opschonen..." (of in het Help-vak rechtsonder ook "Opschonen...").
• Er komt een nieuw venster met de opgeschoonde en mooi ingesprongen broncode.
• Deze kan je "Opslaan als..." (ik doe het eerst met een nieuwe naam, dan blijft de oude versie overeind).
• Werkt alles nog naar behoren, dan de oude verwijderen en de nieuwe hernoemen (& uploaden).

Met vriendelijke groet,
CSShunter

Edit:
Ken je deze? www.accessify.com/tools-and-wizards/developer-tools/list-o-matic
Die kan online een CSS uitklapmenu fabrieken.

 

[lauraahh]

Als je specifieke opmaak wil voor IE en niet een aparte stylesheet wil.
Kan je achter je element \9 zetten.
Hierdoor wordt dat element alleen toegepast in IE.

vb.

margin: 10px \9;