[CSS] FireFox wil mijn rij niet inkorten

[pelleke]

Ik heb een website waarvan (wat ik ook probeer met CSS) FireFox een bepaalde rij anders weergeeft dan IE.

Op GoT heb ik zo gauw niet gevonden wat het probleem kan zijn (lees: de oplossing) maar ik kan me wel vaag herinneren dat ik het eerder heb meegemaakt.

Het geval is het volgende:

code:

col1              col2
rij_1a            rij_2a rowspan=3
rij_1b
rij_1c

1a heeft een plaatje,
1b heeft tekst
1c heeft tekst
2a heeft een plaatje (dat nu minder hoog is dan 1a+1b+1c)

* Nu is mijn probleem dat in FireFox 1b te hoog is.

Het live-voorbeeld is te zien op ***** De CSS staat in *****
Ik heb al geprobeerd in alle toegepaste styles op die plek de heigth te beperken, padding en margin op 0px te zetten, maar het mag allemaal niet baten. W3 keurt hem helemaal goed.

Weet iemand hoe je dit oplost? (Of wat ik verkeerd doe?)

[ Voor 7% gewijzigd door pelleke op 21-04-2006 15:32 . Reden: Typo; lang := hoog ]

[BasieP]

ik zie alleen maar dat 1b hoger is dan in IE, hijs net zo lang als 1a en 1c (zoals het hoort dus)

(je weet dat dit ook met divs kan, en dat tables niet echt hiervoor bedoelt zijn he?)

[ Voor 41% gewijzigd door BasieP op 20-12-2005 20:19 ]

[pelleke]

Typo, ik bedoelde te hoog. En inderdaad, misschien is het verstandiger om divjes te gebruiken, maar ik heb nooit echt goed geleerd hoe je dat moet doen.

Om nu niet offtopic te gaan: is er een oplossing denkbaar voor het niet te hoog laten worden van die cel?

[Technicality]

Als je in webdesign gaat, lijkt het me handig om geen spelfouten te maken en divjes te leren (zie homepage van jou).

[Erkens]

headhunternl schreef op dinsdag 20 december 2005 @ 20:26:
Als je in webdesign gaat, lijkt het me handig om geen spelfouten te maken en divjes te leren (zie homepage van jou).

Wat heb je er concreet aan om "divjes" te leren, of beter gezegt, wat versta jij daar onder?

[pelleke]

Kwoot: headhunternl schreef op dinsdag 20 december 2005 @ 20:26:
Als je in webdesign gaat, lijkt het me handig om geen spelfouten te maken en divjes te leren (zie homepage van jou).

Ja, heb je gelijk in. (Hoewel tables mij nog nooit in de steek gelaten hebben tot nu toe, heb ze in bijna al m'n websites gebruikt.) Ben meer een devver, wat dat betreft. Overigens haalt GoT me met regelmaat uit de stront.

ONTOPIC:
Is dit een subtiele manier om mij uit te leggen dat ik nu gewoon een probleem heb, en dat ik het beste maar de website kan nabouwen met divjes? (serieuze vraag) Of is er iemand die wel degelijk weet hoe je zoiets oplost?

// EDIT {
@Erfkens: Hij (M/V) bedoelt het gebruiken/overstappen op CSS-based layouts.

En eerlijk is eerlijk, zo ingewikkeld zijn die divjes niet.
}

[ Voor 39% gewijzigd door pelleke op 20-12-2005 20:35 . Reden: Kwoot erbij gezet, tussenreply ]

[MBV]

@headhunternl: jij wil dus dat hij een <div style="display:table;"> ergens neergooit?

[BasieP]

MBV schreef op dinsdag 20 december 2005 @ 20:35:
@headhunternl: jij wil dus dat hij een <div style="display:table;"> ergens neergooit?

ja das lekker nuttig
maareuh
@TS: tables zijn opzich voor veel dingen niet verkeerd, maar zoals je kan zien op je eigen site:
ze worden per browser vaak anders weer gegeven.
Dit komt door het ontbreken van harde afspraken over een aantal dingen. Deze zijn er wel voor div's, zodoende gaat dit altijd goed (hoewel IE somige style dingen nog steeds fout doet)

