- General
- Mozilla Firefox
- Opera
- Apple Safari
- Microsoft Internet Explorer
- iCab
- Netscape Navigator
- NCSA Mosaic
Assumptions:
- All computed sizes are returned in pixels
Algorithm:
- Use floats for tabs. Clear after floats and add bottom border.
Loop:
- Take all floats with the same y-position -> one row
- Calc tallest box. Force height fo all tabs in row to this height
(This will force the next row to adopt a uniform y position)
- Store the border-box height as the row height
- Store the y-position of the row within the container
- Calculate remaining space on this line and split among the
left and right paddings
- Determine which row has focussed tab
- Determine y-position of conainer's bottom
- Calc dist from focussed row bottom to container bottom
- Relatively position focussed row down by dist
- Relatively position all following rows up by focussed row height
- For focussed tab
- reduce all margins by border-width
- increase all padding by this amount
Notes:
- Active tab uses larger font to test perverse conditions :)
The algorithm can handle it just fine, though it's not particularly
recommended where navigation between tabs is frequent. (The tabs
reshuffle themselves when you switch from increasing text size on a
just a short tab to increasing it on a long one.)