Re: [css-d] Weird alignment issue with IE 7...

[david]

Michael Beaudoin wrote:
> On Aug 11, 2009, at 1:08 PM, David Laakso wrote:
> 
>> Michael Beaudoin wrote:
>>> I think I know. Are you enlarging the type?
>>>
>>> M
>>>
>>>
>>> On Aug 11, 2009, at 12:47 PM, David Laakso wrote:
>>>
 Michael Beaudoin wrote:
> What is broken? I'm looking at Firefox v3.5.2 and it looks ok to  
> me.
>
> - http://www.ba-doyn.com/junk/saw/index.htm
> - http://www.ba-doyn.com/junk/saw/services.htm
> It looks fine in Firefox

>> Preferences:
>> Font-size: Default.
>> Minimum Font-size: 14.
>> Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2)  
>> Gecko/20090729 Firefox/3.5.2
>>
>> 
>>
>> PS Replies to the list. Please bottom post. Thanks :-) .
> 
> Is anyone seeing what David sees in Firefox? It looks fine to me in  
> Firefox Mac and PC.
> 
> http://www.ba-doyn.com/junk/saw/index.htm
> http://www.ba-doyn.com/junk/saw/services.htm
> 
> David's view: http://chelseacreekstudio.com/ca/cssd/mb.png

I see this in FF 3.06 on Linux, min font size 15px:

http://www.clanjones.org/SucceedingAtWork.png

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[david]

Dave Sherohman wrote:
> On Tue, Aug 11, 2009 at 11:11:04AM +0200, Michal Suchanek wrote:
>> Even if points are not precise unit in CSS because of browser and OS
>> problems most users can set their DPI in their preferences if it is
>> not automatically determined from screen size (unless they are running
>> a particularly abhorrent browser + OS combination).
>>
>> Once you set the DPI properly sites designed in points, mm or em
>> should be reasonably readable for you.
> 
> Not really, at least as far as points/mm are concerned[1], assuming that
> by "properly" you mean "determined from screen size".
> 
> Setting your browser/OS DPI setting to match the physical DPI of your
> display means that 12pt text on the screen will be the same size as 12pt
> text on a printed page.  However, this does not mean that the text will
> be readable if, say, the screen is an HDTV and you're sitting on the far
> side of the room.
> 
> I would argue that display DPI should be based on what the user finds
> most usable in their particular environment and physical screen DPI
> should be completely ignored except in a handful of special cases, such
> as computers being used for print design, where it's actually important
> to be able to clearly relate the screen display to the size of a
> physical object.  But, then, I would also argue that, aside from those
> few special cases, DPI should be abandoned when dealing with computer
> displays, as trying to relate on-screen display sizes to physical sizes
> is fundamentally misguided, since you have no way of knowing whether the
> user wants ultra-dense display to fit on their iPhone or five-inch-high
> text for their gigantic HD rig.

Or my boss, who runs his 17" 1280x1024 twin displays at 800x600 so he 
can get a desktop text size he can read.

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Main Content Following Left Sidebar

[sono-io]

On Aug 11, 2009, at 1:42 PM, David Hucklesby wrote:

> Using the code from your site this morning, and simply adding
> "overflow: hidden;" to the rule for .ul-tabs-nav put the border line  
> below the tabs, as I believe you want.

Oh, man... I had added it to the .ui-tabs-nav:after rule instead.  I  
moved it to the .ul-tabs-nav rule and it's working now!


> I see this @ line 273 et seq.
> -->
> 
> 

Wow, I've been staring at this for too long.  IIRC, that was put in  
by Dreamweaver(?) when I started with it's 2-column template.  I've  
now removed all the style tags.

Thanks a million, David!  I really do appreciate your help.

Frank
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Question about width and min-width in ul

[Christopher Barth]

Thanks. This did the trick.

Chris Barth

-Original Message-
From: David Hucklesby [mailto:huckle...@gmail.com] 
Sent: Tuesday, August 11, 2009 3:04 PM
To: Christopher Barth
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Question about width and min-width in ul

Christopher Barth wrote:
> I have a menu system that uses nested ULs. The main menu is a fixed 
> size, but I want the sub menu's to be variable width that will grow
> to encompass the entire width of the menu item. I figured min-width
> would do this; however, it only grows to be as big as the longest
> non-breaking string.
> 
> I thus have a two line menu looking like this:
> 
> Photo Library
> 
> When I want a menu item like this:
> 
> Photo Library
> 
--
Theoretically you could use "whitespace: nowrap;" to do this. Certain
older browsers don't respect this, so I suggest using a non-breaking
space between the two words instead.

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[David Laakso]

Michael Beaudoin wrote:
> What is broken? I'm looking at Firefox v3.5.2 and it looks ok to me.
>
> - http://www.ba-doyn.com/junk/saw/index.htm
> - http://www.ba-doyn.com/junk/saw/services.htm
>>
> It looks fine in Firefox





Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) 
Gecko/20090729 Firefox/3.5.2






__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Felix Miata]

On 2009/08/11 12:26 (GMT-0400) Sam Brown composed:

> I hate to skew the discussion by introducing another variable, but while
> it is true that a layout designed using px for sizing is essentially
> cemented in that size, all of the modern browsers I have seen now
> emphasize page zooming over text scaling. So it is certainly true that a
> user may choose to increase or decrease the font-size locally, I consider
> that out of my control

Thank goodness. :-) CSS is supposed to be suggestive, not domineering.

> and by doing so, the user accepts that a layout may
> not hold together as well as it was originally designed.

He shouldn't. It needn't be that way except for extreme cases.

> However, if a
> user has poor eyesight, for example, and wants larger text, they can use
> the page zoom features of the browser to safely increase or decrease the
> zoom and NOT impact the layout of the page at all.

Page zoom is no panacea. Each variant has its flaws, besides being a defense
mechanism that wouldn't be needed absent an offense.

> I understand the argument from a purist perspective, usability should be
> first and foremost in any design and/or layout, but realistically, I don't
> see this as a practical issue given the more common usage of page zooming
> over the now declining exposure of any sort of text scaling behavior in
> modern browsers. How long do we design or build in support for what is
> essentially becoming a deprecated behavior?

1-"Becoming" is the keyword in your question. It will be quite some time yet
before all common browsers incapable of page zoom fall into disuse. In the
meantime and beyond, designing for resolution independence via em remains as
a method of universal support regardless of browser features and user
personalizations.

2-Minimum font size, text zoom, and page zoom are all defense mechanisms,
implemented after CSS gave designers the power to completely disregard a
user's desktop and browser settings, needs and preferences. Designs that
require users to employ defenses are by definition offensive, and rude,
considering it is perfectly feasible to design politely using em sizing
instead of px or absolute sizing.

3-In discussions among designers about the capabilities and effects of text
zoom it is often overlooked that most users' browsers have the capability to
text zoom before the fact, in the form of personalizable default text
settings for the browsers installed on their personal computers. Pages
shouldn't, and needn't, fall apart simply because a user chooses to
personalize his personal computer instead of employing a page zoom defense
against offensive web page designs.

4-Even when it does come to pass that most browsers in common use offer page
zoom, users may still prefer to leave images at their intrinsic or specified
size, and change only the size of text, before or after the fact.
-- 
How much better to get wisdom than gold, to choose
understanding rather than silver. Proverbs 16:16 NKJV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Felix Miata]

On 2009/08/11 12:24 (GMT+0200) Michal Suchanek composed:

> ... Typically you look at the
> screen from a distance similar to that from which you look at printed
> paper

Probably correct for laptops, but not for desktops, which is a large part of
why the Windows default DPI assumption is 96:
http://blogs.msdn.com/fontblog/archive/2005/11/08/490490.aspx

> so the physical DPI is a good starting point for most desktop
> systems. There is nothing stopping you from setting the DPI smaller or
> larger to accommodate for different conditions.

