[EMAIL PROTECTED] wrote:
>page w/ absolute position works fine in most or all browsers, except IE 6
>is off by one pixel right, and one pixel bottom... anybody know why?
>
>http://www.fatgraffix.com/testing/test-absolute-position/absolute-test.html
>
>
Hi Francis,
I didn't investigate this 1px question, for I think there has te be
thought about some (IMO) more important other things first...
Oops-Help!
If I visit the page in Internet Explorer in my screen resolution of
1280x1024, I see very very small font sizes. And I cannot enlarge them
in IE. - So for lots of visitors the page will be inaccessible...
* Screenshot IE at 1280x1024.
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-herbalife-1280x1024.gif
* About 80-85% of the visitors is using IE:
http://www.thecounter.com/stats/2006/September/browser.php
* About 20% is surfing with a 1280x1024 screen size:
http://www.thecounter.com/stats/2006/September/res.php
* And more and more people are buying and using screens > 1280x1024px.
* Then 16-17% of the visitors can have severe accessibility problems
with the fixed font sizes of 11 px and 9 (!) px.
On the other hand, if I visit the page in a resolution of 800x600px, the
page is walking out of the screen on the right side, and I need to use
the horizontal scrollbar to read what is on the page.
* About 16% of the visitors is still using 800x600 screens:
http://www.thecounter.com/stats/2006/September/res.php
* Then these 16% has less usability because of the fixed width of 961px.
On the third hand, if I visit the page in other browsers than IE, in a
resolution of 1280x1024px, I can enlarge the font size. But scaling the
font-size upwards, already in a few steps the text is extending the
header area.
* Screenshot Firefox at 1280x1024, font-size client side enlarged
with 3 steps:
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-herbalife-1280x1024-enlarged.gif
All together, I agree cordially with the recommendation of the BrowserNews:
* Recommendation.
A good way to ensure that sites will work for as many resolutions
as possible is to design sites to be resolution-independent, i.e.
not to specify widths in absolute units (e.g. pixels) /unless/ a
width is that of a fixed-width object, e.g. a GIF, JPG, or PNG image.
* http://www.upsdell.com/BrowserNews/stat_trends.htm#res
* As a rule of thumb, I use em's for font-sizes, and % for the width
of a container (and: mostly no div-height! Then the height of the
boxes can grow or shrink together with the font-sizes).
* In the same way, I try to avoid Absolute Positioning as much as
possible: it is fixing the elements; then they cannot shift
upwards or downwards if needed.
To rebuild a site with all fixed styles into a flexible css is not easy.
But everything can be made with css! [1]
So I hope you will consider to make a fresh start ... ;-)
Success and greetings,
francky
[1]
Illustration of flexibility: a page in the Belgian CSS Zen garden
"Gigastyle":
* http://www.gigastyle.be/?cssfile=41/elastico.css
It is not for the beauty of the design, just a test page for
showing possibilities of fluid css coding. You can try different
screen sizes, different window sizes, different font-sizes, and
different browsers.
The page and the comments in the stylesheet are in Dutch, the css
is universal. :-)
Reading stuff for instance:
* The Sizing Text pages of the css-Wiki: http://css-discuss.incutio.com/
* The Float Layouts page of the css-Wiki:
http://css-discuss.incutio.com/?page=FloatLayouts
* http://www.cssliquid.com/
* Not enough? Google for "liquid style css"!
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
