Re: Position: relative and table cells

> This is not the first time I see code like this. People are mixing CSS 
> positioning with table layout. There must be some sites which are 
> promoting use of this.

The case I was asked to debug was the following one: a variable-sized 
toolbar split in a fixed number of columns (buttons) with 
vertically-centered text inside the buttons; this was solved using a table 
with "text-align: center; vertical-align: middle;" & padding on the cells. 
Then, there was the absolutely positioned element which was actually a link 
on which users could click that had to cover the whole surface of the table 
cell (and not just the centered text). This was necessary to have a good 
touch surface, and to apply a semi-transparent white background on hover as 
lighting effect for mouse users (hence "position: relative" on the cell and 
top/right/bottom/left positionning on the link).

With flexbox & the new align properties (or better with grids), the issue 
would have been solved more easily, but that was not an option since not all 
the targeted browser have them already. 

Received on Thursday, 13 June 2013 21:14:35 UTC