On 3/2/09 20:13, Brett Patterson wrote:
I really don't understand what you mean, when you say:
It's a designer-bug. Vertical position of the navigation relies entirely
on font size, which means it is all over the place in my browsers on
first load.
No two browsers calculate font size exactly the same before rendering,
so relying on "pixel-perfect" font size across browser-land is not a
good idea. Add in font resizing and other regular options in browsers,
and it gets a lot worse - for the whole layout.
The problem should not rely on font size, but rather the margin from the
top of the item that margin-top is being applied to, to the bottom of
the item that is directly above the item that margin-top is being
applied to, correct?
I think Gunlaug is referring to this (simplified):
<div id="hdr">
<img alt="Text equivalent" src="logo.gif" />
<div id="pageheader">
Title here
<div id="tabs">
Tabs here
</div>
</div>
</div>
#hdr {
border-bottom: 1px solid #CC9966;
height: 90px;
}
#pageheader {
float: left;
}
You've floated #pageheader out of the normal flow that determines the
height of #hdr, and there's nothing in place to force #hdr to contain
the lowest floated descendant. The logo image is in normal flow but it
is 85px tall, so what determines the height of #hdr is the "height:
90px;" setting.
Consequently, the alignment of the bottom of #tabs with the bottom
border #hdr depends on #pageheader actually being 90px tall. Since it's
got text inside it, and you can suggest but cannot expect a font height
(and therefore cannot even make a reliable prediction about how many
lines a given string will need), that dependency is brittle in the
extreme. In Firefox 3's Zoom submenu (under the View menu) try ticking
"Zoom Text Only" and then zooming in twice to watch it break horribly,
with the title text wrapping to the next line forcing the tabs entirely
below the border.
For further reading see:
* http://www.w3.org/TR/CSS21/visudet.html#the-height-property
* http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins
* http://www.ejeliot.com/blog/59
I mean I do know that font size across browsers does not render the
same, but if using pixels for a font size, should the pixels (in
relation to size) render the same?
I'm not entirely sure I understand the question ("in relation to size" -
size of what?).
The size of a CSS pixel is intended to be relative to the resolution of
the viewport, and is ultimately up to the user agent:
"Pixel units are relative to the resolution of the viewing device, i.e.,
most often a computer display. If the pixel density of the output device
is very different from that of a typical computer display, the user
agent should rescale pixel values. It is recommended that the reference
pixel be the visual angle of one pixel on a device with a pixel density
of 96dpi and a distance from the reader of an arm's length. For a
nominal arm's length of 28 inches, the visual angle is therefore about
0.0213 degrees."
http://www.w3.org/TR/CSS21/syndata.html#length-units
Most desktop browsers make a CSS pixel a monitor pixel, however most
desktop browsers (Opera, IE7, IE8, Firefox 3) also include a zoom
function that changes the effective pixel size up or down. Note that
some zoom functions (Opera, IE8) include fit-to-width reflowing
capabilities that mean that there's no guarantee that a box width in px
will remain proportional to a font height specified in px.
Most desktop browsers (IE, Firefox, Safari) allow users to adjust the
font size up or down in steps. In IE's case, these adjustments do not
affect font sizes specified in pixels.
In addition, most desktop browsers (IE, Opera, Firefox, Safari) enforce
minimum font sizes in real pixels and allow users to change them, and
allow users to disregard publisher suggestions about font size and set
enforce their own preferences.
--
Benjamin Hawkes-Lewis
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
