span en Safari

  • Onderwerp starter Onderwerp starter Wniq
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

Wniq

Gebruiker
Lid geworden
10 jan 2013
Berichten
16
Ik heb de volgende code in een van mijn pagina's staan:

<span style="float: left;"><STRONG>
<?php echo "Gekke Henkie";?>
</span>
<span style="float: right;"><FONT COLOR="Grey"></STRONG>
<?php echo $_SESSION['dag']." ". $_SESSION['datum']; ?>
</span>
</BR>

Dit werkt prima in IE, maar op de iPad staat de datum weer direct naast "Gekke Henkie"

Iemand enig idee hoe dit op te lossen?
 
Heb je het parent element op width: 100% proberen te zetten?
 
In geval van twijfel, valideer! Als je deze code door een validator zou gooien zouden er een aantal fouten boven komen drijven. 1) Je gebruikt een <font> tag, deze zijn verouderd en hoor je niet meer te gebruiken, gebruik in plaats daarvan <p>. 2) Je opent de font tag, maar je sluit hem nergens. 3) Je <strong> tag staat niet goed genest. Ik weet niet precies wat je bedoeling is, maar je zou deze code kunnen proberen:
HTML:
<p style="float:left;">Gekke Henkie</p>
<p style="float:right;">dag en datum</p>

EDIT: Het is trouwens ook een goed idee om een link naar de probleemsite te geven, nu zien we maar een klein stukje van de code.
 
Laatst bewerkt:
Dank voor je antwoord Naarling.

Ik heb nu het volgende:

<P style =
"font-family:arial;font-weight:bold;color:black;font-size:18px;float:left;">
<?php echo "Snelle Henkies";?>
</P>
<P style =
"font-family:arial;color:grey;font-size:18px;float:right;">
<?php echo $_SESSION['dag']." ". $_SESSION['datum']; ?>
</P>
</BR>
<HR>

Gaat goed, de datum staat nu ook op de iPad netjes rechts. Maar nu is de grijze streep (<HR>) eronder weer niet goed. Hij staat alleen maar onder het witte gedeelte tussen Snelle Henkies en de datum.

De site is www.xpensive.nl

Met IE kun je zien hoe ik het wil hebben en op de iPad hoe ik het niet wil hebben.
Het resultaat van bovenstaande code zie je wanneer je op xpensive.nl eerst kiest voor Pennestreken en daarna voor Snelle Henkies. Je krijgt dan als het goed is de Snelle Henkies van 01 maart 2010 te zien. Wanneer je ergens anders terecht komt, kan je met de kroontjespennen bovenin heen en terug door de tijd.
 
Laatst bewerkt:
Hoi Wniq,
Oeps!
  • Momenteel levert die pagina alleen in Internet Explorer een datum die rechts staat (in IE7 is ie niet grijs, maar groen).
  • Firefox, Chrome, Opera en Safari: allemaal kleven ze de datum tegen de SnelleHenkies aan.
  • Het is dus niet alleen Safari op iPad, op desktops enz. gaat het ook mis...
Dan eens de html-code bekijken.
Ach, wat een treurnis! :rolleyes:
Code:
r.2:	<HTML>
	<HEAD>
		<STYLE TYPE=text/css>
		...
		</STYLE>
	<HTML>
r.13:	<HEAD>
		<STYLE TYPE=text/css>
		...
		</STYLE>
		<TITLE>Ik Henk, dus ik niet Ben.</TITLE>
	</HEAD>

	<BODY LINK =  "#000000" VLINK = "#000000" ALINK = "#000000">
		<CENTER>
		...
r.40:	</HTML>
	<BR>

r.42:	<HTML>
	<HEAD>
		<STYLE TYPE=text/css>
		...
		</STYLE>
		<TITLE>Ik Henk, dus ik niet Ben.</TITLE>
	</HEAD>

	<BODY LINK =  "#000000" VLINK = "#000000" ALINK = "#000000">
		<CENTER>
			<TABLE ...>
			...
			</TABLE>