ik kan je wel een opzetje geven voor divs als je wilt, maar is denk ik beter als je het zelf doet (leer je het snelst van)

[Erkens]

pelleke schreef op dinsdag 20 december 2005 @ 20:32:
@Erkens: Hij (M/V) bedoelt het gebruiken/overstappen op CSS-based layouts.

En eerlijk is eerlijk, zo ingewikkeld zijn die divjes niet.
}

ik bedoelde eerder dat het gebruik van divjes niet een wondermiddel is wat je overal maar _moet_ toepassen

http://home.parse.nl/~michiel/semantiek.html

[pelleke]

BasieP schreef op dinsdag 20 december 2005 @ 21:09:
@TS: tables zijn opzich voor veel dingen niet verkeerd, maar zoals je kan zien op je eigen site:
ze worden per browser vaak anders weer gegeven.
Dit komt door het ontbreken van harde afspraken over een aantal dingen. Deze zijn er wel voor div's, zodoende gaat dit altijd goed (hoewel IE somige style dingen nog steeds fout doet)

ik kan je wel een opzetje geven voor divs als je wilt, maar is denk ik beter als je het zelf doet (leer je het snelst van)

Och, daar kom ik zelf ook wel uit. Mijn grootste bottleneck is idd het soms vreemde gedrag van IE (Verschillende versies ook!), IE5 doet andere dingen dan IE6 (ondangs kloppende DTD) en samen hebben ze dan weer meningsverschillen met FF. (En dan nog maar zwijgen over de keus van NS, en KHTML; Safari en Konqueror.)

Het is volgens mij bijna een etische kwestie, maar ik zal de website voor de grap eens nabouwen met divjes, kijken wat daaruit rolt.

[pelleke]

Goed, ik ben overtuigd. Het lijkt erop dat CSS inderdaad wat strikter is dan tabellen.

Zouden jullie nu overigens aanraden om ALLES met CSS te doen? Dus ook die kleine 'uitlijn-tabelletjes' middenin de inhoud? (Die je bijvoorbeeld gebruikt om een invulformulier mee te maken) of is dat beter om het wel met tabellen te doen? Het lijkt me wat overbodig om voor elk invulveld een aparte DIV aan te maken...

Zou ik hier een table voor moeten neerzetten? OF is er nog een betere manier?

[ Voor 11% gewijzigd door pelleke op 21-12-2005 16:38 . Reden: Laatste berichten niet goed gelezen. :S ]

[JayVee]

Ik zie het zoo vaak langskomen en nu ga ik er eens wat over zeggen! (komtie)

Als je een pagina wilt layouten heb je niet de keuze tussen <table> en <div>, je hebt de keuze tussen opmaak dmv html (en dat doe je met tables) of opmaak dmv stylesheets. De suggestie

headhunternl schreef op dinsdag 20 december 2005 @ 20:26:
Als je in webdesign gaat, lijkt het me handig om geen spelfouten te maken en divjes te leren (zie homepage van jou).

is dus niet helemaal correct. Het <div> element is zo een beetje het simpelste HTML element dat er bestaat. Het doet namelijk he-le-maal niets! Je gebruikt het alleen om je styles houvast te geven.
Wat headhunternl bedoelt is natuurlijk: 'leer CSS' of nog beter 'leer je pagina in <div>s in te delen en deze vervolgens te positioneren en stylen dmv CSS'.

Hierboven wordt de vraag gesteld of je voor elk invoerveld een div moet gebruiken. Het idee achter CSS is dat je de HTML elementen die je hebt staan vorm geeft en positioneerd. Soms moet je daar wat extra HTML elementen toevoegen (<div>, <span>, etc), zeker als het om de basis layout gaat.

Om een HTML form vorm te geven moet je dus niet "het <form> <div>en", maar CSS toepassen op je form elementen (meestal <input>s en <label>s). Hetzelfde geldt voor andere onderdelen. Als je je foto's wilt layouten moet je niet om elke foto een div zetten en die vervolgens stylen, je moet de fotos (<img> elementen dus) stylen! En mocht dat niet zomaar lukken, kan je proberen om er een div omheen te zetten.

Forms zijn een uitzondering op deze regel, aangezien bekend is dat het lastig is een form te stylen met CSS. Ik vind het dan ook beter om een (simpele!) tabel om het form heen te zetten.

[BasieP]

JayVee schreef op woensdag 21 december 2005 @ 18:01:
Ik zie het zoo vaak langskomen en nu ga ik er eens wat over zeggen! (komtie)

Als je een pagina wilt layouten heb je niet de keuze tussen <table> en <div>, je hebt de keuze tussen opmaak dmv html (en dat doe je met tables) of opmaak dmv stylesheets. De suggestie

dat vind ik nogal een twijfelachtig statement.
je hebt helemaal gelijk over de keuze html / css, maar html is niet per definitie tables.
er zijn bergen html elementen waarmee je een site kan maken, en dit kan prima zonder tables.

verder is het tegenwordig vrij lastig om een fatsoenlijke site te maken zonder styles, omdat heel erg veel dingen alleen in styles werken, en niet dmv plain html kunnen.
dus zelfs als je je layout dmv tables doet, heb je nog steeds css nodig.

[BtM909]

BasieP schreef op woensdag 21 december 2005 @ 18:52:
[...]

dat vind ik nogal een twijfelachtig statement.
je hebt helemaal gelijk over de keuze html / css, maar html is niet per definitie tables.
er zijn bergen html elementen waarmee je een site kan maken, en dit kan prima zonder tables.

verder is het tegenwordig vrij lastig om een fatsoenlijke site te maken zonder styles, omdat heel erg veel dingen alleen in styles werken, en niet dmv plain html kunnen.
dus zelfs als je je layout dmv tables doet, heb je nog steeds css nodig.

Misschien beter lezen: opmaak met HTML doet met vaak wel met tabellen

[BasieP]

BtM909 schreef op woensdag 21 december 2005 @ 18:56:
[...]

Misschien beter lezen: opmaak met HTML doet met vaak wel met tabellen

dit kan ook met lists/frames god knows what..

[MBV]

pelleke schreef op woensdag 21 december 2005 @ 16:37:
Goed, ik ben overtuigd. Het lijkt erop dat CSS inderdaad wat strikter is dan tabellen.

Zouden jullie nu overigens aanraden om ALLES met CSS te doen? Dus ook die kleine 'uitlijn-tabelletjes' middenin de inhoud? (Die je bijvoorbeeld gebruikt om een invulformulier mee te maken) of is dat beter om het wel met tabellen te doen? Het lijkt me wat overbodig om voor elk invulveld een aparte DIV aan te maken...

Zou ik hier een table voor moeten neerzetten? OF is er nog een betere manier?

Tables moet je gebruiken zodra je een tabel nodig hebt. Als je dus tabelgegevens hebt (weet ik veel, de maandomzet over een jaar van de verschillende divisies) moet je tabellen gebruiken. 'de inhoud' is dus te vaag om te bepalen of je wel of geen tabel moet gebruiken.

Als je bedoelt dat je in een tabel een kolom extra hebt voor de opmaak, dan zou ik dat vooral niet doen. Dat kan je ook met CSS doen .

[pelleke]

Voorbeeldje: Ik wil bijvoorbeeld 4x onder elkaar rechts een plaatje van 48x48 hebben, en links ernaast een variabele lengte aan tekst. De plaatjes moeten dan precies onder elkaar komen, de afstand wordt bepaald door het langste stukje tekst. Tekst ongeveer in het midden van een plaatje.

Met tabellen kan ik het dromen (simpel, kolommen altijd netjes naast elkaar in elke rij, rijen netjes onder elkaar in elke kolom.), met CSS heb ik dus geen idee hoe ik dat aanpak.

(zal even tekenen wat ik bedoel:)

code:

                                -------
                                |     |
Hier komt dan een stukje tekst. | PIC |
                                |     |
                                -------

                                -------
                                |     |
Minder tekst, ook rechts.       | PIC |
                                |     |
                                -------

Geen idee hoe je dat dan aanpakt... Als je 2 div-kolommen maakt, weet je nooit zeker dat je tekst ook echt naast de foto komt te staan, en als je 2 div rijen maakt komen de fotos niet netjes onder elkaar...

[ Voor 15% gewijzigd door pelleke op 22-12-2005 22:27 ]

[BasieP]

je kan in princiepe je op je pic de volgende properties doen:

display: block;
position: relative;
right: 0px;

maar dan zou ik ook direct een divje maken ipv een pic, en dan je pic als background-image nemen voor je div
grootste voordeel voor de kijker is dat het plaatje niet geselecteerd kan worden (met bijv. ctrl-a)

[pelleke]

Okee, en dan het geheel in weer een divje proppen om te zorgen dat de image niet extreem-rechts op de pagina komt. Inderdaad, er kan een hoop.

[BasieP]

pelleke schreef op donderdag 22 december 2005 @ 22:38:
Okee, en dan het geheel in weer een divje proppen om te zorgen dat de image niet extreem-rechts op de pagina komt. Inderdaad, er kan een hoop.

hoe bedoel je dat? je hebt ook een margin-right he, dus als je hem rechts wil, maar een xx pixels van de kant af, dan moet dat gewoon zo. niet met divjes in divjes in divjes waar dat niet hoeft

[pelleke]

Nee, maar wat ik bedoel is:

De plaatjes sluiten aan rechts naast de tekst, maar wel zo dicht mogelijk bij. Net als in een tabel, linkerkolom zo smal mogelijk, dat de tekst er net inpast, rechterkolom de plaatjes links uitlijnen.

Met margin-right lijn je je plaatjes uit relatief tot de rechterrand. Maar ik wil ze relatief t.o.v. de langste tekst in de lijst hebben.

[BasieP]

euh dat is toch juist de standaard als je geen styles meegeeft? dus gewoon

code:

text text [img]"x"><br[/img]texttext

* BasieP snapt je probleem denk ik niet goed

[ Voor 28% gewijzigd door BasieP op 22-12-2005 23:02 ]

[ikke007]

HTML:

<div id="content>
 <div class="item">[img]"aPicture.jpg"[/img]Lorum Ipsum...</div>
 <div class="item">[img]"aPicture.jpg"[/img]Lorum Ipsum...</div>
</div>

Cascading Stylesheet:

 .item img{
float: right;
clear:right;
}

[ Voor 31% gewijzigd door ikke007 op 23-12-2005 09:48 . Reden: right left whats the difference ;-) ]

[pelleke]

Precies, dat bedoelde ik ook 2 posts geleden, maar dan moet Content dus niet breder worden dan nodig is, dus alleen die tekstjes en plaatjes erin.

@BasieP - kijk ff naar mijn "tekeningetjes" in een eerdere post.

[ Voor 35% gewijzigd door pelleke op 23-12-2005 12:02 ]

[ikke007]

Je zou het dan ook als volgt kunnen doen maar: dan kan het wel zijn dat je een keer veel tekst hebt en daardoor ernaast 2 plaatjes krijgt

HTML:

<div id="content">
 <div id="tekst>
  <p>lorum ipsum </p>
  <p>lorum ipsum </p>
  <p>lorum ipsum </p>
 </div>
 <div id="sidebarplaatjes">
  [img]"aPicture.jpg"[/img]
  [img]"aPicture.jpg"[/img]
  [img]"aPicture.jpg"[/img]
 </div>
</div>

Cascading Stylesheet:

#div img{
  float: left;
  clear: right;
}

Iemand die een andere oplossing weet dan dit dan (bah!) met een tabel te doen?

[ Voor 29% gewijzigd door ikke007 op 23-12-2005 13:41 ]

[pelleke]

Maar dan komen de tekstregels niet per definitie naast de plaatjes Ik vind die vorige oplossing nog het mooist.

[ Voor 25% gewijzigd door pelleke op 24-12-2005 09:43 ]