Internet Explorer vs Firefox

[Blueflame_Core]

Volgens mij was hier nog niet echt een goed topic over.
Vandaar dat ik het maar even open en misschien dat mensen hier hun problemem (+oplossingen) kunnen posten waar ze zoal tegenop lopen als ze hun site testen in IE en FF.

Ik zal het maar even openen met iets waar ik niet uit kom.

Ik wil graag dat de koptekst van sommige alinea's een blauwe kleur krijgen, nu is dat heel simpel te doen met css en class.

*/HTML*/

<ul>
<li class="alinea_koptekst">Hier mijn alinea kop</li><br />
<p>Hier mijn tekst</p>

<li class="alinea_koptekst">Hier mijn 2e alinea kop</li><br />
<p>Hier mijn andere tekst</p>
</ul>

*/ CSS */

.koptekst{
color: #96C8FA;
font-weight: bold;
}

.alinea_koptekst {
color: #96C8FA;
}

Ten eerste: Als ik de <br />-tag er niet achter zet, zegt IE7: o ik zie niets van een break-tag dus laten we de tekst maar achter mekaar zetten. Firefox zegt: o hij wordt afgebroken met </li> dus ik begin op een nieuwe regel. Wat je nu vervolgens krijgt is dat de tekst in IE7 onder de koptekst wordt geplakt, wat de bedoeling is, maar in Firefox komt er een witregel tussen.

Ten tweede: In IE7 wordt de hele alinea blauw, dus het gedeelte tussen <li> en </li>, alsof IE7 niet ziet dat er een </li> (afsluiting van de alinea) is.
FIrefox voelt dit natuurlijk wel aan, en geeft dan ook keurig alleen de alinea-koptekst de kleur blauw en de tekst eronder weer zwart.

Iemand hier een verklaring voor?

[CodeCaster]

Gooi het eens in een validator, of nog beter, lees je in over semantiek.

Een niet-afgeslote p-tag in een ul-blok kan ècht niet.

[Guillome]

idd dit is baggercode

[BtM909]

We gaan dus geen groot topic maken, aangezien dit steeds specifieke problemen zijn die terug te brengen zijn naar punten die hierboven zijn genoemd

[Blueflame_Core]

O ja vergeet die P maar ff. Net of dit de oorzaak is van het probleem -.- maar goed vergeet het. Het blijft een vaag probleem. Gelijk maar baggercode noemen slaat ook nergens op.

[ Voor 17% gewijzigd door Blueflame_Core op 31-03-2009 12:59 ]

[crisp]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 12:57:
O ja vergeet die P maar ff. Net of dit de oorzaak is van het probleem -.- maar goed vergeet het. Het blijft een vaag probleem. Gelijk maar baggercode noemen slaat ook nergens op.

Het blijft zo invalid HTML; een UL mag enkel LI elementen bevatten en niets anders...

[Verwijderd]

Ik zie dat de classes gelijk aan elkaar zijn in de html: dezelfde layout. Zal misschien een (over)tikfout zijn. Daarnaast is er denk ik een probleem dat een unordered list alleen list items mag bevatten, geen textuele extra's. Maar het zal eerder rare resultaten geven, dan dat het misschien als fout gezien word.

[Blueflame_Core]

Ja probeer dat maar eens. Dan krijg je alles achter mekaar geplakt.

[Guillome]

Nouja zeg nou zelf. Je plaatst een <p> tag los in een <ul> tag, en doet een <br/> na een </li>

[Blueflame_Core]

Is een class er niet voor om deze telkens weer te gebruiken?

[Herko_ter_Horst]

Het is baggercode. Binnen een UL mogen alleen LI items voorkomen. Geen BR, geen P of wat dan ook. Wat je hier doet is iets (proberen) te gebruiken waar het niet voor bedoeld is. Het gaat in tegen de regels van de taal HTML. Het is dus niet gek dat verschillende browsers het verschillend renderen.

Kopteksten doe je met Hn elementen (waar n een getal is tussen 1 en 6).

Classes gebruik je vervolgens als extra, bijvoorbeeld als er meerdere soorten Hn zijn (bijv. <h2 class="alinea"> naast <h2 class="newsitem"> of iets dergelijks).

[ Voor 27% gewijzigd door Herko_ter_Horst op 31-03-2009 13:09 ]

[Blueflame_Core]

Wat voor oplossing moet je dan gebruiken voor een witregel in <ul>'s

[disjfa]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 13:05:
Is een class er niet voor om deze telkens weer te gebruiken?

Is een class voor ... wat te gebruiken?

Je code is gewoon troep zoals gepost. Dat werkt niet. Je stopt ook geen stoeptegel in de muur van je huis. Hard duwen en het zit wel, maar hoort niet.