r.86:	</HTML>
	<BR>

r.89:	<HTML>
	<HEAD>
		<STYLE TYPE=text/css>
		...
		</STYLE>
		<TITLE>Ik Henk, dus ik niet Ben.</TITLE>
	</HEAD>

	<BODY LINK="#000000" VLINK="#000000" ALINK="#000000"> 
		<CENTER>
			...enz.
Geen wonder dat de browsers zich hier danig in verslikken: een veelkoppig monster! ;)
Naast het ontbreken van een Doctype + verouderde / ongeldige html-codes, zoals Naarling al signaleerde.

  • Voor het belang van een Doctype en valid code: zie bv. hier.
Is er soms iets mis gegaan met het php-includen? (in tegenstelling tot frames en iframes moet bij een php-include juist niet de <html><head><body> structuur aangehouden worden, maar alleen de html van het code-fragment gebruikt worden; zie ook hier).

Ik denk dat het met goede html wel zal meevallen met Safari en de andere browsers! :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Gaat goed, de datum staat nu ook op de iPad netjes rechts. Maar nu is de grijze streep (<HR>) eronder weer niet goed. Hij staat alleen maar onder het witte gedeelte tussen Snelle Henkies en de datum.
Dan moet je hem clear:both; meegeven in je CSS. Ik zie de nieuwe code trouwens niet op de site staan. Maar voor je verder gaat kun je inderdaad beter zorgen dat je HTML klopt.
 
Beste Naarling en cssHunter,

Zinnige informatie allemaal, dank daarvoor. Ik ben begonnen met het volgende aan mijn index.php toe te voegen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Ik Henk, dus ik niet Ben.</title>

Dit resulteert in nog meer fouten (63!) wanneer ik het bestand laat valideren. De eerste melding is:

Character Encoding mismatch!

The character encoding specified in the HTTP header (iso-8859-1) is different from the value in the <meta> element (utf-8). I will use the value from the HTTP header (iso-8859-1) for this validation.

Mooi! Lijkt erop dat er iets in die code staat die ik heb toegevoegd wat er niet in thuishoort. Ik begrijp dat ik met die toegevoegde code het volgende vertel:

1. Ik werk in HTML 4.1 en dat moet vooral strikt genomen worden (dus geen zielig gedoe met oude code die toch nog wel een beetje mag).
2. Dat ik de Nederlandse taal spreek (ik neem aan dat dat niet geldt voor de code die ik produceer, maar waarom moet het er dan iegenlijk in?)
3. Wat ik in META vertel, weet ik niet precies, maar volgens mij maak ik duidelijk dat ik characterset utf-8 gebruik
4. Dat mijn site, of in ieder geval deze index.php "Ik Henk, dus ik niet Ben." heet.

Waarschijnlijk vertel ik onder 1. ook dat ik gebruik maak van character encoding iso-8859-1 hetgeen waarschijnlijk conflicteert met utf-8. Vragen: Is deze veronderstelling juist? Wat doe ik eraan?

Andere vragen:

Hoe weet ik wanneer ik gebruik maak van HTML of XHTML (of beiden tegelijkertijd)?
index.php is een php-bestand, moet ik dan toch die HTML DOCTYPE gebruiken?

cssHunter verwijst me naar een ander pagina op dit forum, daar staat onder andere:

Oftewel: begin altijd met er een Strict Doctype boven te zetten:

HTML Code:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
4<head>
5 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
5 <title>...</title> of:


HTML Code:

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3<html lang="nl">
4<head>
5 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
6 <title>...</title>

Volgens mij moet daar het eerste "HTML Code:" "XHTML Code:" zijn.

Overigens is dit alles bedoeld om mijn huidge (oude) website www.frigge.nl te verbeteren en te moderniseren. Ik heb gekozen voor "HTML 4.1 strict". Is dat een juiste keus?
 
