rbelow / blueprintcss

Automatically exported from code.google.com/p/blueprintcss
1 stars 0 forks source link

reset.css hacks I : Tables vs. vertical-align:baseline #60

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago
I think I have two solid issues and a comment about the reset.css file,
I'll post one message for each case.

TABLES vs. vertical-align:baseline
This may be not easy to spot because we use to avoid tables as if they were
some kind of evil thing, but sooner or later you'll have to use some tables
with images or iframes on it cells and will discover that columns content
DO NOT ALIGN VERTICALY.
if you have this code:

<table>
<tr><td><img src=..></td>
<td>Text<img src...></td>
<td><iframe...></td>
</tr>
</table>

Instead of having the usual horizontal layout, you'll end up with some
weird "staircase" vertical alignment, with the leftmost column way down
with an unexpected blank space at the top of the image/element, the central
column not so down, but still with a weird blank space on top of the
content and the right most column content correctly vertical aligned, but
with a remaining blank space down because the vertical displacement of the
first column.

The problem lies in the reset.css's first definition of
vertical-align:baseline, wich BTW is only valid for inline elements and
table cells.
( http://www.ibloomstudios.com/articles/vertical-align_misuse/ )
Table cells (td) with vertical-align:baseline get a very unpredictable
effect depending entirely of the content inside each cell.
( http://www.w3.org/TR/1998/WD-css2-19980128/tables.html#h-17.4 )

I propose to change vertical-align:baseline to vertical-align:middle.
Besides helping fix this weird td's vertical issue, it seems to be more
useful to have "middle" as a default position for inline elements,
otherwise you are forced to always make vertical-align fixes for labels,
images, and other elements.
There's no harm on making vertical-align:whatever on block elements like
div's, pre's, H1, H2, H3 etc. but is pointless.

Original issue reported on code.google.com by digita...@gmail.com on 14 Nov 2007 at 12:12

GoogleCodeExporter commented 8 years ago
Sounds reasonable, I'll try it out. Thanks a lot. :)

Original comment by ola...@gmail.com on 18 Nov 2007 at 1:22

GoogleCodeExporter commented 8 years ago
Fixed in the next release.

Original comment by ola...@gmail.com on 13 Jan 2008 at 3:05