HTML on Firefox 2

[Nick]

Why do you think you need to use relative positioning for this at all?
Do you really understand what the different positioning methods are
*supposed* to do? I suspect not.


That should not be the case at all. If it is, then something in your
design is probably broken. I glanced at your CSS but it is too hard to
read. Getting rid of all the redundant styles, like font-family, would
be a good place to start. Your stylesheet would also be more readable if
you applied some formatting to it.


That would be fixing the wrong problem, I think.

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

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.

 

[rf]

If you put a http:// in front of your quoted URL I would be able to simply
click on the URl in my newsreader, rather than having to copy/paste.

Why?

Another non clickable URL.

Why?

Do you really understand what relative position does? Please read the
relevant chapter in this specs:
http://www.w3.org/TR/CSS21/visuren.html#comp-relpos

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,

No it is not, it is not 100%. That is if I am looking at the right page.

the use of tables is minimized, and

Oh, is that the time.

 

[Beauregard T. Shagnasty]

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
http://alternativeherbal.co.uk/newexperiment2.php
while I'm testing it.

I don't see anything different.

You're still using Verdana:
font-family:Verdana, Arial, Helvetica, sans-serif
and this line is in your stylesheet 23 times, when you only need to
place it once in the body { }
and your font sizes are still only three-quarters of my preferred size.
When I increase the size so I can read it, the design falls apart.

http://k75s.home.att.net/fontsize.html

It still doesn't fit in my browser window, requiring horizontal
scrolling.

It's still Transitional, when it should be Strict.

 

[Andy Dingley]

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.

No you didn't.

