Posted by Nick on 11/09/07 22:34

On Nov 9, 8:48 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <1194604873.965413.132...@50g2000hsm.googlegroups.com>,
>
> Nick <maxout2001-nos...@yahoo.co.uk> wrote:
> > I've now taken into consideration the advices on text size and I've
> > built a new version of index.php page, this is called
> > alternativeherbal.co.uk/newexperiment2.php while I'm testing it.
>
> > The font size is more readable, the use of tables is minimized, and
> > finally the same style sheet for <div> postioning seem to work equally
> > in IE7, Firefox2, and Opera (sorry I'm not able to test Safari on Mac
> > at the moment, but Mac user are welcome to let me know).
>
> It looks *very nice* in Safari when loaded with my personal
> preferences for font size and for first thing in the morning when
> I am fresh.
>
> But there are problems. I won't look at your code at all for now.
>
> First, a single click up of font-size (scheduled to happen in
> about 3 or 4 hours as I tire and need larger for comfort) starts
> to break the design. The top horizontal green menu starts
> overwriting the green headers of the columns, the search box
> breaks out of the main feint-leafy backgrounded information area.
>
> Take you a few mins only to be rid of that Supplement Facts pic
> and make a simple table which will be readable because crisper
> even if smaller and will enlarge naturally with built in browser
> controls. At the *very least*, fix the enlargement link
> mechanics. You using js and sizing the window? Well, be more
> generous in the size, especially the height, it gets cut off
> after the Cellulose, Gelatin, line on Safari and FF too (that's 2
> out of 2, won't look further)
>
> It looks like you are not sizing the show and the cols right.
> Given your content, no need to *not* allow it to shrink to 800px
> wide and be readable. Take a look at your left col. It is all
> text. So mostly are the other cols. You could use % of body to
> divi them up so they are happy at all sorts of widths without
> needing horiz scroll bars. Combos of % and max widths can work
> wonders. So too can em sizing and max widths... It is a slightly
> complicated business but we could go into it if you want to.
>
> Frankly the first sign of trouble about fluidity was a semi
> aesthetic thing I noticed. Why is the leafy background not on the
> body itself, what is the *point* of not putting it on the body in
> this design? Try it, and be rid of the bg on the other bits and
> remove the thin green rect line to frame the show. It would be
> very natural then and a good start to getting it all fluid like...
>
> But it is still nice and pleasant a design anyway...
>
> --
> dorayme

Hi Dorayme, thak you for saying you like the design. That's a good
start at least. But I understand now about the font sizing up
problem.

Answering your question about why the leafy background is not on the
body itself: I think it may affect readability.

I'm finally on the way of a solution that could work with window
variable sizing, and variable text sizing, and it is at

http://alternativeherbal.co.uk/newindex.php

for the moment I've left out the header picture and the menu on the
top, and using mix and max widths I seems to work when changing the
browser size, and also the font size. I still haven't enlarged the
basic font size to 100%, but that will soon follow, but at least now
the font can be enlarged without too many probs, and it seems to work
on browser windows as small as 370px width, but I am ancountering new
problems.

The leafy background on the background, that is in div.main element
containing all the others, takes all browser window in IE7, that's not
too bad, but have a look at what happens in Firefox: the background of
the container div doesn't size up to the height and width div.centre-
left, div.centre, and div.centre-right-cats. Look at Opera, even
worse, not only the background doesn't automatically sizes as in IE7,
but the two DIVs to the right are positioned to the bottom of the
other two.

I'm sure there is a simple explanation to this, but I haven't managed
to find it so far, so help is appreciated.

I've also tried a version of this page with the leafy background on
the body instead, and this is

http://alternativeherbal.co.uk/newindex2.php,

although I've only placed it on the centre layer as it is a just
test. Don't you think readability is affected? Perhaps if I made it
much plaer than what it is could work, but is it worthy?

Again, I'd like to thank all that added their support here. When I
studied Wed Design and Web Developing at this CIW course 3 years ago
all they taught you was: design for the most common smaller screen
resolution (width: 800px then), use tables and px font sizing, even
though they did mention CSS2, and W3C guidelines on usability,
alternative browsers, etc. Quite contraddictory... So I'm learning
HTML design from scratch again at the moment.

[Back to original message]