Wat is je design?

[Verwijderd]

Semantiek is echt je probleem:

Alles kan zeker in een unordered list <ul>, maar is niet nodig.
Headertekst in <h1>/<h6>, paragraaftekst in <p>.
Met de unordered list erbij, moet je deze textelementen in het corresponderende listitem <li> stoppen.

[Ook al Bezet]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 13:06:
Wat voor oplossing moet je dan gebruiken voor een witregel in <ul>'s

Als je de tekst netjes binnen <p></p> hebt staan komt er vanzelf ruimte tussen de tekst en de <li>, daar heb je helemaal geen <br> voor nodig.

[Herko_ter_Horst]

Waarom gebruik je een UL? Een opeenvolging van alinea's (P elementen, eventueel met Header elementen ertussen) is geen lijst.

Witruimte kun je vervolgens per element/class regelen met margins en padding.

[ Voor 7% gewijzigd door Herko_ter_Horst op 31-03-2009 13:11 ]

[Gersomvg]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 13:06:
Wat voor oplossing moet je dan gebruiken voor een witregel in <ul>'s

De beste oplossingen zijn al genoemd maar als je het perse met <br /> wilt doen doe je dat toch binnen de list? Gewoon zo:

HTML:

<ul>
  <li>tekst<br /></li>
  <li>tekst</li>
</ul>

Maar paddings en margins zijn beter.