..bt {
font-size:.75em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

Bored now.

 

[dorayme]

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

 

[Nick]

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

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.

 

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

Now, at least from the users point of view, you are starting to
cook with gas. This is much better re window fluidity, needless
horiz scroll bars. Well done. (Still have not examined your code)

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.

Ah, yes, this looks for all the world like something that puzzles
many people who have not got a good model in their head for how
floats work. Again, without looking at your code, I would bet
quids, you are floating things in a container div that has a
background but little content, little ordinary content in the
flow, (inline text, inline pics, ordinary unpositioned elements).

I will try to explain later, if you are still around, why this is
so but basically it is this, keep saying it to yourself. In good
standards compliant browsers, parents do *not* recognise their
floated children. They simply do not see them and so they do not
grow their heights to envelop them. IE does but the parents in IE
are from quite a different culture. This is not just silly talk,
it is a way to picture the thing. By default a div has no height.
It has 100% width but no height. It does not get height if all it
has is floated children. It does not get height unless a higher
power, the author, forces it to have height with a css height
instruction. Your parent must have some content otherwise it
would not be even be any high at all in Safari or my FF.

Floated children do "see" their parents. The relations between
parents and children of different kinds is actually a complicated
one (some people will tell you it is simple, but that is not so).
There are all the recommended rules as set by say CSS 2.1 and
4.01 and then there is the implementation of these rules by
different browsers. And you can be either struck by the
similarities or by the differences. Both are quite remarkable and
an interesting story.

Ah... perhaps I should mention, there are ways to get the parent
to get the height you might want without specifying a height: put
something into the flow after all the floats. Just before the
closing </div> of the parent whose background you need to grow,
put in

<div style="clear: both;"></div>

and it will happen for you.

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?

Perhaps you are misunderstanding me. On *no account* spoil the
nice clean white background of your text. I was suggesting to try
the leafy bg on the body itself but make sure the bg to the cols
is unsullied, be specific and give the cols a white background or
something nice and plain so the background is not transparent or
inheriting unwanted stuff. Nothing is worse than pesky
interference with your text.

 

[Nick]

Now, at least from the users point of view, you are starting to
cook with gas. This is much better re window fluidity, needless
horiz scroll bars. Well done. (Still have not examined your code)





Ah, yes, this looks for all the world like something that puzzles
many people who have not got a good model in their head for how
floats work. Again, without looking at your code, I would bet
quids, you are floating things in a container div that has a
background but little content, little ordinary content in the
flow, (inline text, inline pics, ordinary unpositioned elements).

I will try to explain later, if you are still around, why this is
so but basically it is this, keep saying it to yourself. In good
standards compliant browsers, parents do *not* recognise their
floated children. They simply do not see them and so they do not
grow their heights to envelop them. IE does but the parents in IE
are from quite a different culture. This is not just silly talk,
it is a way to picture the thing. By default a div has no height.
It has 100% width but no height. It does not get height if all it
has is floated children. It does not get height unless a higher
power, the author, forces it to have height with a css height
instruction. Your parent must have some content otherwise it
would not be even be any high at all in Safari or my FF.

Floated children do "see" their parents. The relations between
parents and children of different kinds is actually a complicated
one (some people will tell you it is simple, but that is not so).
There are all the recommended rules as set by say CSS 2.1 and
4.01 and then there is the implementation of these rules by
different browsers. And you can be either struck by the
similarities or by the differences. Both are quite remarkable and
an interesting story.

Ah... perhaps I should mention, there are ways to get the parent
to get the height you might want without specifying a height: put
something into the flow after all the floats. Just before the
closing </div> of the parent whose background you need to grow,
put in

<div style="clear: both;"></div>

and it will happen for you.




Perhaps you are misunderstanding me. On *no account* spoil the
nice clean white background of your text. I was suggesting to try
the leafy bg on the body itself but make sure the bg to the cols
is unsullied, be specific and give the cols a white background or
something nice and plain so the background is not transparent or
inheriting unwanted stuff. Nothing is worse than pesky
interference with your text.

Thank you for the explanation about children and parents elemtens.

Following your suggestion I've managed to get the parent div "main" to
get the right length (based on the children's). (see
http://alternativeherbal.co.uk/newindex.php).

I've added the menu and the header picture now, but I would like the 3
floated div elements at the bottom to be centred in syntony with the
content above (header picture + links made from unordered links).

I understand that the problem comes from of the fact that they are
floated elements. Researching on the internet the only way I've found
to centre them requires using margin-right and margin-left to auto,
but this would only work if one sets a fixed width (such as 980px,
good for a 1024px monitor), but I'd rather not do this as it would
make the design less flexible for different screen resolutions and
browser sizes as it is now.

I was just wondering whether you knew any other solutions to achieve
this.

I've also made the font-size larger, but not 1em / 100%, as the font-
size seems to big to me when I've done that. I don't know if this is
the same to you, or others, but you can see a trial 1em font-size page
in http://alternativeherbal.co.uk/newindex2.php. Anyway, enlarging
the font-size in http://alternativeherbal.co.uk/newindex.php doesn't
make the page layout fall apart, like earlier, so this shouldn't
matter too much now, should it?

Thank you.

 

[Beauregard T. Shagnasty]

I've also made the font-size larger, but not 1em / 100%, as the font-
size seems to big to me when I've done that.

Then you need to adjust your *own* browser's default size.

Use body { font-size: 100%; }
and then make minor adjustments for headings and legalese. Leave all the
other font-sizing out.
http://k75s.home.att.net/fontsize.html

 

[Nick]

Then you need to adjust your *own* browser's default size.

Use body { font-size: 100%; }
and then make minor adjustments for headings and legalese. Leave all the
other font-sizing out.http://k75s.home.att.net/fontsize.html

Sure, I'll have a go at that later.

But have you got any ideas about the other problem?

 

[Beauregard T. Shagnasty]

Sure, I'll have a go at that later.

Why not do it now, so you don't have to go farking about with it after
you fix the rest, and find out you have to alter sizing once again?

But have you got any ideas about the other problem?

1. I would not use explicitly sized columns. "Categories" would
float right. "About Us" would float left. "Suggested Product"
would take the remainder of whatever the browser window was
opened to (size).
2. I would scrap this image:
http://alternativeherbal.co.uk/images/header-new.gif
in favor of just the center portion of it, and center it
in a banner, with the leaves as a background image,
repeated horizontally. Hints on centering banner:
http://k75s.home.att.net/banner.html
3. I would use HTML 4.01 Strict, instead of Transitional. These are
new pages, and you aren't 'transitioning' from any legacy pages.
4. I would continually check the validators and correct errors.
<http://validator.w3.org/check?verbose=1&uri=http://alternativeherbal.co.uk/newindex2.php>
<http://jigsaw.w3.org/css-validator/...=http://alternativeherbal.co.uk/newindex2.php>

 

[dorayme]

<[email protected]

,

Thank you for the explanation about children and parents elemtens.

Following your suggestion I've managed to get the parent div "main" to
get the right length (based on the children's). (see
http://alternativeherbal.co.uk/newindex.php).

I've added the menu and the header picture now, but I would like the 3
floated div elements at the bottom to be centred in syntony with the
content above (header picture + links made from unordered links).
.....

I was just wondering whether you knew any other solutions to achieve
this.

Looking better still now, Nick. I have a couple of thoughts for
you (to limit the number), one about your header, the other about
the centering. First the header, it may seem a minor aesthetic
thing to you but, imo, makes a difference. Try the gif I made of
it at:

http://netweaver.com.au/test/nick/header-new.gif

and see if it suits. I tested it on your site and it looks good.
It is just the same as yours but with a transparent bg. It then
sits much more naturally on your nice leafy background. Not so
"rectangular...I am a header see" look about it <g>. In fact,
this would be a really good candidate for fluid dimensioning as
it should surely look about as good contracted horizontally as it
would stretched horizontally. That way it could grow and contract
with the browser/screen settings of the user.

BTW, a sophistication would be to substitute real html text in
the pic and remove the pic text (I say this because while Macs do
a fabulous job of resizing pics in some browsers, Windows do not
cut the mustard and this really reveals itself when you try this
sort of thing with pictured text, the text gets the jaggies even
when resized in the browser *down* from a high quality original!

About centering... It can get complicated with your code and
widths but perhaps i will be bold and simply suggest the
following and see how you feel, it looks fine to me and sort of
fits in with what I imagine is your taste:

(1) In your divpositioning stylesheet, substitute for your
div.main, the following:

div.main {

border: 4px groove #2f2;
padding-bottom:1em;
width:55em;
margin:auto;
margin-top:1em;
margin-bottom:1em;
background-image:url(images/leaffade.gif);
}

I personally would add font-size: 100% to body. At 4.30am this
morning your lesser size did look nicer to my eye. Now at 6.30 I
would be grateful of 100% to fit in with my settings (I tire
easily <g>. But if you make it a little less than 100% the sky
will not fall in. Who goes in for all this herbal stuff, older
people (with poorer vision) wanting to delay death? Maybe more
than 100% rather than less then... <g>

and

(2) I think I would favour in the html:

<div>
<img style="width: 55em;"
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:

<div style="text-align: center;">
<img src="images/header-new.gif" alt="Alternative Herbal -
Alternative Medicine and Herbal Supplements" height="160"
width="980">

and I have changed this considerably in function above. It is
simpler and grows with the wrapper of main div. Or it should!

Have a play, this may suit you.

Other things to play with are the em width (55 may be a bit
high), another thing to consider (I have raised it before is to
put the leafy bg on the body itself (rather than main) and let
the website content float on it.

 

[Bone Ur]

Well bust mah britches and call me cheeky, on Thu, 15 Nov 2007 19:54:01 GMT
dorayme scribed:

Looking better still now, Nick. I have a couple of thoughts for
you (to limit the number), one about your header, the other about
the centering. First the header, it may seem a minor aesthetic
thing to you but, imo, makes a difference. Try the gif I made of
it at:

http://netweaver.com.au/test/nick/header-new.gif

Not bad, but I took your cue and believe I came up with something just a
little more eye-catching. Whaddya think?

http://www.neredbojias.com/tester/header_better.gif

 

[dorayme]

Well bust mah britches and call me cheeky, on Thu, 15 Nov 2007 19:54:01 GMT
dorayme scribed:


Not bad, but I took your cue and believe I came up with something just a
little more eye-catching. Whaddya think?

http://www.neredbojias.com/tester/header_better.gif

No you misunderstand. The aim is not to tamper with the image, to
respect the choice of the OP and therefore to dampen the drums of
war between countries. My change was merely to transparent the
original background.

Your mouse could mean war and you know what that can involve (see
Robert Redford's latest film).

 

[Bone Ur]

Well bust mah britches and call me cheeky, on Fri, 16 Nov 2007 21:12:56
GMT dorayme scribed:

No you misunderstand. The aim is not to tamper with the image, to
respect the choice of the OP and therefore to dampen the drums of
war between countries. My change was merely to transparent the
original background.

Oh, I see. Er, I mean I don't see (-the background, that is.) But still,
you've got to admit that my image is cooler than the original.

Your mouse could mean war and you know what that can involve (see
Robert Redford's latest film).

Dunno the film but the last time I was involved in a mouse war was during
the halcyon days of junior high school. And it's a gerbil, not a mouse.

 

[Nick]

Thank you for your suggestions dorayme, I really appreciate the time
you spent trying to make all fit with my design. But after a bit of
playing around I realized that I prefered to set for a design that
adapts itself to different resolutions and browser widths.

I have managed to find a solution which allows a centered look + keep
adaptability to different browser widths.

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

I've also changed the size of the basic font-size to 100%, as sugested
by Beauregard.

I'm still using HTML4.01 Transitional, and the main reason is because
if I try to set it to Strict the validator asks me to put a <input
type="submit" tag in the form, and in that way I wouldn't be able to
use an image to launch the search - apparently HTML 4.01 Strict must
have a <input type="submit" submit . The image button has the
advantage to look cuter and also to take less space than the "Submit"
button, important on smaller screen sizes.

Trying to go strict also gives me an error that I don't understand:

# Error Line 57, Column 81: document type does not allow element
"INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6",
"PRE", "DIV", "ADDRESS" start-tag.

....box" maxlength="30" class="searchbox">

....but DIV is not missing, it is situated exactly before the INPUT
tag.

Anyway, the only thing I'm not sure yet is the top image. I cut the
central / text part of it and made of the full coloured leaf part a
background image. This way it is adapts moer easily to different
screen and browser sizes. Still, it doesn't look too bad either.

Thank you to both of you for being so very responsive.

I am waiting for your comments.

 

[Bone Ur]

Well bust mah britches and call me cheeky, on Sun, 18 Nov 2007 14:43:40 GMT
Nick scribed:

Trying to go strict also gives me an error that I don't understand:

# Error Line 57, Column 81: document type does not allow element
"INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6",
"PRE", "DIV", "ADDRESS" start-tag.

...box" maxlength="30" class="searchbox">

...but DIV is not missing, it is situated exactly before the INPUT
tag.

Not that I see:

<form name="search" action="searchresult.php" method="get">
<input type="text" name="searchbox" size="19" maxlength="30"
class="searchbox">
</form>

Some block element as cited must be _inside_ the form and contain the
input. (Just for the record, though, I think it's stupid, too.)

 

[Nick]

<form name="search" action="searchresult.php" method="get">
<input type="text" name="searchbox" size="19" maxlength="30"
class="searchbox">
</form>

You are right! The solution was so easy and I didn't see it! I
looked at the DIV before FORM, but in the error message clearly
mentioned INPUT, and not FORM.

It is a HTML 4.01 Strict now.

I still would like to hear about what you think about the image at the
top, and the general look of the page. It is much more flexible than
the original, but soemtimes if I maximize my 24" screen it looks to me
less glamorous than the previous one, perhaps because of all the empty
spaces that appear within the design whereas before they appeared
outside the design. I still hope it can make people want to buy the
products.

 

[Nick]

I just wanted to add that the original page can be seen at
http://alternativeherbal.co.uk/index-OLD.php, just to have an idea of
what changes there have been in the look.

 

[Bone Ur]

Well bust mah britches and call me cheeky, on Mon, 19 Nov 2007 12:34:00 GMT
Nick scribed:

I just wanted to add that the original page can be seen at
http://alternativeherbal.co.uk/index-OLD.php, just to have an idea of
what changes there have been in the look.

I like the new one much better. However, I understand your point about the
"empty spaces". Perhaps judicious use of max-width (in ems) can limit the
expansion for large, hi-rez monitors. Won't work in ie6, but who cares?
It should be "transparent" anyway.