[css] display: inline voor table werkt wel in IE, niet in FF

[Verwijderd]

Goeiemiddag,

Ik ben bezig met een ontwerp voor een website en nou heb ik een probleempje met m'n layout. Ik heb een aantal tables die ik gebruik als 'kaartjes'. Als ik de tables 'gewoon' gebruik (dus zonder display attribuut in CSS), dan werken ze zoals het hoort in zowel IE als FF. Maar als ik het display attribuut op inline zet, dan gaat het aardig fout in FF, terwijl IE wel het gewenste effect geeft.

In IE, normaal vs inline


In FF, normaal vs inline


FireFox doet dus opeens moeilijk over m'n table background en de tables staan zowiezo niet inline. Ik heb al eens gekeken op W3C, maar daar stond ook niks wat hielp. De waarde inline-table voor het display attribuut doet in beide browsers niets... De rest van de css die aan de table hangt staat hieronder. Het background attribuut is misschien niet helemaal standaard compliant, maar dan nog snap ik niet dat FF de tables niet goed inline weergeeft.

Cascading Stylesheet:

table.card
{
  width: 350px;
  height: 150px;
  background: url(images/card-title.png) no-repeat top left;
  margin-right: 20px;
  display: inline;
}

De enige oplossing die ik nu zo snel kan bedenken is om de 'kaartjes' tables weer in een grotere table onder te brengen en het effect gewoon met rijen van 2 cellen breed te maken, maar dat is weer een hoop extra werk (i.v.m. de back-end) en het zou eigenlijk niet nodig moeten zijn, toch?

Iemand enig idee?

[chris]

Wazig. Je kan ook je tables op float: left zetten.

[Verwijderd]

Nou breek me klomp

Dat werkt wel prima in alletwee, dank je!

[BtM909]

Een float klinkt ook logischer voor je ontwerp, kan me even geen situatie voorstellen dat ik een tabel een display inline zou geven

[BtM909]

Zeer waarschijnlijk doet Firefox het wel goed. De definitie van inline is nl. This value causes an element to generate one or more inline boxes.

Als ik nu een theorie zou moeten bedenken die FF rechtvaardigd

Aangezien je tabel uit meerdere elementen bestaat (het element tabel is op zich zelf geen item natuurlijk), worden de child elementen inline gedisplayed. IE doet het echter verkeerd en displayed the table in z'n geheel als inline (bijna hetzelfde als de float).

[Clay]

Eigenlijk is "inline" een beetje een ongelukkige naam voor de property. Je zou denken dat het iets betekent ala "zet dingen op 1 regel". Op zich is dat ook wel zo, maar de definitie is (zie boven): This value causes an element to generate one or more inline boxes. Dus:

code:

<p style="width:200px;">
    Lorem ipsum dolor 
    <span style="background:green;">
        sit amet, consectetuer adipiscing
    </span>
    elit.
</p>

2 inline boxes uit 1 span \o/

Nou wil ik niet belerend overkomen, maar het is nogal logisch dat een inline element dan dus geen width danwel height kan hebben, hoe zou je dat in het bovenstaande voorbeeld voor je zien?
Zo kan je dus ook niet zomaar tables ermee verwachten te positioneren.

Wat betreft die float zou ik dus ook ff goed lezen wat die hoort te doen, en niet wat het visuele effect is in IE.

[BtM909]

Clay schreef op dinsdag 20 december 2005 @ 15:54:

Wat betreft die float zou ik dus ook ff goed lezen wat die hoort te doen, en niet wat het visuele effect is in IE.

Impliceer je nou dat de float daar eigenlijk niet hoort?

[Verwijderd]

juist, inline-block is eigenlijk het juiste hier

float is voor text-wrap achtige dingen eigenlijk (allerlei float problemen zijn terug te voeren op het verwachten van inline-block ipv float)