Indeed, on Linux a designer can test multiple DPI configurations on a single
physical display in a few seconds or less per switch, facilitating emulation
of a panoply of user environmental possibilities without consuming extra
desktop space or electricity.

> Unlike sites designed
> in pixels sites designed in points will obediently resize to match you
> DPI settings.

But, unlike with em sizing, this doesn't necessarily correlate to matching
what a visitor finds to work best.
-- 
How much better to get wisdom than gold, to choose
understanding rather than silver. Proverbs 16:16 NKJV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] image cut-off in IE7

[Greg Wilker]

I did not create the original styles on this site - but am working to fix
some things...

Anyone see/know why the thumb image on the top middle content item
(Consultancy Draws on Intimate Knowledge...) is cut off in IE7?

http://www.apparelnews.net/features/profiles_qa/


I believe that this is the only browser with the issue.

(It works/loads correctly in IE8, by the way...)

TIA,
Greg

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Min-Width Question

[Climis, Tim]

> Under what circumstances might a container that has min-width set not
> grow beyond the size of min-width?

If the container doesn't need to grow beyond min-width.

To put that answer in the context of your previous question, browsers would 
rather expand down than out.  If an item can wrap, it will, and then the 
element width doesn't need to grow.

So there are two ways around this:

You can use   between your words to force the words to not wrap. 
(Non-Breaking SPace means that a line can't break at it.  I forget, but I think 
some browsers may not actually implement this correctly)  

Or you can make your min-width big enough so your longest list-item doesn't 
wrap (300px will do, unless someone decides your text is too small, which is 
pretty likely).

---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Bobby Jack]

--- On Tue, 8/11/09, Sam Brown  wrote:

> I understand the argument from a purist perspective,
> usability should be first and foremost in any design and/or
> layout, but realistically, I don't see this as a practical
> issue given the more common usage of page zooming over the
> now declining exposure of any sort of text scaling behavior
> in modern browsers. How long do we design or build in
> support for what is essentially becoming a deprecated
> behavior?

Personally, I rue this so-called 'advance'. It smacks very much of 'not 
everyone can design their site to handle text scaling nicely, so let's just 
settle for second best by default'.

- Bobby

--
www.fiveminuteargument.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Main Content Following Left Sidebar

[David Hucklesby]

sono...@fannullone.us wrote:
> 
> On Aug 11, 2009, at 11:48 AM, David Hucklesby wrote:
> 
>> Odd. Adding "overflow: hidden;" to .ul-tabs-nav put the .ul-tabs-panel
>> border below the tabs this end. On which browser does this not work? (I
>> am on a Mac...)
> 
> Same here - I'm using both Safari 4.0.1 and Camino 1.6.8 on OS 
> 10.5.7 and the tab border is showing above the tabs on both.  I decided 
> to check it in Parallels with IE6, and the border displays properly (go 
> figure).  Strangely, though, in IE6 the selected tab gets "disconnected" 
> from the other tabs and stays put on the screen when scrolling down the 
> page!
> 
--
Using the code from your site this morning, and simply adding
"overflow: hidden;" to the rule for .ul-tabs-nav put the border line 
below the tabs, as I believe you want. See this screen shot:
http://www.sendspace.com/file/5tmy1c

That screen shot is from Firefox 3.5, but I get the same result on 
Safari 4 and Opera 9.6, so I don't know what else to suggest.

> 
>> BTW - You have HTML code in your css-superior.css file. That won't do.
> 
> There shouldn't be.  What are you seeing?
> 
--
I see this @ line 273 et seq.
-->



Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[David Laakso]

Michael Beaudoin wrote:
>>
 

 
>>> Is anyone seeing what David sees in Firefox? It looks fine to me in
>>> Firefox Mac and PC.
>>>
>>> http://www.ba-doyn.com/junk/saw/index.htm
>>> http://www.ba-doyn.com/junk/saw/services.htm
>>>
>>> David's view: http://chelseacreekstudio.com/ca/cssd/mb.png
>>>
>>> Thanks.
>>> Michael
>>>
>>>   
>> Michael,
>>
>> See for yourself.
>>
>> Firefox>Preferences>Size 16>Advanced>Minimum font size: 14.
>> 
>
> Ok. I see what you mean now. Do many people go in and change that?
>   


It only takes one person to go in and do that. You never know what a 
user or savvy client may do. This does not mean that you need live in 
fear. But it is best not to make assumptions. Rigorous stress testing is 
always a good idea.


> How do I get around that?
>   


See my reply earlier today (if not the same suggestion made a couple of 
weeks ago) regarding the ul. It is only a start point. And David H. 
pointed you to Georg's article. If you run into difficulty, bring it back.


> Thanks,
> Michael
>
>   

Tracy














__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[Tim Snadden]

On 12/08/2009, at 7:41 AM, Michael Beaudoin wrote:

>> --
>>
>> Message: 22
>> Date: Tue, 11 Aug 2009 15:22:02 -0400
>> From: David Laakso 
>> Subject: Re: [css-d] Weird alignment issue with IE 7...
>> To: Michael Beaudoin 
>> Cc: css-d@lists.css-discuss.org
>> Message-ID: <4a81c4da.6000...@chelseacreekstudio.com>
>> Content-Type: text/plain; charset=ISO-8859-1; format=flowed
>>
>> Michael Beaudoin wrote:
>>> On Aug 11, 2009, at 1:08 PM, David Laakso wrote:
>>>
>>>
 Michael Beaudoin wrote:

> I think I know. Are you enlarging the type?
>
> M
>
>
> On Aug 11, 2009, at 12:47 PM, David Laakso wrote:
>
>
>> Michael Beaudoin wrote:
>>
>>> What is broken? I'm looking at Firefox v3.5.2 and it looks ok to
>>> me.
>>>
>>>
>>> - http://www.ba-doyn.com/junk/saw/index.htm
>>> - http://www.ba-doyn.com/junk/saw/services.htm
>>>
>>> It looks fine in Firefox
>>>
>>
 Preferences:
 Font-size: Default.
 Minimum Font-size: 14.
 Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2)
 Gecko/20090729 Firefox/3.5.2

 

 PS Replies to the list. Please bottom post. Thanks :-) .

>>>
>>> Is anyone seeing what David sees in Firefox? It looks fine to me in
>>> Firefox Mac and PC.
>>>
>>> http://www.ba-doyn.com/junk/saw/index.htm
>>> http://www.ba-doyn.com/junk/saw/services.htm
>>>
>>> David's view: http://chelseacreekstudio.com/ca/cssd/mb.png
>>>
>>> Thanks.
>>> Michael
>>>
>>
>>
>> Michael,
>>
>> See for yourself.
>>
>> Firefox>Preferences>Size 16>Advanced>Minimum font size: 14.
>
> Ok. I see what you mean now. Do many people go in and change that?
>
> How do I get around that?

Felix? ;-)

Not to be too trite about it but there isn't a simple answer. It's  
just an issue that you always need to be aware of with HTML/CSS  
development. You do not know many things about how a user is going to  
see your site - user agent, screen resolution, viewport dimensions  
(i.e. maximised browser window or not), fonts installed, font  
preference, minimum font size, what the length of the content is going  
to be...

There are also many techniques and approaches to this. The most basic  
thing you can do is to avoid setting the height of elements where you  
don't need to. That way if the content needs to wrap it can push other  
elements down. You could also consider setting dimensions in ems. That  
way your element will be sized in proportion with the user's font size.

It can seem relatively easy to get a layout working correctly for  
*you* but setting it up so that your site will remain intact in a  
range of circumstances can take a bit trickier.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Question about width and min-width in ul

[David Hucklesby]

Christopher Barth wrote:
> I have a menu system that uses nested ULs. The main menu is a fixed 
> size, but I want the sub menu's to be variable width that will grow
> to encompass the entire width of the menu item. I figured min-width
> would do this; however, it only grows to be as big as the longest
> non-breaking string.
> 
> I thus have a two line menu looking like this:
> 
> Photo Library
> 
> When I want a menu item like this:
> 
> Photo Library
> 
--
Theoretically you could use "whitespace: nowrap;" to do this. Certain
older browsers don't respect this, so I suggest using a non-breaking
space between the two words instead.

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Min-Width Question