Ik vind het allemaal hartstikke leuk, al dit gepuzzel, maar ik kom telkens tegen dat het een en ander deprecated is in HTML 4.01.
Dat snap ik allemaal en ik vind het ook prima, want we moeten meegaan in de vaart der volkeren, maar kan iemand me vertellen wat ik dan allemaal als alternatieven moet gebruiken? En waar ik dat kan vinden?

Zo heb ik bijvoorbeeld de volgende code:

<A HREF = "mailto:henk@frigge.nl"><IMG SRC = "http://www.xpensive.nl/menus/afbeeldingen/e_mail.jpg" BORDER = "0" WIDTH = "6%" ALIGN = "Middle"></A>

Dat heb ik zo bedacht (ooit, ergens in het stenen tijdperk), omdat ik geen lijn om het plaatje heen wil (BORDER = "0") en omdat ik het plaatje gecentreerd wil weergeven (ALIGN = "Middle")

Zowel BORDER als ALIGN zijn deprecated attributen in 4.01

FIJN! Maar wat moet ik dan doen om hetzelfde resultaat te bereiken?? Waar kan ik dat vinden op een voor iemand die het stenen tijdperk nog heeft meegemaakt, begrijpelijke manier?
 
FIJN! Maar wat moet ik dan doen om hetzelfde resultaat te bereiken?? Waar kan ik dat vinden op een voor iemand die het stenen tijdperk nog heeft meegemaakt, begrijpelijke manier?
CSS is wat je daarvoor hoort te gebruiken, om, bijvoorbeeld, bij alle links de omlijning we te halen kun je dit in je CSS bestand zetten:
Code:
a{border:0px;}
En klaar! In dit draadje kun je sites vinden die je hier meer over kunnen vertellen.

Character Encoding mismatch!

The character encoding specified in the HTTP header (iso-8859-1) is different from the value in the <meta> element (utf-8). I will use the value from the HTTP header (iso-8859-1) for this validation.
Dan is je bestand vermoedelijk niet als utf-8 opgeslagen, even in je editor controleren dus.

EDIT: een probleem dat je trouwens nog niet opgelost hebt is dat je per pagina soms meerdere <head>s hebt (zoals CSS hunter hierboven aangaf) dat kan nogal wat problemen geven.

Hoe weet ik wanneer ik gebruik maak van HTML of XHTML (of beiden tegelijkertijd)?
index.php is een php-bestand, moet ik dan toch die HTML DOCTYPE gebruiken?
Je moet altijd een doctype opgeven, het gaat weliswaar om een PHP bestand maar wat de brower ziet is HTML, en dat heeft een doctype nodig. Of je een HTML of XHTML doctype gebruikt hangt af van hoe je de code geschreven hebt, maar tegenwoordig kun je net zo goed het HTML5 doctype gebruiken.
HTML:
< !DOCTYPE html>
Een stuk korter en het kan altijd. Als je dan toch wilt controleren of je je netjes aan de HTML, danwel XHTML standaarden gehouden hebt kun je de validator dwingen om de op die manier te controleren.
 
Laatst bewerkt:
Beste Naarling en cssHunter,

Dank zover. Het kost een zondag, maar ik ben er in geslaagd mijn index.php van 73 errors naar 0 terug te brengen. Een hele vooruitgang, maar ik en er nog lang niet.
Nu even geen tijd meer, maar ik kom er binnenkort wel weer op terug.

tHenks!!:thumb:
 
Hoi Wniq,
Gefeliciteerd met deze overwinning! :thumb:
  • NB: De htlm-validator is erg aardig, en zag een paar dingen over het hoofd:
  • Op regel 6 wordt de <head> geopend, die niet wordt gesloten; en er staat geen <body>...</body> in.
Op de keper beschouwd hoeft een webpagina geen <head> en <body> te hebben; dit komt groen uit de html-validator (!):
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Ben ik wel?</title>

    <h1>oho!</h1>
    <p>ik heb geen head en geen body!</p>
</html>
Maar het is wel aan te bevelen: dan hoeven browsers niet zelf uit te zoeken waar de <body> geplaatst moet worden, en een <body> is ook handig om vast te pakken voor de css.
In jouw geval:
  • De </head> komt na de </style>, de <body> komt meteen na de </head>, en op het allerlaatst komt </body></html>.
