Re: HTML on Firefox 2

On Nov 10, 12:07 am, dorayme <doraymeRidT...@xxxxxxxxxxxxxxx> wrote:
In article
<1194647674.467584.30...@xxxxxxxxxxxxxxxxxxxxxxxxxxxx>,



Nick <maxout2001-nos...@xxxxxxxxxxx> wrote:
On Nov 9, 8:48 pm, dorayme <doraymeRidT...@xxxxxxxxxxxxxxx> wrote:
In article
<1194604873.965413.132...@xxxxxxxxxxxxxxxxxxxxxxxxxxx>,

Nick <maxout2001-nos...@xxxxxxxxxxx> wrote:
alternativeherbal.co.uk/newexperiment2.php

(sorry I'm not able to test Safari on Mac
at the moment, but Mac user are welcome to let me know).

But there are problems. I won't look at your code at all for now.

First, a single click up of font-size starts
to break the design.
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...

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,

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.

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.

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

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.



.

Relevant Pages

  • Re: HTML on Firefox 2
    ... to break the design. ... It looks like you are not sizing the show and the cols right. ... browser size, ... IE does but the parents in IE ...
    (alt.html)
  • Re: Help with Firefox margin issue
    ... all specific to the home page, and this issue exists on all pages (and in another similar design I'm working on now). ... You must either have a very large monitor, or you have no toolbars or tabs at the top of your browser window. ... not wrap the div around the content, so I had to add it. ... There's a two-pixel white space next to the menu!! ...
    (comp.infosystems.www.authoring.html)
  • Re: Access 2010 Web Form - tab order
    ... and the fact that we have control layouts to move controls together as a group are actually two distinct issues. ... I think for existing applications and most things I have, I do prefer simple design mode, but some of these new features can really help and terms of productivity. ... They could've perhaps built something that took an existing access form and then had some some type of special ActiveX or client program you install on your browser that renders that form. ... Keep in mind if the form you specify in the browse two command does not have to be part of the current navigation control set. ...
    (comp.databases.ms-access)
  • Re: How do we get there from here?
    ... In order to design using that ... > really focused on at this stage is browser enabled applications. ... This is a submission to the server, ... > Don't know much about cookies. ...
    (comp.databases.pick)
  • Re: Publishing web site file name
    ... results in a lack of good cross browser support across all other browsers. ... With that said, many Pub 2003 sites work just fine in FireFox, and I have ... I am assuming that you did run the Design Checker to see if that found any ... I deleted all the objects from the master ...
    (microsoft.public.publisher.webdesign)