ansaurus

Question

chrome does not respect display property

Answer 1

A:

Try inline-block.

Álvaro G. Vicario 2010-07-13 07:01:44

Answer 2

+4 A:

Why on earth would you set a table element to be inline? It should be a display of table. User error IMO.

You'd have to alter the display mode of all the tr and td elements inside otherwise they will improperly render, most likely.

If you need the table to be in the same line as another element, wrap a div around the table and float it. Don't mess with the table.

EDIT: As I specified per my last comment, you should mess with vertical-align and probably set it to top on the tables.

meder 2010-07-13 07:01:56

Of course, this is the only sensible answer.

Álvaro G. Vicario 2010-07-13 07:06:31

What do you mean why? Because sometimes you want tables to stack next to each other instead of piling up one on top of the other. How is that a user error?

davidk01 2010-07-13 07:13:33

@davidk01 - read the last part of my answer.

meder 2010-07-13 07:30:06

@meder - I did and maybe I'm missing something but the alignment is still off. All the tables are aligned with the last row, so if one of the tables is too tall then it sticks out. I want them to align with the top row so even if the tables are uneven their tops are aligned.

davidk01 2010-07-13 07:41:50

@meder - firefox has no problem with this and cheerfully does as I tell it to and aligns all the tables with their top rows.

davidk01 2010-07-13 07:42:24

@meder - floating and clearing doesn't help either since I don't know ahead of time which tables are going to be larger than the others on a given line and some elements in one line inadvertently block the elements below them and don't let them float all the way to the left.

davidk01 2010-07-13 07:45:33

@meder - floating and clearing would work if I knew exactly which elements to clear and I can do some processing with javascript to do so but that's too much work for having consistent layout across chrome and firefox.

davidk01 2010-07-13 07:47:20

It might be useful if you actually posted a demo so we can see your floating problem. Comment bombardment.

meder 2010-07-13 07:48:26

do your screenshots represent display:inline method or float? if display:inline you'll probably have to tinker w/ vertical-align and set it to top. link to source pls.

meder 2010-07-13 07:59:07

Answer 3

+1 A:

To pull of what you're after, you just need to add this to every td:

<td valign="top">

That will force everything to the top of each cell and will force things to display inline, how you want them to. No CSS needed here.

It SHOULD be coded like this:

<table>
 <tr>
  <td valign="top">item 1 info</td>
  <td valign="top">item 2 info</td>
  <td valign="top">item 3 info</td>
 </tr>
 <tr>
  <td valign="top">item 4 info</td>
  <td valign="top">item 5 info</td>
  <td valign="top">item 6 info</td>
 </tr>
</table>

edit: Or if (for some reason) you're not using TR and TD's you can try this:

<table style="vertical-align:top;">
    table stuff
</table>

Tim 2010-07-13 08:06:30

Thanks dude. That did the trick. Now it displays the same way in chrome and firefox. I'm not even gonna bother with IE.

davidk01 2010-07-13 08:15:19

i had that in my comments 16 mins ago :p

meder 2010-07-13 08:15:51

@meder - you just listed some vague comment about `vertical-align` which applies to at least three different elements in the table. @Tim actually listed the exact code that did the trick that's why I accepted his answer.

davidk01 2010-07-13 08:20:43

lol :P I suppose the difference is that I had an example...

Tim 2010-07-13 08:20:54

ok sorry, i assumed you knew what common elements to apply it to, and assumed you could test it out fairly quick. i hope you arent actually using the attribute though.

meder 2010-07-13 08:23:20

@meder - No need to apologize.

davidk01 2010-07-13 08:28:45

Answer 4

+1 A:

css 2.1 defines inline-table. No idea how widely supported it is, but it sounds like that might be what you're looking for.

http://www.w3.org/TR/CSS21/tables.html#table-display

Although from your screenshot, it looks like what you really want is control over vertical alignment.

no 2010-07-13 08:12:03

ansaurus

tags:

views:

answers:

chrome does not respect display property

related questions