=======
Nog een paar reacties op nummertje #7 hierboven, voor zover nog niet door Naarling beantwoord.

met doctype ... nog meer fouten (63!) wanneer ik het bestand laat valideren
Dat klopte: de html-validator had in de oude versie geen Doctype aangetroffen en schakelt dan automatisch over op de vergevingsgezinde Transitional variant. Een Strict doctype volgt de echte goede standaarden, is strenger, en produceert meestal meer errors als het mis gaat.

=======
<html lang="nl"> ... Dat ik de Nederlandse taal spreek ... maar waarom moet het er dan eigenlijk in?
Daaraan kunnen voorleesbrowsers merken dat ze naar NL moeten overschakelen:

voice-switch.png

Waarschijnlijk gebruikt Google het ook voor de optie "Alleen pagina's in het Nederlands bekijken".

=======
Hoe weet ik wanneer ik gebruik maak van HTML of XHTML (of beiden tegelijkertijd)?
Beiden tegelijk kan niet: het is of-of.
Het zijn alle twee een pakketje voorschriften voor hoe de code genoteerd is, en hoe de browsers ermee om moeten gaan.
En die voorschriften verschillen. Bij xhtml mogen tags en eigenschappen niet met hoofdletters geschreven worden (bv. <A HREF= http://www.xpensive.nl/index.php"> moet worden: <a href="http://www.xpensive.nl/index.php">), bij gewone html mag het zowel met hoofd- als met kleine letters. Bij xhtml moet een begintag zoals een <p> altijd ook afgesloten worden met een </p>, bij html hoeft het soms niet (maar is ook daar aan te bevelen).
In jouw code staan nogal veelvuldig hoofdletters: die kan je allemaal gaan omschrijven tot kleine letters en er zo mooie xhtml van maken. Maar wel zo makkelijk om het op html4.01 te houden! Dat is dus een prima keus.

=======
cssHunter verwijst me naar een ander pagina op dit forum, daar staat onder andere:
HTML Code:
....
HTML Code:
.....
Volgens mij moet daar het eerste "HTML Code:" "XHTML Code:" zijn.
Betrapt? ;) Ja en nee: xhtml is een soort html, dus de gebruikte code zelf is ook html; het is alleen een html-variant voor de notatie, zoals er verschillende html-varianten zijn.
Verder is het ook zo, dat als je iets in een html-codeblokje op dit forum zet, er automatisch "HTML Code" bij dat blokje komt te staan. Maar eigenlijk had er horen te staan: "HTML Code voor XHTML:"

=======
Bij nummer #8/#9:

Borders om images
Met a { border: 0px;} ga je het niet redden om geen border te krijgen om een image als dat in een link zit (een onhebbelijkheid die trouwens alleen Internet Explorer heeft).
Daarvoor moet het in de css zijn:
a img {border:0}

=======
Zowel BORDER als ALIGN zijn deprecated attributen in 4.01 - FIJN! Maar wat moet ik dan doen om hetzelfde resultaat te bereiken?? Waar kan ik dat vinden op een voor iemand die het stenen tijdperk nog heeft meegemaakt, begrijpelijke manier?