[Tim Snadden]

On 12/08/2009, at 6:59 AM, Christopher Barth wrote:

> Under what circumstances might a container that has min-width set not
> grow beyond the size of min-width?

I'm not sure exactly what you mean by this question. Do you mean -  
what are some possible reasons as to why an element that you believe  
should expand beyond it's min-width is not expanding? Or is there a  
more subtle question there that I'm not seeing?

If you are in a situation where a box that you believe should be able  
to expand is not expanding I'd recommend providing a link for us to  
look at.

Possibilities off the top of my head...

- invalid HTML (always the first test)
- invalid CSS (always the second test)
- the width of the element's content is narrower than the min-width!
- the browser doesn't support min-width (and perhaps has a width set  
in a separate stylesheet)
- absolute or fixed positioned content (outside of document flow)
- floated content (not really a width issue but if floats aren't  
contained then it may not be apparent what the width of an element is)

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[Michael Beaudoin]

> --
>
> Message: 22
> Date: Tue, 11 Aug 2009 15:22:02 -0400
> From: David Laakso 
> Subject: Re: [css-d] Weird alignment issue with IE 7...
> To: Michael Beaudoin 
> Cc: css-d@lists.css-discuss.org
> Message-ID: <4a81c4da.6000...@chelseacreekstudio.com>
> Content-Type: text/plain; charset=ISO-8859-1; format=flowed
>
> Michael Beaudoin wrote:
>> On Aug 11, 2009, at 1:08 PM, David Laakso wrote:
>>
>>
>>> Michael Beaudoin wrote:
>>>
 I think I know. Are you enlarging the type?

 M


 On Aug 11, 2009, at 12:47 PM, David Laakso wrote:


> Michael Beaudoin wrote:
>
>> What is broken? I'm looking at Firefox v3.5.2 and it looks ok to
>> me.
>>
>>
>> - http://www.ba-doyn.com/junk/saw/index.htm
>> - http://www.ba-doyn.com/junk/saw/services.htm
>>
>> It looks fine in Firefox
>>
>
>>> Preferences:
>>> Font-size: Default.
>>> Minimum Font-size: 14.
>>> Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2)
>>> Gecko/20090729 Firefox/3.5.2
>>>
>>> 
>>>
>>> PS Replies to the list. Please bottom post. Thanks :-) .
>>>
>>
>> Is anyone seeing what David sees in Firefox? It looks fine to me in
>> Firefox Mac and PC.
>>
>> http://www.ba-doyn.com/junk/saw/index.htm
>> http://www.ba-doyn.com/junk/saw/services.htm
>>
>> David's view: http://chelseacreekstudio.com/ca/cssd/mb.png
>>
>> Thanks.
>> Michael
>>
>
>
> Michael,
>
> See for yourself.
>
> Firefox>Preferences>Size 16>Advanced>Minimum font size: 14.

Ok. I see what you mean now. Do many people go in and change that?

How do I get around that?

Thanks,
Michael


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Main Content Following Left Sidebar

[sono-io]

On Aug 11, 2009, at 11:48 AM, David Hucklesby wrote:

> Odd. Adding "overflow: hidden;" to .ul-tabs-nav put the .ul-tabs-panel
> border below the tabs this end. On which browser does this not work?  
> (I
> am on a Mac...)

Same here - I'm using both Safari 4.0.1 and Camino 1.6.8 on OS 10.5.7  
and the tab border is showing above the tabs on both.  I decided to  
check it in Parallels with IE6, and the border displays properly (go  
figure).  Strangely, though, in IE6 the selected tab gets  
"disconnected" from the other tabs and stays put on the screen when  
scrolling down the page!

> The generated content is not needed with the overflow method of
> containing the floated tabs...

I commented out the  content:" ";  line but it didn't change  
anything.  Is that not what you meant?

> BTW - You have HTML code in your css-superior.css file. That won't do.

There shouldn't be.  What are you seeing?

Thanks,
Frank
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[David Laakso]

Michael Beaudoin wrote:
> On Aug 11, 2009, at 1:08 PM, David Laakso wrote:
>
>   
>> Michael Beaudoin wrote:
>> 
>>> I think I know. Are you enlarging the type?
>>>
>>> M
>>>
>>>
>>> On Aug 11, 2009, at 12:47 PM, David Laakso wrote:
>>>
>>>   
 Michael Beaudoin wrote:
 
> What is broken? I'm looking at Firefox v3.5.2 and it looks ok to  
> me.
>
>   
> - http://www.ba-doyn.com/junk/saw/index.htm
> - http://www.ba-doyn.com/junk/saw/services.htm
>   
> It looks fine in Firefox
>   
 
>> Preferences:
>> Font-size: Default.
>> Minimum Font-size: 14.
>> Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2)  
>> Gecko/20090729 Firefox/3.5.2
>>
>> 
>>
>> PS Replies to the list. Please bottom post. Thanks :-) .
>> 
>
> Is anyone seeing what David sees in Firefox? It looks fine to me in  
> Firefox Mac and PC.
>
> http://www.ba-doyn.com/junk/saw/index.htm
> http://www.ba-doyn.com/junk/saw/services.htm
>
> David's view: http://chelseacreekstudio.com/ca/cssd/mb.png
>
> Thanks.
> Michael
>   


Michael,

See for yourself.

Firefox>Preferences>Size 16>Advanced>Minimum font size: 14.

"Anyplace is better
Starting from zero got nothing to lose
Maybe well make something
But me myself I got nothing to prove"

--Tracy Chapman
Lyrics. Fast Car.


































__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[David Hucklesby]

Michael Beaudoin wrote:
> On Aug 11, 2009, at 1:08 PM, David Laakso wrote:
> 
>> Michael Beaudoin wrote:
>>> I think I know. Are you enlarging the type?
>>>
>>> M
>>>
>>>
>>> On Aug 11, 2009, at 12:47 PM, David Laakso wrote:
>>>
 Michael Beaudoin wrote:
> What is broken? I'm looking at Firefox v3.5.2 and it looks ok to  
> me.
>
> - http://www.ba-doyn.com/junk/saw/index.htm
> - http://www.ba-doyn.com/junk/saw/services.htm
> It looks fine in Firefox

>> Preferences:
>> Font-size: Default.
>> Minimum Font-size: 14.
>> Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2)  
>> Gecko/20090729 Firefox/3.5.2
>>
>> 
>>
>> PS Replies to the list. Please bottom post. Thanks :-) .
> 
> Is anyone seeing what David sees in Firefox? It looks fine to me in  
> Firefox Mac and PC.
> 
> http://www.ba-doyn.com/junk/saw/index.htm
> http://www.ba-doyn.com/junk/saw/services.htm
> 
> David's view: http://chelseacreekstudio.com/ca/cssd/mb.png
> 

Browsers act differently to minimum font-size settings, and are 
especially vulnerable to problems when you set a base font-size of less 
than 100%. Explanation here:

  

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Min-Width Question

[Christopher Barth]

Under what circumstances might a container that has min-width set not
grow beyond the size of min-width?

Chris Barth
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Main Content Following Left Sidebar

[David Hucklesby]

sono...@fannullone.us wrote:
> Hi David,
> 
> Thank you for responding to my problem.
> 
>> sono...@fannullone.us wrote:
>>> I think I've narrowed it down.  If I remove the following code in
>>>  the  css-ui.tabs.css file: .ui-tabs-nav:after { display: block; 
>>> clear: both; content: " "; }
>> [...]
 
 http://www.superiorshelving.com/mfg/nexel/test/test6.php
 