Ik weet trouwens niet of dit topic in stand blijft maar ik heb ook nog een tip voor mensen die hun site proberen compatible te krijgen met bijv. ie6 en dat is wel dit:
Bij een gefloate div:
Definiëer zo mogelijk altijd de width van een gefloate div en geef hem display:inline; mee (scheelt je weer een half uurtje debuggen in ie6

[Blueflame_Core]

Heb het gewoon met P en H1 etc.. opgelost.

[Gersomvg]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 13:38:
Heb het gewoon met P en H1 etc.. opgelost.

Ach ja.. ik weet niet waarvoor het is. Soms zijn lists semantisch gezien beter (bijv. bij menus).

[disjfa]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 13:38:
Heb het gewoon met P en H1 etc.. opgelost.

Heb je gewoon willekeurig wat tags omgenoemd of heb je wat ingelezen over semantiek? Je komt nu over alsof je maar wat gedaan hebt en hoopt dat het maar werkt, zonder te volgen wat je aan het doen bent.

[Gersomvg]

disjfa schreef op dinsdag 31 maart 2009 @ 13:46:
[...]

Heb je gewoon willekeurig wat tags omgenoemd of heb je wat ingelezen over semantiek? Je komt nu over alsof je maar wat gedaan hebt en hoopt dat het maar werkt, zonder te volgen wat je aan het doen bent.

Ik was tot voor kort ook niet zo semantisch xD Ik wist van de bekendste tags wel goed waarvoor ze dienden maar de semantiek was ver te zoeken.
Ik heb 1 tip voor Blueflame_Core en dat is:
Neem firefox, installeer webdevelopertoolbar en druk tijdens het website bouwen heel vaak op ctrl-shift-S. (CSS uitschakelen)
Semantiek is niet iets wat je alleen maar kan zien als je de opmaak even uitschakelt (heeft ook met andere dingen te maken) maar het geeft je in ieder geval een beetje een beeld.

[Guillome]

Ik dacht gelezen te hebben dat <br/> eruit gaat in HTML 5 ofzo. Maar dat terzijde: witregels in een UL hoeft en kan niet, daar komen LI`s in. Metafoor van de baksteen in het huis is perfect gekozen

[Bosmonster]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 13:06:
Wat voor oplossing moet je dan gebruiken voor een witregel in <ul>'s

Als je wiltruimte tussen li's wilt geef je de li's bijvoorbeeld een margin-bottom.

Of je gebruikt je p-constructie binnen de li, dan heb je je marge vanuit de p.

Guillome schreef op dinsdag 31 maart 2009 @ 13:52:
Ik dacht gelezen te hebben dat <br/> eruit gaat in HTML 5 ofzo. Maar dat terzijde: witregels in een UL hoeft en kan niet, daar komen LI`s in. Metafoor van de baksteen in het huis is perfect gekozen

Lijkt me sterk. br is gewoon een zachte enter en lijkt me gewoon een valide doel te hebben. Probleem is dat veel mensen hem gebruiken als opmaak (cq marge), wat natuurlijk niet de bedoeling is. Daar heb je CSS voor.

[ Voor 43% gewijzigd door Bosmonster op 31-03-2009 13:55 ]

[disjfa]

Guillome schreef op dinsdag 31 maart 2009 @ 13:52:
Ik dacht gelezen te hebben dat <br/> eruit gaat in HTML 5 ofzo. Maar dat terzijde: witregels in een UL hoeft en kan niet, daar komen LI`s in. Metafoor van de baksteen in het huis is perfect gekozen

code:

<br />

heeft nooit in html gezeten. Dat zit in xhtml

[Gersomvg]

Guillome schreef op dinsdag 31 maart 2009 @ 13:52:
Ik dacht gelezen te hebben dat <br/> eruit gaat in HTML 5 ofzo. Maar dat terzijde: witregels in een UL hoeft en kan niet, daar komen LI`s in. Metafoor van de baksteen in het huis is perfect gekozen

Niet helemaal want in een huis zitten ook ramen

[Blueflame_Core]

Nou helemaal ingelezen in de semantiek heb ik (nog) niet. Maar dat van P en H(eader) begrijp ik nu wel. Het is eigenlijk heel simpel, alleen soms denk je wel eens te moeilijk en wordt het een puinhoop.

@gersompie: ik zal je advies eens opvolgen

Semantiek is inderdaad belangrijk kom ik met de tijd achter, al vind ik het echt een $*% woord.

Werkte tot voorkort nog altijd met frames, dus ik moet nu een enorme omschakeling maken en dat is soms nog al eens lastig. Maar ben de afgelopen dagen al heel wat wijzer geworden op het gebied van CSS en (X)html, al is dat soms aan m'n vragen niet echt te zien .

[harrald]

Mijn tip: voordat je verder gaat aan je website lees eerst w3schools eens door over de beschikbare html tags.

Een website begint bij de html, dan pas gaan nadenken over positionering kleurtjes en andere dingen.

[Blueflame_Core]

Ja de meeste tags weet ik wel. Het is alleen zo als je eenmaal vast zit in een bepaalde (foute) werkwijze dan is het zwaar lastig om hier weer uit te komen.

[harrald]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 14:12:
Ja de meeste tags weet ik wel. Het is alleen zo als je eenmaal vast zit in een bepaalde (foute) werkwijze dan is het zwaar lastig om hier weer uit te komen.

misschien weet je wel hoe een tag eruit ziet, maar weet je ook waar ze voor zijn en wanneer ze wel en vooral wanneer niet gebruikt moeten worden?
Dingen afleren is inderdaad stukken moeilijker dan dingen aanleren. Daarom mijn advies: doe eerst nog weer even wat basis onderzoek en ga dan verder met je website.

Je gebruikt de "tags" dus niet om tekst te positioneren (zoals je liet zien met je <p> in een <ul>) maar om betekenis te geven aan je content. Als je een stuk tekst wilt weergeven op je website dan geef je de titel bijv een <h3> en zet je de tekst in een <p>. nou is de browser al zo aardig om alvast wat styling mee te geven aan die tags, maar daarvoor gebruik je ze niet, voor styling heb je css.

[Blueflame_Core]

Zo heb ik het inderdaad ook gedaan.

[Blueflame_Core]

Even wat anders. Als ik al <li> gebruik heh, dan komt de tekst, als die niet op 1 lijn past, onder het blokje, maar ik wil het onder de andere tekst hebben. Iemand een idee?

[harrald]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 21:35:
Even wat anders. Als ik al <li> gebruik heh, dan komt de tekst, als die niet op 1 lijn past, onder het blokje, maar ik wil het onder de andere tekst hebben. Iemand een idee?

je wilt het onder de andere tekst hebben? ik vat je niet, kan je het misschien at duidelijker uitleggen?

[Blueflame_Core]

Zal m'n best doen.

Stel <li> even voor als een blokje of rondje.

nu is het zo:

<li> blablablabla
sdasdasdasdasd

maar ik wil het zo:

<li> blablablabla
(spaties)sdasdasdasdasd

(de tekst moet dus gelijk lopen met blablabla)


nou dit schiet lekker op. GoT pakt geen tabs/spaties.

nou het schijnt niet te werken las ik op een ander forum .
Erg armoedig als je dit met   's op moet lossen...

[ Voor 42% gewijzigd door Blueflame_Core op 31-03-2009 21:47 ]

[teh_twisted]

waarvoor gebruik je de <li>'s in dit geval? want wat je wilt is gewoon meer padding aan de zijkant... maar als er zoveeeel instaat dat 't buiten de li valt is 't meestal niet bedoeling dat je 't in een li propt.

[Blueflame_Core]

Ik wil blokjes ervoor. Staat gewoon mooier en overzichtelijker in dit geval.

[ Voor 27% gewijzigd door Blueflame_Core op 31-03-2009 21:51 ]

[disjfa]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 21:40:

HTML:

<li>    blablablabla 
        sdasdasdasdasd

Dat heet padding, of margin. Je inhoud kan dan niet "vreemd" eronder door lopen.

[Blueflame_Core]

nou het loopt wel onder de <li> door en wil het inderdaad zoals hier boven.

Kijk het probleem is ik gebruik niet een super grote content, vandaar dat de zin al snel te lang is. Maar goed ik verzin er wel wat op, dacht misschien is er een oplossing voor maar schijnbaar niet dus.

[ Voor 57% gewijzigd door Blueflame_Core op 31-03-2009 21:58 ]

[disjfa]

Geef eens een testcase.

[teh_twisted]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 21:56:
nou het loopt wel onder de <li> door en wil het inderdaad zoals hier boven.

dan trap je de inhoudt van de li in een span en geef je de span een margin op aan de linkerkant... li's vinden dat tekst eronder moet lopen als 't buiten de regel valt, valt weinig aan te veranderen

[harrald]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 21:51:
Ik wil blokjes ervoor. Staat gewoon mooier en overzichtelijker in dit geval.

Nu lijkt het dus weer dat je een <li> kiest door zijn default styling ipv dat je een <li> kiest om zijn betekenis.
Nogmaals de html is niet bedoeld om uiterlijk te geven aan je content, daar is css voor.

[mcDavid]

Blueflame_Core schreef op dinsdag 31 maart 2009 @ 21:56:
nou het loopt wel onder de <li> door en wil het inderdaad zoals hier boven.

Kijk het probleem is ik gebruik niet een super grote content, vandaar dat de zin al snel te lang is. Maar goed ik verzin er wel wat op, dacht misschien is er een oplossing voor maar schijnbaar niet dus.

List-style-position, had je toch echt zelf moeten kunnen vinden

[teh_twisted]

mcDavid schreef op dinsdag 31 maart 2009 @ 22:04:
[...]


List-style-position, had je toch echt zelf moeten kunnen vinden

*rookt verder* my bad

[ Voor 20% gewijzigd door teh_twisted op 31-03-2009 22:08 ]

[Blueflame_Core]

Ja heb ik al geprobeerd maar dan komen de li's door m'n menu div heen. En dan al geprobeerd om te padden of margen maar lukt ook niet.

@ Harrald: als jij een css oplossing weet om li's te krijgen, gooi het in de groep.

[harrald]

Een css oplossing om li's te krijgen? wat bedoel je daar mee?

[Blueflame_Core]

opgelost !

li {
padding: 5px;
list-style: square inside;
list-style-position: outside;
margin-left: 12px;
}

Had margin niet geprobeerd maar padding -.- stomstomstom

1 dingetje nog voor de mensen die hier eventueel nog tekst onder hebben..
Dit wordt ook uitgelijnd als de tekst die je tussen je li's hebt in IE7, in FF niet.
Mij maakt het niet heel veel uit.

[ Voor 35% gewijzigd door Blueflame_Core op 31-03-2009 22:16 ]

[mcDavid]

Cascading Stylesheet:

list-style: square inside;
list-style-position: outside;

Waarom doe je eerst inside in de shorthandnotatie, en daarna outside in de normale notatie?

_{hij zou hier gewoon de laatste moeten pakken, maar dit soort dubbele declaraties zijn altijd een potentiële bron voor bugs in minder standard-compliant browsers. En maken je code bovendien erg onoverzichtelijk als je niet oppast. Dus als het niet nodig is gewoon voorkomen!}

edit @ hieronder: daar zorgt "square" voor idd, die op zichzelf bij de "list-style-type" property hoort.

[ Voor 55% gewijzigd door mcDavid op 31-03-2009 22:23 ]

[Blueflame_Core]

Dacht dat het dan een dicht vierkantje werd :^)

[disjfa]

Sorry hoor, maar als ik een gewoon lijstje maak werkt het ook zonder enige css erbij?

HTML:

<ul>
  <li>
    regel 1<br>
    regel 2
  </li>
</ul>

Wat probeer je helemaal uit?

[Guillome]

de kleuren

[MueR]

Niet om het een of ander, maar een basiscursus HTML zou toch echt nuttig voor je kunnen zijn. Wat je allemaal probeert weet ik niet, maar zelfs in Frontpage krijg je dit soort fratsen nauwelijks voor elkaar. Als je HTML niet genoeg beheerst om het blind te kloppen, gebruik dan alsjeblieft gewoon een WYSIWYG editor a la Dreamweaver, want zo gaat dit topic nog wel even door.

[Blueflame_Core]

Gooi er maar een slotje op

[Guillome]

En gooi jij er maar een cursus tegenaan