Gunlaug Sørtun wrote:
>>>><http://www.stoneladder.ca/sandbox/lbk/index.html>
>>>>
>>>>
>>
>Give that page a few [+]steps font-resizing in Firefox. You'll see that
>the headline-text is growing downwards - even before splitting into two
>lines. Ideally (from my point of view), a better alignment may be
>achieved by using font-size related margins *and* paddings on h1.
>However, that would make the two background images get out of alignment
>with each other if/when font-resizing is applied, and a slightly
>different strategy would be needed for the whole header for it to work
>and look right.
>[...]
>
A slightly different strategy ... got an idea ...
* Give the #headerwrap an inside <div>, allocate the rightside img
from h1 to this <div>,
* Give the h1 a margin-left and margin-right equal to the img-width,
* Take the max. font-size option in IE, and adapt the h1 fontsize
so, that it just fits between the images.
* Then no ugly large font in IE (do they deserve it?).
* See if this smaller font doesn't disturb the page layout, when
scaled back to the normal font size in IE (and FF and so [1]),
* Give the h1 a fixed margin-top for the small font-size (and
compensate with a negative margin-top for the #headerwrap),
* Hmm, add corrections for IE,
* Set a padding-top and padding-bottom for the h1 to suggest
vertical-align:middle when big font-sizes [2][3],
* Give the image itself more height
<http://home.tiscali.nl/developerscorner/css-discuss/images/lionbear-logo121x300.jpg>,
and paint the area under the existing img in the img-bgcolor, then
there is no black gap under the images as the h1 breaks in 2 lines
(kind of 'faux column').
And in the meantime seeing the overlapping buttons at font-resizing ...
* Take a big font-size again; enlarge the line-height in that
amount, that there is some space between the lines,
* Adapt the vertical margins/paddings of the containers of the
menu-buttons,
* See if it works at normal and small browser font-size.
... then there wil be more or less something like a testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-lionbear.htm>.
:-)
Greetings,
francky
[1] Opera has a beautifull zoom!
[2] Tried some with { display: table-cell; vertical-align: middle; }-
didn't succeed.
[3] Should be nice if css would allow less padding at bigger font-sizes:
{padding: 1/(.5em)} ;-)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
