HTML on Firefox 2

that contains all other

element on the left (

that contains all other

that contains all other

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).

Also, the main advantage of this new layout is that if one goes to
enlarge the text size, there is no overlapping of the menu links for a
while.

But there is a new problem I am experiencing, whereas the problems of
enlarging the text size are minimized, if I use Zoom on IE7, the menu
links below the header looks strange: basically the font size doesn't
seem to change as much as the rest of the site, the spacing between
each word hyperlink suddenly disappears, and the background image also
disappears.

Could someone suggest me a quick fix for this? I really need to put
this site back working and start making money.

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

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.

src="http://netweaver.com.au/test/nick/header-new.gif"
alt="Alternative Herbal - Alternative Medicine and Herbal
Supplements">

I took the liberty of making the header pic transparent (you can
get it from the url there) to remove that "I am a header,
rectangular" look. It sort of looks more natural floating on the
background this way.

But important to note, you had: