Re: [WSG] em-based layout test request
At 4/8/2007 09:18 PM, Joseph R. B. Taylor wrote: I've been working on an em-based layout and wanted to see what your user experiences were like on this test page. ... http://sitesbyjoe.foodzoomer.com/homepage.htm It seems to break apart a little in IE 7 but as you know works fine in Firefox 2. Although I'm fond of absolute zoom like this, I get a lot of push-back from collaborators and clients because it triggers a horizontal scrollbar at high zoom. (I don't see anyone complaining about Word, PDF, Excel, and other document formats doing this, but maybe I get the push because I'm more accessible than Bill...) My compromise is to make layouts that expand up to but not exceeding window width, such as this http://i-edu.org/ and our own site http://juniperwebcraft.com/ I don't generally make images expand because they tend to shrink and expand badly, but your large image in this demo does OK. Did you save it in any special way for this purpose? Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] em-based layout test request
Paul, It's just a jpg file. It may just be that the colors stretch together without looking TOO bad. I'll install IE7 and start checking out the issues ASAP. I'll also take a look at the expand to screen width only issue, but I'll assume that will throw using ems for box model sizing out the window. Thanks for the input. *Joseph R. B. Taylor* Sites by Joe, LLC /Custom Web Design Development/ Phone: (609) 335-3076 www.sitesbyjoe.com http://www.sitesbyjoe.com Paul Novitski wrote: At 4/8/2007 09:18 PM, Joseph R. B. Taylor wrote: I've been working on an em-based layout and wanted to see what your user experiences were like on this test page. ... http://sitesbyjoe.foodzoomer.com/homepage.htm It seems to break apart a little in IE 7 but as you know works fine in Firefox 2. Although I'm fond of absolute zoom like this, I get a lot of push-back from collaborators and clients because it triggers a horizontal scrollbar at high zoom. (I don't see anyone complaining about Word, PDF, Excel, and other document formats doing this, but maybe I get the push because I'm more accessible than Bill...) My compromise is to make layouts that expand up to but not exceeding window width, such as this http://i-edu.org/ and our own site http://juniperwebcraft.com/ I don't generally make images expand because they tend to shrink and expand badly, but your large image in this demo does OK. Did you save it in any special way for this purpose? Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***begin:vcard fn:Joseph R. B. Taylor n:Taylor;Joseph org:Sites by Joe, LLC adr:;;408 Route 47 South;Cape May Court House;NJ;08210;USA email;internet:[EMAIL PROTECTED] tel;work:609-335-3076 tel;cell:609-335-3076 url:http://www.sitesbyjoe.com version:2.1 end:vcard
Re: [WSG] em-based layout test request
Gunlaug, Thanks for taking a look at this. I think I still have 100% widths on those items I'm not sure how to deal with IE/Mac. I may opt to hide all styles from it altogether. Again, on the window width, I am in agreement. It seems to survive 2 zooms larger without passing window width, but I'm running 1280 wide so that's probably not the typical experience for those who have to enlarge their text in the first place. *Joseph R. B. Taylor* Sites by Joe, LLC /Custom Web Design Development/ Phone: (609) 335-3076 www.sitesbyjoe.com http://www.sitesbyjoe.com Gunlaug Sørtun wrote: Joseph R. B. Taylor wrote: http://sitesbyjoe.foodzoomer.com/homepage.htm A minor flaw: black header and footer background don't expand with page in most browsers, but is instead fixed to original window-width. IE/Mac is not treating the header all that well. Also: floats default to 'width: 100%' in that browser, which ruins the nav list. Otherwise it seems to work as intended in regular win and Mac browsers. If you belong to the group that thinks those visitors who really need to resize fonts either have large screens/browser-windows, or that they should have to scroll sideways to read long lines, then 'em fixed' is probably ok. I'm not fond of 'em fixed' layouts myself - because of the above, so I'd limit them to window-width. regards Georg *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** begin:vcard fn:Joseph R. B. Taylor n:Taylor;Joseph org:Sites by Joe, LLC adr:;;408 Route 47 South;Cape May Court House;NJ;08210;USA email;internet:[EMAIL PROTECTED] tel;work:609-335-3076 tel;cell:609-335-3076 url:http://www.sitesbyjoe.com version:2.1 end:vcard
Re: [WSG] em-based layout test request
http://sitesbyjoe.foodzoomer.com/homepage.htm
Thanks for taking a look at this. I think I still have 100% widths
on those items
Yes, but when the page becomes wider than the window, and you scroll out
to the right... :-)
I'm not sure how to deal with IE/Mac. I may opt to hide all styles
from it altogether.
A couple of fixes, like...
/*\*//*/
#nav ul li {width: 5em;}
/**/
...for the nav, is enough to bring IE/Mac up to around IE7's level.
Again, on the window width, I am in agreement. It seems to survive 2
zooms larger without passing window width, but I'm running 1280 wide
so that's probably not the typical experience for those who have to
enlarge their text in the first place.
Why not turn it around and use an 'em guided' layout...
http://www.gunlaug.no/tos/moa_12a.html
...and limit the width to the window regardless of resizing.
It will still scale proportional when subjected to some serious font
resizing, here 300%...
http://www.gunlaug.no/tos/largeimagedepot/screen-shot_02.png
...but only if the user provides the window-width needed.
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] em-based layout test request
I'm hoping to redo my site after the old one has become a couple years stale. New logo too. Don't want anything messed up appearing before committing to the change. I'm sure you understand. http://sitesbyjoe.foodzoomer.com/homepage.htm Give it a shot and respond off-list if this is too off-topic. On the other hand, getting this layout ripped apart could be good list reading. Hopefully it won't be ripped apart, but there are plenty of untested browsers out there, especially you linux and mac users. Looks nice. FWIW, I'm not for limiting the width of an em-based layout to the window's width. I'd keep this behavior and may be implement a zoom layout to make everybody happy. As a side note, there is a serious issue in some old browsers with centered elastic (em-based) layouts, but it is easy to prevent: http://www.tjkdesign.com/articles/em-based_layout_bug.asp --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] em-based layout test request
Thierry Koblentz wrote: FWIW, I'm not for limiting the width of an em-based layout to the window's width. I'd keep this behavior and may be implement a zoom layout to make everybody happy. Is this where I turn on my browser's 'Fit to width' option? :-) Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] em-based layout test request
Gunlaug Sørtun wrote: Thierry Koblentz wrote: FWIW, I'm not for limiting the width of an em-based layout to the window's width. I'd keep this behavior and may be implement a zoom layout to make everybody happy. Is this where I turn on my browser's 'Fit to width' option? :-) Yes, right there ;) --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] nav menu help
hi all, Just wondering what the best way set width and height on a horizontal list menu like this http://www.nwtc.ie/home.html so that a user-sizing the fonts wont break the layout but can still change font size. Thanks -kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] nav menu help
At 4/9/2007 03:12 PM, kevin mcmonagle wrote: Just wondering what the best way set width and height on a horizontal list menu like this http://www.nwtc.ie/home.html so that a user-sizing the fonts wont break the layout but can still change font size. The simplistic answer is to set the width of blocks that contain text in ems so that they expand and contract with font-size. If your list items are sized in ems but the content column that contains the menu is fixed in pixels, you're going to fill up the space and... then what do you want to have happen? There are many scenarios, and you have to choose one according to your own design sensibilities. It helps to view a web page not as a still photograph but as a movie. Graphic designers are fond of coming up with a single mockup of a page and thinking their job finished, leaving the rest of the job to us -- to figure out how the page will morph on resize. The complete design exercise is to storyboard the whole movie. A few of your choices are: - Allow all text blocks on the page to zoom with text size without restriction -- creating a horizontal scroll bar when content width exceeds window width. - Allow the page to zoom but stop it at the window width (easy in browsers that recognize max-width). - Use fixed widths and allow text blocks to grow vertically. This strategy fails when a single unwrappable word exceeds the width of its container. - Float list items so that the row of items wraps around when too large for their container. Many people are disconcerted when nav menus wrap, at least in part because they're not used to seeing it. Notice that in all of this I'm not even mentioning height. I almost always let the browser work out the height as the text expands. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Odd behaviour in Opera and Safari
Rachel May wrote:
http://skylight.web1.heliocell.com/professionals--community-
groups.aspx
odd behaviour in Opera and Safari - the page headings are
going small after the page is loading.
In Firefox with web dev extension, Edit CSS shows niftyCorners.css is
not found.
The 404 error page that it shows for that stylesheet has a H2 style
{ font: 8pt/12pt verdana }
Bruce
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Odd behaviour in Opera and Safari
On Apr 10, 2007, at 11:05 AM, Rachel May wrote: This site http://skylight.web1.heliocell.com/professionals--community- groups.aspx (please note still in testing, so e-commerce transactions won't go through, etc.) is having odd behaviour in Opera and Safari - the page headings are going small after the page is loading. This is causing the search box to overlap the navigation (the logo is in an H1 tag). Also in Opera, the links are going red. That happens more often when one of the required css files is not found. In your case, you are linking to 'http://skylight.web1.heliocell.com/niftyCorners.css' (from within your script[1]), but that file returns a 404not found. The IIS 404 file has some css into it, although its content type is text/html Opera and Safari interpret the file nonetheless and apply the stylerules in that 404 page to the real html page, hence: red links and smaller type on your heading and who knows what more. Yes it is a bug in those UA. That is what you get when a UA accept whatever content-type one throws at it and try to interpret it. Gecko based browsers simply ignore that missing file completely. [1] function AddCss() in script.js Philippe --- Philippe Wittenbergh http://emps.l-c-n.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Liquid Layouts and Overflowing tables
Hey guys I've got an Issue with a liquid layout and a really long tablet. I was hoping that someone could shed some light on the topic Currently I have a really long table that is wrapped in a div (which has percentage width), which is beyond the length of the page. To resolve it currently I changed the over flow to be overflow : auto which gives me scrolling in the div, however my upper ups want it so the main window adjusts to the required size and the scrolling would appear down the bottom of the window. Is this even possible seeing as a liquid layout is view centric, to say have the table to force the outer layout to its size? Cheers, Cameron [EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Odd behaviour in Opera and Safari
Thanks Bruce you're an angel!! :D
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Bruce Martin
Sent: Tuesday, 10 April 2007 2:44 p.m.
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Odd behaviour in Opera and Safari
Rachel May wrote:
http://skylight.web1.heliocell.com/professionals--community-
groups.aspx
odd behaviour in Opera and Safari - the page headings are
going small after the page is loading.
In Firefox with web dev extension, Edit CSS shows niftyCorners.css is
not found.
The 404 error page that it shows for that stylesheet has a H2 style
{ font: 8pt/12pt verdana }
Bruce
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Odd behaviour in Opera and Safari
Thanks heaps Philippe, that's a very good explanation! Such a relief - I was so confused! -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Philippe Wittenbergh Sent: Tuesday, 10 April 2007 2:51 p.m. To: wsg@webstandardsgroup.org Subject: Re: [WSG] Odd behaviour in Opera and Safari On Apr 10, 2007, at 11:05 AM, Rachel May wrote: This site http://skylight.web1.heliocell.com/professionals--community- groups.aspx (please note still in testing, so e-commerce transactions won't go through, etc.) is having odd behaviour in Opera and Safari - the page headings are going small after the page is loading. This is causing the search box to overlap the navigation (the logo is in an H1 tag). Also in Opera, the links are going red. That happens more often when one of the required css files is not found. In your case, you are linking to 'http://skylight.web1.heliocell.com/niftyCorners.css' (from within your script[1]), but that file returns a 404not found. The IIS 404 file has some css into it, although its content type is text/html Opera and Safari interpret the file nonetheless and apply the stylerules in that 404 page to the real html page, hence: red links and smaller type on your heading and who knows what more. Yes it is a bug in those UA. That is what you get when a UA accept whatever content-type one throws at it and try to interpret it. Gecko based browsers simply ignore that missing file completely. [1] function AddCss() in script.js Philippe --- Philippe Wittenbergh http://emps.l-c-n.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