>> 
>> You have correctly diagnosed your problem. It's the "clear: both;"
>> on your clearing element. This clears the sidebar before the tabbed
>>  content appears.
>> 
>> Try using "overflow: hidden;" on .ul-tabs-nav to contain the floats
>>  instead.
> 
> This does fix the problem of the content following the left sidebar,
>  but it gives me the same problem as I mentioned in my 2nd e-mail.
> The horizontal line is now above the tabs instead of below them.
> 
> How can I drop that line below the tabs?  I tried adding extra spaces
> to content: " "; but that didn't do anything.
> 

Odd. Adding "overflow: hidden;" to .ul-tabs-nav put the .ul-tabs-panel
border below the tabs this end. On which browser does this not work? (I
am on a Mac...)

The generated content is not needed with the overflow method of
containing the floated tabs...

BTW - You have HTML code in your css-superior.css file. That won't do.

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling forms

[Christopher Schmitt]

On Aug 11, 2009, at 12:25 PM, Krystian - Sunlust wrote:

> Hi, maybe this isn't 100% CSS question, but I'm looking to build a
> simple contact form, name, email, message and submit button (maybe
> captcha too, but optional).
>
> The thing is that no matter how I construct a form it displays wrong,
> either in FF, IE7 or IE8.
>
> I've found some tutorials on Google, but they don't display right on
> ie8 or I simply can't adapt them.


Styling of web form elements consistently is very improbable.

I created a collection of Web forms: http://webformelements.com/  
looking how browsers handle the styling of Web forms.

Browsers vendors don't agree on how to render forms and the W3C spec  
doesn't spell out how they should be designed.

Result? Not so good.

Best,
Christopher Schmitt
http://www.christopherschmitt.com/
Web Design Specialist
Co-Lead, Adobe Task Force for The Web Standards Project
Digital Communications Director, AIGA Cincinnati

--
Register Now for The DIY Summit!
8 Speakers Offering Design Solutions for the One-Person Web Team
September 17, 2009 • 9am - 6pm CT • Online
http://diysummit.eventbrite.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[Michael Beaudoin]

On Aug 11, 2009, at 1:08 PM, David Laakso wrote:

> Michael Beaudoin wrote:
>> I think I know. Are you enlarging the type?
>>
>> M
>>
>>
>> On Aug 11, 2009, at 12:47 PM, David Laakso wrote:
>>
>>> Michael Beaudoin wrote:
 What is broken? I'm looking at Firefox v3.5.2 and it looks ok to  
 me.

 - http://www.ba-doyn.com/junk/saw/index.htm
 - http://www.ba-doyn.com/junk/saw/services.htm
>
 It looks fine in Firefox
>>>
>>>
>>
>
> Preferences:
> Font-size: Default.
> Minimum Font-size: 14.
> Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2)  
> Gecko/20090729 Firefox/3.5.2
>
> 
>
> PS Replies to the list. Please bottom post. Thanks :-) .

Is anyone seeing what David sees in Firefox? It looks fine to me in  
Firefox Mac and PC.

http://www.ba-doyn.com/junk/saw/index.htm
http://www.ba-doyn.com/junk/saw/services.htm

David's view: http://chelseacreekstudio.com/ca/cssd/mb.png

Thanks.
Michael
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Theresa Mesa]

But...the web isn't print. So, unless I'm creating a separate style  
sheet for print, I really don't care how it looks for other people.


Theresa




On Aug 11, 2009, at 2:11 AM, Michal Suchanek wrote:

>
> On the other hand, designing in pixels is like saying "I design this
> web for my screen and I don't care the least how it looks for other
> people".
>

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[David Laakso]

Michael Beaudoin wrote:
> I think I know. Are you enlarging the type?
>
> M
>
>
>
>
>
> On Aug 11, 2009, at 12:47 PM, David Laakso wrote:
>
>> Michael Beaudoin wrote:
>>> What is broken? I'm looking at Firefox v3.5.2 and it looks ok to me.
>>>
>>> - http://www.ba-doyn.com/junk/saw/index.htm
>>> - http://www.ba-doyn.com/junk/saw/services.htm

>>> It looks fine in Firefox
>>
>>
>>
>>
>>
>>
>>
>>
>>
>

Preferences:
Font-size: Default.
Minimum Font-size: 14.
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) 
Gecko/20090729 Firefox/3.5.2



PS Replies to the list. Please bottom post. Thanks :-) .
















__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[David Laakso]

Michael Beaudoin wrote:
>> On 11/08/2009, at 1:10 AM, Michael Beaudoin wrote:
>>
>> 
>>> I just finished roughing out a site for a client and it looks good in
>>> all browsers, except there is an alignment issue in IE 7. If you look
>>> at these sample pages:
>>>
>>> - http://www.ba-doyn.com/junk/saw/index.htm
>>> - http://www.ba-doyn.com/junk/saw/services.htm
>>>
>>> you will see that the vertical white line, which should be between  
>>> the
>>> paragraphs, is off to the right.
>>>
>>> It looks fine in Firefox



Famous last words... :-) .

Not on this end.
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) 
Gecko/20090729 Firefox/3.5.2

Header is broken -- same as it was with your previous URL from a day or 
so ago. In part the header nav ul may need margin:0; and zero out 
padding on right and bottom for same.

I did not look at it in IE/7.












__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling forms

[Christopher Barth]

In order to help we'll need more information about what you've tried and
a link of what your doing would be nice. Many of us have successfully
created forms before, so this is not a technical difficulty.

Also letting us know which technology your using would be very helpful.

This is a form that even impliments Google's Goal Tracking:
http://wynright.com/Contact_Us/Request_Info.aspx.


Chris Barth

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Krystian -
Sunlust
Sent: Tuesday, August 11, 2009 11:25 AM
To: CSS-D
Subject: [css-d] Styling forms

Hi, maybe this isn't 100% CSS question, but I'm looking to build a
simple contact form, name, email, message and submit button (maybe
captcha too, but optional).

The thing is that no matter how I construct a form it displays wrong,
either in FF, IE7 or IE8.

I've found some tutorials on Google, but they don't display right on
ie8 or I simply can't adapt them.

Any help would be appreciated.

Regards,

-- 
Krystian Szastok
Affordable, Freelance Web Designer in Eastbourne, East Sussex:
http://eastbournewebdesign.net
Mobile UK (Orange): 07528 036 337
Call for more information or email me.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Sam Brown]

- Original Message 
> From: Michal Suchanek 
> 
> 2009/8/11 Felix Miata :
> 
> > Unfortunately, using pt, mm or in, regardless of DPI accuracy or screen
> > resolution, doesn't work out all that much better than px. All but em/ex
> > leave visitors' needs and preferences totally out of the sizing equations.
> 
> The difference is that with pt preferences like Windows' "Large fonts"
> apply. With pixels the page is completely cemented to certain number
> of pixels. Fortunately browsers at least tend to scale up the pages
> when printing. Imagine those 16px letters on 1200dpi printouts.


I hate to skew the discussion by introducing another variable, but while it is 
true that a layout designed using px for sizing is essentially cemented in that 
size, all of the modern browsers I have seen now emphasize page zooming over 
text scaling. So it is certainly true that a user may choose to increase or 
decrease the font-size locally, I consider that out of my control and by doing 
so, the user accepts that a layout may not hold together as well as it was 
originally designed. However, if a user has poor eyesight, for example, and 
wants larger text, they can use the page zoom features of the browser to safely 
increase or decrease the zoom and NOT impact the layout of the page at all.

I understand the argument from a purist perspective, usability should be first 
and foremost in any design and/or layout, but realistically, I don't see this 
as a practical issue given the more common usage of page zooming over the now 
declining exposure of any sort of text scaling behavior in modern browsers. How 
long do we design or build in support for what is essentially becoming a 
deprecated behavior?

-- 
-Sam

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Styling forms

[Krystian - Sunlust]

Hi, maybe this isn't 100% CSS question, but I'm looking to build a
simple contact form, name, email, message and submit button (maybe
captcha too, but optional).

The thing is that no matter how I construct a form it displays wrong,
either in FF, IE7 or IE8.