Tja, sir Flintstone, dat kan met CSS: de taal waarin alle opmaak prachtig geregeld kan worden. De benodigdheden zijn:

  1. Handvatten in de html-code waar de opmaak op los gelaten moet worden.

    Voor alle elementen met een bepaalde tag op de pagina tegelijk kan dat met de naam van de tag zelf:
    p {margin: 10px 0; padding: 0; color: fuchsia;}.

    Moet iets alleen maar één keer een (afwijkende) opmaak hebben, dan kan dat element een id="idvalue" krijgen,
    en in de css wordt dat opgepakt met bv.:
    #idvalue {border: 3px solid green;}.

    Moet iets alleen soms een afwijkende opmaak hebben, dan kunnen die elementen een class="classname" krijgen,
    en in de css wordt dat opgepakt met bv.:
    .classname {border: 1px solid red;},
    of bij een class="center" voor horizontaal centreren: .center {text-align: center;}.

    Verder regelt alles zich via waterval-trappetjes (de eerste C=Cascade van CSS) om elementen binnen een ander element te bereiken, bv.:
    #content ul li {font-size: .9em;}
    #zijkolom ul li {font-size: 8.5em;}.

  2. Een <style>-blok in de <head> van de pagina, met het hele rijtje van dingen die met de css geregeld moeten worden; of (beter) een apart stylesheet waar deze dingen is staan, en dat op elke pagina aangehaakt kan worden (dan hoeft het niet op elke pagina herhaald te worden, en gaat een wijziging meteen in voor alle pagina's tegelijk).

  3. Inzicht in hoe css in elkaar zit. Alles staat weliswaar in de css-specificaties van W3C, maar daar is in den beginne wat lastig doorheen te komen. Ik kan aanbevelen: Het Groene Boek, officieel "CSS and HTML Web Design", zie dit topic (500 pag. gratis download).
In het begin van een pagina/site is het even wat uitzoekwerk, maar als je de css eenmaal hebt vastgesteld, wordt de html-code van de pagina mooi strak & overzichtelijk. En alle volgende pagina's doe je fluitend! :)

  • Illustratie: ikhenk-nw.htm
    Zie broncode.
    (Alle zich herhalende inline-styles met style="..." in de html-tags zelf zijn nu ook overbodig)
    (De menu-tabel zou nog vervangen kunnen worden door een mooi list-item rijtje)
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
cssHunter,

Dank voor deze uitgebreide info. Ik begin het steeds beter te snappen, maar hoe meer je begrijpt, hoe meer vragen je hebt.

Ik heb nu de CSS ondergebracht in een apart sheet (merendeel gekopieerd vanuit jouw voorbeeld). Daarin wordt onder andere de menu-tabel beschreven:

#menuTable {
width: 75%;
margin: 15px auto 0 auto;
text-align: center;
}
#menuTable td {
background: #4A90D1;
border: 1px solid white;
}
#menuTable a {
display: block;
padding: 3px;
font-size: .9em;
background: #4A90D1;
color: #FFFFFF;
text-decoration: none;
}
#menuTable a:hover {
color: #000000;
}

Het merendeel daarvan snap ik, maar wanneer men een keus maakt uit de menu-balk, dan moet er daaronder een sub-menu-balk verschijnen die er hetzelfde uitziet, op de breedte na.
Ik heb het geprobeerd door bovenstaande code te kopieren en alles menuTable2 te noemen en daaraan te refereren in mijn menu-pagina, maar dat pikt 'ie dus niet. Ik begrijp dat de benaming "menuTable" op zich vaststaat (want als ik 'm verander werkt het helemaal niet meer).

Overigens krijg ik ook een foutmelding wanneer ik twee keer <table id = "menuTable" ....... gebruik (en dat doe ik, want ik include twee maal een menu-balk in bijvoorbeeld xpensive.nl\pennestreken\pennestreken.php en refereer daar dus twee maal naar "menuTable")

Kortom, ik kom hier nog niet helemaal uit.

Overigens, wat kan ik het beste als editor gebruiken (ik ben gek op die mooie kleurtjes van je).

Groet,
 
... alles menuTable2 te noemen en daaraan te refereren in mijn menu-pagina, maar dat pikt 'ie dus niet.
Hé, als je de #menuTable laat zoals ie is, en er een #menuTable2 bij maakt in de css die identiek is, plus daarnaar verwijst in de id van het submenu, zou het goed moeten gaan.

Overigens krijg ik ook een foutmelding wanneer ik twee keer <table id = "menuTable" ....... gebruik
En dat klopt: een id is een unieke identificatie van een element: daar mag er dus maar 1 van op de pagina staan.

