[HTML/CSS] Teveel spacing onder UL in FF

[spone]

Ik ben bezig met een ontwerpje met op basis van blokjes in rijen van 5. In IE(10) quirks mode heb ik het nu werkend, maar in iedere andere mode of browser is er een spacing tussen de rijen. Misschien even een plaatje om eea te verduidelijken:

IE10:


Firefox:


Relevante code:

Cascading Stylesheet:

    div.gridcontainer{
      text-align: left;
    }
    
    div.gridcontainer ul{
      display: inline-block;
      margin: 0;
      padding: 0;
      zoom: 1;  /* For IE, the outcast */
      *display: inline;      
      list-style-type: none;
    }
       
    div.gridcontainer ul li{
      float: left;
    }
    
    div.gridcontainer img{
      width: 128px;
      height: 128px;
    }

HTML:

    <div class=gridcontainer>
      <div class=row>
        <ul>
          <li><img src="2.jpg" border=0 /></li>
          <li><img src="3.jpg" border=0 /></li>
          <li><img src="1.jpg" border=0 /></li>
          <li><img src="2.jpg" border=0 /></li>
          <li><img src="1.jpg" border=0 /></li>
        </ul>
      </div>
      <div class=row>
        <ul>
          <li><img src="2.jpg" border=0 /></li>
          <li><img src="3.jpg" border=0 /></li>
          <li><img src="3.jpg" border=0 /></li>
          <li><img src="1.jpg" border=0 /></li>
          <li><img src="3.jpg" border=0 /></li>
        </ul>
      </div>
    </div>

Iemand een idee waar ik iets mis?

[johnkeates]

Is in jouw geval een tabel niet gewoon wat je zoekt? Je bent nu een tabel aan het namaken met dividers en unordered lists...

[RedHat]

johnkeates schreef op zondag 13 januari 2013 @ 14:13:
Is in jouw geval een tabel niet gewoon wat je zoekt? Je bent nu een tabel aan het namaken met dividers en unordered lists...

Staat er tabular data in?

[spone]

De data die in de grid staat heeft geen onderlinge relatie. Ik kan natuurlijk een tabel misbruiken en daar wat met cellspacing/cellpadding doen, maar er moeten betere oplossingen zijn

[crisp]

inline-block elementen lijnen uit op de baseline. Je zou dit kunnen doen om deze elementen expliciet op 'bottom' uit te lijnen:

Cascading Stylesheet:

div.gridcontainer ul,
div.gridcontainer img {
    vertical-align: bottom;
}

[spone]

Thanks, dat deed precies wat ik wilde. Doel je daarmee op dat een stukje onder de baseline (in mijn geval in ieder geval 5px) ook nog als content meetelt en niet als padding of margin geldt. En als ik die twee dus op 0 zet ik nog steeds het stuk onder de baseline heb?

[MueR]

spone schreef op zondag 13 januari 2013 @ 14:11:
In IE(10) quirks mode

Als je in Quirks Mode bezig bent, is het per definitie fout.

[Krilo_89]

Heb je een reset.css gebruikt?

Wanneer er links om de images heen staan, moet je de images display: block; meegeven, anders krijg je dezelfde ruimte onder de images. Dus probeer het eens met display: block;

Zoals de persoon hierboven zegt, Quirks Modus is niet goed. Wanneer je geen doctype of een onvolledige doctype hebt, schiet IE ook in quirks modus. Het is een soort "Houtje Touwtje" modus, om een website alsnog goed te renderen.

[crisp]

spone schreef op zondag 13 januari 2013 @ 14:32:
Thanks, dat deed precies wat ik wilde. Doel je daarmee op dat een stukje onder de baseline (in mijn geval in ieder geval 5px) ook nog als content meetelt en niet als padding of margin geldt. En als ik die twee dus op 0 zet ik nog steeds het stuk onder de baseline heb?

Ja. De baseline is in feite het lijntje waar je op de basisschool op moest leren schrijven in je lijntjesschrift, waarbij enkel bepaalde letters er een stukje onder mochten inline-block elementen worden standaard ook op die baseline uitgelijnd, en dus zit daar nog een stukje ruimte onder.

Krilo_89 schreef op maandag 14 januari 2013 @ 14:37:
[...]
Wanneer er links om de images heen staan, moet je de images display: block; meegeven, anders krijg je dezelfde ruimte onder de images. Dus probeer het eens met display: block;
[...]

display:block helpt inderdaad ook; vertical-align is immers niet van toepassing op block-level elementen.

Het is echter wel belangrijk om te weten wat de daadwerkelijke oorzaak is. Je zal niet in alle gevallen je images een display:block kunnen geven...