I've found some tutorials on Google, but they don't display right on
ie8 or I simply can't adapt them.

Any help would be appreciated.

Regards,

-- 
Krystian Szastok
Affordable, Freelance Web Designer in Eastbourne, East Sussex:
http://eastbournewebdesign.net
Mobile UK (Orange): 07528 036 337
Call for more information or email me.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Michal Suchanek]

2009/8/11 Theresa Mesa :
> I'm designing for a *web* site. I'm not designing a business card. If I plan
> for people to print it out, I can create a style sheet for that.
>
> I design for greatest usability and accessibility, if possible, checking on
> the PC platform and Mac platform in a number of browsers on each, but it's
> still for the web, not for print. What other people would I be designing
> for?
>

You are designing web pages for yourself?

Web pages are typically designed for other people who visit them.
Their equipment may range from mobile phones through low-end office
PCs to high-end graphics workstations. So if the page usability
depends on readability of an element that is only available in certain
pixel size I would not call it accessible.

If you do not care how it looks what do you design then?

The look is part of the design for visual browsers,


Thanks

Michal

>
>
> On Aug 11, 2009, at 7:33 AM, Michal Suchanek wrote:
>
>> 2009/8/11 Theresa Mesa :
>>>
>>> But...the web isn't print. So, unless I'm creating a separate style sheet
>>> for print, I really don't care how it looks for other people.
>>>
>>>
>>> Theresa
>>
>> Then you can as well draw a picture, print it out, and stick it to
>> your wall. Or put plain text files on your site, no need to bother
>> with those angular HTML tags or styles. Or put Illustrator files
>> there. The fact that 90% people cannot open them should not stop you -
>> you don't care how it looks for them, do you?
>>
>> Thanks
>>
>> Michal
>> __
>> css-discuss [cs...@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Theresa Mesa]

I'm designing for a *web* site. I'm not designing a business card. If  
I plan for people to print it out, I can create a style sheet for that.

I design for greatest usability and accessibility, if possible,  
checking on the PC platform and Mac platform in a number of browsers  
on each, but it's still for the web, not for print. What other people  
would I be designing for?

I don't see your point.


Theresa




On Aug 11, 2009, at 7:33 AM, Michal Suchanek wrote:

> 2009/8/11 Theresa Mesa :
>> But...the web isn't print. So, unless I'm creating a separate style  
>> sheet
>> for print, I really don't care how it looks for other people.
>>
>>
>> Theresa
>
> Then you can as well draw a picture, print it out, and stick it to
> your wall. Or put plain text files on your site, no need to bother
> with those angular HTML tags or styles. Or put Illustrator files
> there. The fact that 90% people cannot open them should not stop you -
> you don't care how it looks for them, do you?
>
> Thanks
>
> Michal
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird alignment issue with IE 7...

[Michael Beaudoin]

> On 11/08/2009, at 1:10 AM, Michael Beaudoin wrote:
>
>> I just finished roughing out a site for a client and it looks good in
>> all browsers, except there is an alignment issue in IE 7. If you look
>> at these sample pages:
>>
>> - http://www.ba-doyn.com/junk/saw/index.htm
>> - http://www.ba-doyn.com/junk/saw/services.htm
>>
>> you will see that the vertical white line, which should be between  
>> the
>> paragraphs, is off to the right.
>>
>> It looks fine in Firefox/Safari for Mac, and Firefox for PC.
>>
>> Any suggestions on this one? I can't seem to figure out why.
>
> Hi Michael - Why don't you put a left border on the element itself? I
> would suggest that this is a much more straightforward approach.
>
> Remove  
>
> #secondBody {
>   border-left: 1px solid #FFF;
>   padding: 0 0 10px 10px; /* Tweak these if need be */
>   margin: 10px 0 10px 10px; / * Tweak these if need be */
> }
>
> If you wanted to get fancier you could set it up so that either side
> could be taller by setting a right border on the other div and pushing
> it across 1px.
>
> Also, #firstBody and #secondBody could be s rather than s.
> Just a thought.

I liked your solution with the border, makes it a bit nicer with the  
rule extending down.

Now, in IE 7, the rule extends all the way down into the footer  
without stopping at the bottom.

Did I code something wrong with regards to the bottom of the rule?

- http://www.ba-doyn.com/junk/saw/index.htm
- http://www.ba-doyn.com/junk/saw/services.htm

Thanks,
Michael
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Michal Suchanek]

2009/8/11 Felix Miata :

> Unfortunately, using pt, mm or in, regardless of DPI accuracy or screen
> resolution, doesn't work out all that much better than px. All but em/ex
> leave visitors' needs and preferences totally out of the sizing equations.

The difference is that with pt preferences like Windows' "Large fonts"
apply. With pixels the page is completely cemented to certain number
of pixels. Fortunately browsers at least tend to scale up the pages
when printing. Imagine those 16px letters on 1200dpi printouts.

Thanks

Michal
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Michal Suchanek]

2009/8/11 Theresa Mesa :
> But...the web isn't print. So, unless I'm creating a separate style sheet
> for print, I really don't care how it looks for other people.
>
>
> Theresa

Then you can as well draw a picture, print it out, and stick it to
your wall. Or put plain text files on your site, no need to bother
with those angular HTML tags or styles. Or put Illustrator files
there. The fact that 90% people cannot open them should not stop you -
you don't care how it looks for them, do you?

Thanks

Michal
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Theresa Mesa]

I've learned much from this discussion. Thank you!

Theresa



On Aug 11, 2009, at 1:37 AM, Dave Sherohman wrote:
>
> That's an easy one...  300px x 454px x 3 bytes/px = 408,600px, or
> 399.0234k of actual, uncompressed image data.  Add some headers and
> metadata, and 399.3k sounds about right as a final uncompressed file
> size.
>
> "Save for Web and Devices" applied jpeg compression to the image,
> producing a file size smaller than the actual uncompressed image size,
> but it still has to be decompressed in memory back up to its full 399k
> to be displayed.

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to get window to crop image?

[Lalena]

Hi guys,
I guess I could just crop the image and make it 100%, but I would be  
"settling," I think, because based on what the current version is  
doing, I'm pretty sure I would see a little of my black background on  
either side. It won't really look like it continues beyond the window  
edge.
Chris, the header on your Neil Parish site looks like it's what I  
want on the right, but not on the left; that's what happened to me  
before--the image anchors itself to the left, and only "bleeds" off  
on the right.
Lalena

> -Original Message-

>> I have a new challenge. In CSS, is it possible to get an image to be
>>
> cropped off on both sides? Or in print language, to "bleed" on both  
> sides?
> --
> Any particular reason why you wouldn't just make the image the size  
> you want? It seems kinda silly and a waste of time to make an image  
> larger than necessary and position it off the page so that it will  
> get cropped when viewed.
> Mike

I agree. However if you positioned the background image to centre and  
it was indeed bigger than the div it would be cropped equally on the
left and right. Kinda pointless unless the containing div is flexible  
so that on a big high res screen, with full screen broswer the user  
can still see an image. I did that for an old site, see:  http:// 
blakeys.com/mep/about.html   and the header image.

CB
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Felix Miata]

On 2009/08/11 11:11 (GMT+0200) Michal Suchanek composed:

> Once you set the DPI properly sites designed in points, mm or em
> should be reasonably readable for you.

Em, yes, as long as the designer makes no assumption that the predetermined
em is wrong and (arbitrarily) changes it.

With pt & mm it might seem so, but it isn't. That "most people" "should" be
happy with a size of Xmm or Ypt leaves it not OK for the rest. Personal
computers are personalizable, which makes them at least theoretically much
better than print precisely for that reason, that those who require larger or
prefer smaller than most can have it, and can have it automatically work for
them just as well as for the majority. With em designs far more visitors can
have instantly acceptable results than with pt, mm or px designs, because it
is the sole province of each visitor to determine the em that works best with
his own eyes on his own hardware.

> On the other hand, designing in pixels is like saying "I design this
> web for my screen and I don't care the least how it looks for other
> people".

Unfortunately, using pt, mm or in, regardless of DPI accuracy or screen
resolution, doesn't work out all that much better than px. All but em/ex
leave visitors' needs and preferences totally out of the sizing equations.
-- 
How much better to get wisdom than gold, to choose
understanding rather than silver. Proverbs 16:16 NKJV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Question about width and min-width in ul

[Christopher Barth]

I have a menu system that uses nested ULs. The main menu is a fixed
size, but I want the sub menu's to be variable width that will grow to
encompass the entire width of the menu item. I figured min-width would
do this; however, it only grows to be as big as the longest non-breaking
string.

I thus have a two line menu looking like this:

Photo
Library

When I want a menu item like this:

Photo Library

I've been using Firebug, Web Developer, and DOM Inspector to help me
figure out what may be going wrong and I've even tested my code at
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_dim_min-width
where it seems to work fine. Any help would be appreciated. I'm new to
this mailing list, but not new to CSS.

The offending menus can be found at http://www.wynright.com/robotics2/
on the left side; the top menus are fixed width.

Chris Barth
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Michal Suchanek]

2009/8/11 Rob Emenecker :
>> Even if points are not precise unit in CSS because of browser
>> and OS problems most users can set their DPI in their
>> preferences if it is not automatically determined from screen
>> size (unless they are running a particularly abhorrent
>> browser + OS combination).
>
> This brings up a very good point that should not be overlooked. While you
> can labor over POINTS, PIXELs, etc., and do the same with COLOR. When you do
> that you are NOT designing for your users. You are designing for your own
> nicely calibrated system.
>
> Users, except for some professionals (photographers, designers, video
> editors, etc.), do not calibrate their systems. They will do loose
> adjustments to their monitor. They may also set their system to "large
> fonts" (Windows, not sure what the equivalent is on Mac).
>
> I know this because I've been there.
>
> Coming from a print and print design background it was perfectly natural to
> me to adjust the DPI of my monitor with a ruler held up to the screen so
> that when I viewed a document at 100% on screen it measured exactly. I also
> did numerous color adjustments using commercial color targets.
>
> Guess what?
>
> People told me
>
> "Type is too large"
> "Text is too small"
> "That color is too red"
> "That color is black" (when it was actually dark brown)
>
> So now I have one monitor that *is* color adjusted with a print and a video
> profile, and an uncalibrated monitor that just has minor contrast/brightness
> adjustments. I let my OS use default DPI, occassionally switching to the
> preset "large fonts" on Windows for testing purposes.
>

Since you have calibrated your monitor you can say with confidence
that the colour is brown.
People with non-calibrated monitors may disagree about the exact
colour but if you designed the page with decent contrast they should
be able to see the elements clearly on any usable monitor.

I have been where a web was designed in pixels to look nice on the
designer's screen and on the bosses screen.

The fact that a somewhat aged secretary in another department has a
smaller screen with the same pixel count (and thus higher DPI) and
cannot read anything on the web  was, of course, completely irrelevant
to the design. What's worse, outside users might often face the same
issue.

It was a while back when there was no IE7 so 90% people would browse
the site with IE6 that refuses to resize pixel based sizes at all.
Were it done in points/em/mm/whatever the windows "use large fonts"
setting would apply.

Some other browsers offer the option to make the text larger but the
design breaks then because it is done in pixels and while the text
resizes the surrounding elements stay the same. Recently browsers
offer an option that works around this poor design. Iinstead of
resizing just the text they scale the whole content as bitmap. It
still looks ugly, though.

Thanks

Michal
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Michal Suchanek]

2009/8/11 Dave Sherohman :
> On Tue, Aug 11, 2009 at 11:11:04AM +0200, Michal Suchanek wrote:
>> Even if points are not precise unit in CSS because of browser and OS
>> problems most users can set their DPI in their preferences if it is
>> not automatically determined from screen size (unless they are running
>> a particularly abhorrent browser + OS combination).
>>
>> Once you set the DPI properly sites designed in points, mm or em
>> should be reasonably readable for you.
>
> Not really, at least as far as points/mm are concerned[1], assuming that
> by "properly" you mean "determined from screen size".
>
> Setting your browser/OS DPI setting to match the physical DPI of your
> display means that 12pt text on the screen will be the same size as 12pt
> text on a printed page.  However, this does not mean that the text will
> be readable if, say, the screen is an HDTV and you're sitting on the far
> side of the room.

That's what falls under "proper" setting. Typically you look at the
screen from a distance similar to that from which you look at printed
paper so the physical DPI is a good starting point for most desktop
systems. There is nothing stopping you from setting the DPI smaller or
larger to accommodate for different conditions. Unlike sites designed
in pixels sites designed in points will obediently resize to match you
DPI settings.

Thanks

Michal
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Rob Emenecker]

> Even if points are not precise unit in CSS because of browser 
> and OS problems most users can set their DPI in their 
> preferences if it is not automatically determined from screen 
> size (unless they are running a particularly abhorrent 
> browser + OS combination).

This brings up a very good point that should not be overlooked. While you
can labor over POINTS, PIXELs, etc., and do the same with COLOR. When you do
that you are NOT designing for your users. You are designing for your own
nicely calibrated system. 

Users, except for some professionals (photographers, designers, video
editors, etc.), do not calibrate their systems. They will do loose
adjustments to their monitor. They may also set their system to "large
fonts" (Windows, not sure what the equivalent is on Mac).

I know this because I've been there.

Coming from a print and print design background it was perfectly natural to
me to adjust the DPI of my monitor with a ruler held up to the screen so
that when I viewed a document at 100% on screen it measured exactly. I also
did numerous color adjustments using commercial color targets.

Guess what?

People told me

"Type is too large"
"Text is too small"
"That color is too red"
"That color is black" (when it was actually dark brown)

So now I have one monitor that *is* color adjusted with a print and a video
profile, and an uncalibrated monitor that just has minor contrast/brightness
adjustments. I let my OS use default DPI, occassionally switching to the
preset "large fonts" on Windows for testing purposes.

While this thread has been very informative, it seems like it has long lost
it's relevance to CSS. Are all of the moderators on vacation?


Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
 
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Dave Sherohman]

On Tue, Aug 11, 2009 at 11:11:04AM +0200, Michal Suchanek wrote:
> Even if points are not precise unit in CSS because of browser and OS
> problems most users can set their DPI in their preferences if it is
> not automatically determined from screen size (unless they are running
> a particularly abhorrent browser + OS combination).
> 
> Once you set the DPI properly sites designed in points, mm or em
> should be reasonably readable for you.

Not really, at least as far as points/mm are concerned[1], assuming that
by "properly" you mean "determined from screen size".

Setting your browser/OS DPI setting to match the physical DPI of your
display means that 12pt text on the screen will be the same size as 12pt
text on a printed page.  However, this does not mean that the text will
be readable if, say, the screen is an HDTV and you're sitting on the far
side of the room.

I would argue that display DPI should be based on what the user finds
most usable in their particular environment and physical screen DPI
should be completely ignored except in a handful of special cases, such
as computers being used for print design, where it's actually important
to be able to clearly relate the screen display to the size of a
physical object.  But, then, I would also argue that, aside from those
few special cases, DPI should be abandoned when dealing with computer
displays, as trying to relate on-screen display sizes to physical sizes
is fundamentally misguided, since you have no way of knowing whether the
user wants ultra-dense display to fit on their iPhone or five-inch-high
text for their gigantic HD rig.


[1] As already mentioned in this thread, modern browsers base em on the
user's default font size, not an actual physical unit, so em-sizing
should work regardless of whether the DPI setting is accurate or not.

-- 
Dave Sherohman
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Dave Sherohman]

On Tue, Aug 11, 2009 at 04:10:45PM +1000, Alan Gresley wrote:
> 2. The 100px and 75pt boxes are the same size with a 96 DPI setting on a 
>   monitor but also they are exactly 1 inch (using a ruler) in height and 
> width.