Van een class mogen er meer zijn, en dat heb je nodig (dan hoeft er geen verdubbeling van de css voor twee id's te komen die exact hetzelfde qua opmaak zijn). Met een class wordt de css:
Code:
.menuTable {
	width: 75%;
	margin: 15px auto 0 auto;
	text-align: center;
	}
.menuTable td {
	background: #4A90D1;
	border: 1px solid white;
	}
.menuTable a {
	display: block;
	padding: 3px;
	font-size: .9em;
	background: #4A90D1;
	color: #FFFFFF; 
	text-decoration: none;
	}
.menuTable a:hover {
	color: #000000;
	}
En de html:
HTML:
<table class="menuTable" cellspacing="0">
    <tr>
        <td><a href = "http://www.xpensive.nl/pennestreken/pennestreken.php">Pennestreken</a></td>
        <td><a href = "http://www.xpensive.nl/whitsant/whitsant.php">Whitney en Santana</a></td>
        ... enz.
    </tr>
</table>

<table class="menuTable" cellspacing="0">
    <tr>
        <td><a href = "http://www.xpensive.nl/pennestreken/gekke_henkie/2010/gekke_henkie_20100308.php">Gekke Henkie</a></td>
        <td><a href = "http://www.xpensive.nl/pennestreken/hf_fetjes/2010/hf_fetjes_20100308.php">HF-fetjes</a></td>
        ... enz.
    </tr>
</table>
Nu worden het hoofdmenu en het submenu beiden bediend door dezelfde css. :)

=======
wat kan ik het beste als editor gebruiken?
Waar maak je 'm nu mee?

=======
(ik ben gek op die mooie kleurtjes van je)
Die snap ik niet: welke kleurtjes bedoel je?

Met vriendelijke groet,
CSShunter
 
cssHunter,

Heel vreemd. Ik heb nogmaals menuTable helemaal gekopieerd en hernoemd naar menuTable2. Resultaat: weer bagger. Toen heb ik de eerste menu-balk ook laten verwijzen naar menuTable2. Resultaat: nog meer bagger. Toen de eerste menu-balk weer laten verwijzen naam menuTable. Resultaat: in orde. En wat denk je van de tweede menu-balk?? Ook in orde!!!!?

Ik werk met WordPad. De kleurtjes had ik waarschijnlijk, doordat ik gekopieerd heb uit de source die je ziet via IE. Maar ik zie soms ook kleurtjes in je antwoorden.

Ik ploeter verder. Groet,

Wniq
 
... Ook in orde!!!!?
Wat misschien een rol heeft gespeeld is de cache van je browser: als een pagina openstaat, zit deze in het tijdelijke werkgeheugen (de buffer) van de processor, en komt daarnaast in de map Tijdelijke Internet Bestanden (bij Internet Explorer; bij Firefox e.a. browsers elders in een mapje).
Bij het bekijken van een nieuwe versie kunnen dan soms (gedeeltelijk) onderdelen van de oude versie gebruikt worden. Hiertegen valt te doen:
  • Een "harde reload" geven (geen "refresh"): d.m.v. F5 of een klik in de adresregel en dan de Enter-toets.
  • Of (altijd safe): pagina sluiten, en eerst via de browser-instellingen alle geschiedenis/opgeslagen bestanden/cache/buffer/enz. wissen; dan begin je altijd met een schone lei.
=======
Ik werk met WordPad.
Prima: op z'n Spartaans code inkloppen. :)

  • Wat je eens kunt proberen: Notepad++, dat is een (gratis) speciale editor voor broncode. Met kleurtjes en een heleboel meer handigheidjes.
    Bv. via het menu "Codering" kan je een bestand omzetten naar (BOM-vrij) utf-8, dan heb je waarschijnlijk ook geen last meer van die Charset Mismatch (of het ligt aan de server, dan is daar niets aan te doen).
Succes verder!
CSShunter
_________
O, de kleurtjes in m'n antwoorden komen vanzelf door het gebruiken van het <> html-code knopje hier in het forum reactie-invulvenstertje:

html-tag-helpmij.png
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan