Oh! I get it. Finally!!! :) It has always been my understanding, from some
books that I have read (like CIW's books, ciwcertified.com, which go into
some detail just not a lot) and a few others, that a pixel (in relation to
size, meaning if you looked at your screen closely the little squares on
your screen are "natural" pixels but the computer/browser/other settings can
change the default size) was only "enlarged" meaning that 1px would be one
pixel, but take up so many of the screen's "natural" pixels if the user
enlarged the screen.

But what you said makes more sense than that. Now I realize where most of my
problems have stemmed from.

--
Brett P.


On Tue, Feb 3, 2009 at 6:27 PM, Benjamin Hawkes-Lewis <
bhawkesle...@googlemail.com> wrote:

> 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: memberh...@webstandardsgroup.org
> *******************************************************************
>
>


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************

Reply via email to