...which means that, within the limits of the accuracy of your ruler,
your monitor is actually displaying at 100DPI, regardless of your
operating system's DPI setting.

> 3. When the DPI setting is changed to 120 DPI, the boxes using pts 
> become 125% of their size at 96 DPI.

Correct.  Always remember that monitors operate purely in pixels and
cannot display based on any other unit or size.

The monitor's physical DPI is purely a function of the screen's physical
size and the active display resolution (e.g., 1024x786, 800x600, etc.).
The DPI setting in your operating system is a pretend value, as in "the
operating system will pretend your monitor is 96DPI or 120DPI, since it
doesn't know the actual physical DPI", which is used to convert physical
measurements (such as inches or points) into pixels so that the monitor
can display them.  When you change the DPI setting, the ratio used for
that conversion changes, so 75pt or 1" will be translated into a
different number of pixels.

> 4. The boxes using pixels are the same size and the box of 100px at 
> either 96 or 120 DPI still equals exactly 1 inch (using a ruler) in 
> height and width.

Yep.  100px is already in pixels, so it can be displayed directly
without having to use the DPI setting to convert its size into pixels
first.

> My question to you is why  a box of 100px equals a inch measured by a 
> ruler and not what I expected 96px?

Because your monitor isn't actually 96DPI.

> BTW, I thought the higher DPI setting would make the text smaller. I now 
> discover the reverse is true where the text and chrome of the browser is 
> larger.

At 96DPI, the operating system converts a 1" line into 96 pixels.

At 120DPI, the operating system converts a 1" line into 120 pixels.

The actual pixels on the screen are the same size regardless - remember
that their size is purely a factor of the physical screen size and the
active display resolution, not of the DPI setting - so the (supposedly)
1" line becomes 24 pixels longer when you change from 96DPI to 120DPI.
(And note that 24 is 25% of 96, matching the 25% size increase that you
noted in your 3rd observation.)

-- 
Dave Sherohman
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Felix Miata]

On 2009/08/11 16:10 (GMT+1000) Alan Gresley composed:

> Very interesting discussion in which I am learning much. What you say 
> above got me thinking and I have decided to do a test case.

> 

> This is what I note:

> 1. The 96px and 72pt boxes are the same size with a 96 DPI setting for 
> the monitor.

> 2. The 100px and 75pt boxes are the same size with a 96 DPI setting on a 
>   monitor but also they are exactly 1 inch (using a ruler) in height and 
> width.

> 3. When the DPI setting is changed to 120 DPI, the boxes using pts 
> become 125% of their size at 96 DPI.

> 4. The boxes using pixels are the same size and the box of 100px at 
> either 96 or 120 DPI still equals exactly 1 inch (using a ruler) in 
> height and width.

> On the same test case are screenshots using both 96 DPI and 120 DPI.

> My question to you is why  a box of 100px equals a inch measured by a 
> ruler and not what I expected 96px?

You flunked the part of the thread about desktop DPI and actual display DPI
in most cases being different. :-) Only when the DPI applied to the desktop
matches the DPI of the display will the measured size of a screen object in
pt, mm or inches be accurate. In your case, the actual DPI of the display
does not match the desktop's assumption, and is exactly or is very close to
100. Examples of this match to 100 can be seen in the
http://fm.no-ip.com/auth/dpi.xhtml chart for 1600x1200 on 20", 1440x900 on
17", 1280x800 on 15", 1680x1050 on 20" and 1280x960 on 16".

> BTW, I thought the higher DPI setting would make the text smaller. I now
> discover the reverse is true where the text and chrome of the browser is 
> larger

A applied DPI change does affect sizes in pt (which is used for chrome sizing
in all modern desktop environments), mm or in, but not those in px. As DPI
increases, the quantity of px required to achieve any certain physical size
increases. This is why images rendered at their intrinsic size at higher DPI
are physically smaller than at lower DPI, and why users of high resolution
displays who are unfamiliar with zoom and forcing a minimum text size
complain about too small fonts when authors declare things like body
{font-size: 12px}.

Viewport behavior and chrome behavior don't always follow each other, and
sometimes a browser (e.g. Safari on Windows) ignores the desktop's assumed
DPI setting. IOW, it's possible for e.g. 10pt chrome/menu text and 10pt text
within the viewport to be different in size due to different DPI being
applied to each. If on Windows you set desktop DPI to 120, Safari's
chrome/menu text will be smaller than that of IE and Firefox.

It used to be that in Firefox a DPI override in about:config's layout.css.dpi
would apply to both the viewport and the chrome, but for over a year now (all
of the 3.x varieties IIRC) its chrome obeys the desktop setting regardless of
the about:config layout.css.dpi setting.
-- 
How much better to get wisdom than gold, to choose
understanding rather than silver. Proverbs 16:16 NKJV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Michal Suchanek]

2009/8/11 Felix Miata :
> On 2009/08/10 16:22 (GMT-0700) Theresa Mesa composed:
>
>> What I find amusing about the admonition to use points is that points
>> are printing-industry-based, not monitor- or Web-based. There are 12
>> points in a pica, or 72 points in an inch. Back in the day, one pica
>> was .166 of an inch; now it is 1.6 of an inch. But we don't use inches
>> or picas when discussing the web.
>
>> I'm aware of the discussions about using point sizes on the web, so
>> I'm not opening that discussion.
>
> A pt has the same meaning in CSS, but the problem is its inaccuracy as used
> in a web browser. Most personal computers used for the web use an arbitrarily
> assumed DPI, while an accurately sized pt requires an accurate DPI be applied
> for a screen pt to match the physical size of a printed pt. The result of the
> wild variation in accuracy is that pt, like px, as a CSS sizing unit, bears
> little predictable relationship to the resulting physical size of the objects
> it is applied to, or any physical size any particular user of a page styled
> in CSS would find appropriate for his own use on his _personal_ computer.
> Consequently, on today's web, CSS styling in px should be no more or less
> objectionable than CSS styling in pt.
>
>> An em is another issue. On the surface, an em is a unit of measurement
>> that uses the width of the capital "M" in a font...
>
>> http://en.wikipedia.org/wiki/Pica_(unit_of_measure)
>> http://desktoppub.about.com/cs/intermediate/a/picaspoints.htm
>
>> Theresa (graphic designer - and old-time typesetter - for 38 years now)
>
> The CSS specs define em differently than you are used to for media other than
> the web: http://www.w3.org/TR/CSS21/syndata.html#em-width
>
> In contrast to px and pt, sizing in em results in a predictable physical
> size; predictable in the sense that it bears a useful relationship to a size
> the user finds suitable for personal use, 1em, the size of his browser's
> default font. If you think about it, you may find sizing in em isn't vastly
> different than sizing in picas. The main difference is that the visitor via
> his browser prefs determines the size of the em, while the pica is a fixed
> physical size.
>
> When a web author uses em sizing in his CSS, he's essentially creating
> resolution independent design. IOW, to an author sizing primarily or totally
> in em, resolution is a totally non-issue. Even though computer desktops are
> not yet resolution independent, CSS styled web pages can be.

Even if points are not precise unit in CSS because of browser and OS
problems most users can set their DPI in their preferences if it is
not automatically determined from screen size (unless they are running
a particularly abhorrent browser + OS combination).

Once you set the DPI properly sites designed in points, mm or em
should be reasonably readable for you.

On the other hand, designing in pixels is like saying "I design this
web for my screen and I don't care the least how it looks for other
people".

Thanks

Michal
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Dave Sherohman]

On Mon, Aug 10, 2009 at 11:24:40AM -0700, Theresa Mesa wrote:
> Interestingly enough, as a learning exercise, I opened an image in  
> Photoshop, set the image size to 300px x 454px. File size was 399.3K,  
> regardless of what PPI it was. You were correct, Mike.
> 
> Then I saved the image in Photoshop's "Save for Web and Devices."  
> Image quality, jpeg, maximum (100). Image size, 300x454. File size,  
> 93.25K. When I open that image that I saved from "Web and Devices" to  
> my desktop, it's 399K. But "Save for Web and Devices" just told me the  
> image was 93K.
> 
> Now we're getting out of the realm of CSS, so I'll take this  
> interesting question to Adobe's forums.

That's an easy one...  300px x 454px x 3 bytes/px = 408,600px, or
399.0234k of actual, uncompressed image data.  Add some headers and
metadata, and 399.3k sounds about right as a final uncompressed file
size.

"Save for Web and Devices" applied jpeg compression to the image,
producing a file size smaller than the actual uncompressed image size,
but it still has to be decompressed in memory back up to its full 399k
to be displayed.

-- 
Dave Sherohman
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Alan Gresley]

Felix Miata wrote:
[...]
> The reason why IE does what it does, like other non-Gecko Linux browsers
> other than Opera, is that its preference sizing is done in pt rather than px.
> It is because 12pt equals 16px at (the Windows default of) 96 DPI that medium
> happens to be 16px on most Windows systems. Increase Windows system DPI to
> the next increment of 120, and the conversion of 12pt shifts to 20px, the
> next, 144 DPI, to 24px, and the last, 192 DPI, to 32px. Medium is always
> 12pt, but the px size of 12pt depends on the DPI setting applied to the
> desktop. Even 72 DPI, for a 1 to 1 12px to 12pt ratio, is possible (but not
> recommended) on Windows. O_O


Hello Felix,

Very interesting discussion in which I am learning much. What you say 
above got me thinking and I have decided to do a test case.




This is what I note:

1. The 96px and 72pt boxes are the same size with a 96 DPI setting for 
the monitor.

2. The 100px and 75pt boxes are the same size with a 96 DPI setting on a 
  monitor but also they are exactly 1 inch (using a ruler) in height and 
width.

3. When the DPI setting is changed to 120 DPI, the boxes using pts 
become 125% of their size at 96 DPI.

4. The boxes using pixels are the same size and the box of 100px at 
either 96 or 120 DPI still equals exactly 1 inch (using a ruler) in 
height and width.


On the same test case are screenshots using both 96 DPI and 120 DPI.


My question to you is why  a box of 100px equals a inch measured by a 
ruler and not what I expected 96px?


BTW, I thought the higher DPI setting would make the text smaller. I now 
discover the reverse is true where the text and chrome of the browser is 
larger.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Michal Suchanek]

2009/8/11 Michael Stevens :
> -Original Message-
> From: hramr...@gmail.com [mailto:hramr...@gmail.com] On Behalf Of Michal
> Suchanek
>
>>The problem is that the physical size is what the user sees, not the pixel
> resolution. That's why it's better to avoid pixels and specify sizes in
> points or other physical units where possible.
> --
>
> Agreed. But using px vs % vs em is not at all the topic.
>
>>Most monitor brochures do mention DPI or its inverse - the pixel pitch. So
> any moderately knowledgeable electronics salesman can tell you they don't
> have any 72 DPI monitors.
> --
>
> You must have some really smart salesmen where you are... My experience is
> that not many people know a great deal.

Well, around here many can read the brochures which is pretty much as
far as their "knowledge" goes.

>
> Case in point would be this entire discussion. Anyone "moderately
> knowledgable" in computers will tell you a monitor's RESOLUTION (the
> origional question) is measured ONLY by pixels wide by pixels tall. A
> monitor can have a value that is labelled dots/pixels per inch but that is
> not a monitor's resolution.

That is also called resolution. That's why the question was resolution
(DPI) to tell it apart from the number of pixels.

>
> And asking for a value that can range from 20 or less to 120 or more is a
> waste of time, IMO.

It's more like 90-150 for common screens with lower values if you use
something like a TV for a screen (tends to be huge with few pixels) or
some high-res screen - these would be around 200.

Asking for the size in pixels which can vary from 320x200 to thousands
x thousands is even more pointless. Even on a 30" screen the browser
window still can be only 600x300 pixels but the DPI resolution applies
to windows of all sizes.

Other people have already pointed out that some 90%+ environments are
broken and the resolution in DPI cannot be determined or the obtained
value is not accurate. Still knowing the range you can expect can give
you some idea what you are dealing with.

>
> Yes, having a photograph's resolution mean "dots per inch" and a monitor's
> resolution meaning "pixels wide by pixels tall" is confusing but that's the
> way it is.
>
> Pixel pitch is not a value of how many pixels are crammed into a given area
> (which is slightly related to the OP). A smaller value is better because it
> means there is less space between pixels and therefore a clearer image. But,
> it's irrelevant to the topic.

It's very relevant if you are talking about DPI. A pixel pitch of 0.26
mm gives you about 4 pixels/mm or about 98 DPI.

Thanks

Michal
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Screen resolution?

[Felix Miata]

On 2009/08/10 22:05 (GMT-0700) Michael Stevens composed:

> From: Felix Miata [offlist, BTW] 

>> Not the monitor's actual DPI, but the DPI actually applied to the viewport,
>> assuming a compliant browser with JS enabled:
>> http://fm.no-ip.com/auth/dpi-screen-window.html
>> http://fm.no-ip.com/auth/Font/fonts-ptdemo.html

> I checked both of those and neither told me my DPI. One showed me a picture
> and said 'if this box isn't 1" then your DPI is not properly set.' I guess

The word on those pages is "accurately", not "properly". "Properly" is a
matter of opinion, while "accurately" is not.

If you want to find your system accurately set, you'll either need a display
that actually is 96 DPI, or you'll need to run an OS that facilitates use of
an accurate setting, such as Linux.

> FireFox isn't a compliant browser. When I use IE it give me 96 dpi which is
> not correct since the 1" box is not 1".

I can't recall ever having found any version of a Gecko browser incapable of
producing a DPI report from either of those URLs. Firefox 3.0.13, Firefox
3.5.2 & SeaMonkey 1.1.17 work just fine on them here.
http://fm.no-ip.com/SS/Fnt/midori-font-default096.png shows some relatively
recent browser versions that get most of it right on a 96 DPI system.
http://fm.no-ip.com/SS/Fnt/fonts-cooker-0706-120LS.png shows a couple from
more than two years ago at 120 DPI. http://fm.no-ip.com/SS/michst01.png is
fresh at 144 DPI (and shows typical results at high DPI of authors using px
to size web page objects).

OTOH, MSIE 6.0 as found on Windows NT 5.1 is the least compliant browser in
widespread use today, and may or may not bother to fill in the cells which it
is actually capable of properly filling.

It takes a great deal of effort to get Windows to use a DPI that isn't
directly selectable in its settings applet. If it reads 96 in IE, it is as
set by M$ or as reset to M$'s default by someone else. Unless DPI is
_accurately_ set, that image will not measure 1" in IE, or in any other browser.

Even if DPI is accurately set, if the actual accurate applied DPI is less
than 96, common browsers will typically use 96 instead of the desktop setting
for their viewport content, and thus those URLs will show 96 rather than the
actual setting applied. In recent Geckos you can get around that via
about:config by changing the layout.css.dpi setting from -1 to 0.

> So, is coding based off of incorrect data any better than ignoring the data
> altogether?

Better to ignore it because it shouldn't be relevant rather than because of
any difficulty involved in getting it. When you design for accessibility,
usability and resolution independence, resolution and DPI don't matter.

> Personally, I try to make my job easier and not more difficult. And worrying
> about a measurement that likely is incorrect and largely irrelevant is not
> making my life easier.

Forget pixels/px exist. Forget resolution exists. Forget DPI exists. Forget
trying to control that which you cannot see. Size in em, and designer life
will, at least after eventually unlearning the pixel perfection fallacy, be
easier.
-- 
How much better to get wisdom than gold, to choose
understanding rather than silver. Proverbs 16:16 NKJV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/