HTML on Firefox 2

Nick · Oct 29, 2007

I have designed a new website. www.alternativeherbal.co.uk, which
uses layers instead of tables. It is the first time that I do
something like that.

This site looks fine on IE7, but not on Firefox 2, the layers on
Firefox 2 have all wrong positioning and wrong sizes.

The most strange thing is that it looked fine on Firefox until a
couple of hours ago.

I have a nearly identical version of this site on www.altherb.eu, and
that still looks fine on Firefox 2. I hadn't really done any
important chenge to the site apart from changing some words in the
meta description, which shouldn't matter. Anyway, I've actually
copied the index.php page and the two stylesheets: styles.css and
layers.css from www.altherb.eu to www.alternativherbal.co.uk, and the
most astonishing result is that once done that they look wrong like
the original alternativeherbal.co.uk files! I just don't understand,
there is not any other file apart from the stylesheets and index.php
itself that should affect the look of this page. I know that the
DOCTYPE declaration is probably wrong, but changing it didn't give
better results.

I REALLY would appreciate some help on this from someone more
experienced than me.

Thank you.

rf · Oct 29, 2007

Nick said:
I have designed a new website. www.alternativeherbal.co.uk, which
uses layers instead of tables. It is the first time that I do
something like that.

Layers is a term used by Netscape during the last centurty. It has no
meaning now.

This site looks fine on IE7, but not on Firefox 2, the layers on
Firefox 2 have all wrong positioning and wrong sizes.

Fixing some of the 45 HTML errors you have my change things. Some of them
will throw the browsers into an error correcting frenzy.

Beauregard T. Shagnasty · Oct 29, 2007

Nick said:
I have designed a new website. www.alternativeherbal.co.uk, which
uses layers instead of tables. It is the first time that I do
something like that.

"Welcome to to Alternative Herbal!" to to?

This site looks fine on IE7, but not on Firefox 2, the layers on
Firefox 2 have all wrong positioning and wrong sizes.

What is this?

<div id="menu" class="menu" align="left">
            <a
href="index.php" class="menu">HOME</a>

And this:

"td.list { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.58em; width:180px; "

Unreadable. Please read this:
http://k75s.home.att.net/fontsize.html
When I increase the text size to something I can read, it flops right
out of that 180px box.

Use <p>...</p> instead of using <br> to separate what should be
paragraphs.

So much more...

.. I know that the DOCTYPE declaration is probably wrong, but
changing it didn't give better results.

New documents should be Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Andy Dingley · Oct 29, 2007

I have designed a new website. www.alternativeherbal.co.uk, which
uses layers instead of tables.

What on earth are "layers" ?

Also this site is built out of 10 year old HTML, uses the Transitional
doctype and is based around using <table> for layout. All of these are
bad practices and should be fixed before proceeding any further.

Read this newsgroup's archives for advice on what to do next, but
reading "Head First HTML" wouldn't be a bad start.

I have a nearly identical version of this site onwww.altherb.eu,

Broken doctype declaration on that site, which will switch FF into IE-
compatible quirks mode.

Nick · Oct 29, 2007

With the term of Layers I was referring to CSS Layers. There are many
sites out there talking of DIV Layers, such as in

http://www.dashdev.net/xhtml_css_tutorial_5.html for example.

I know the W3C guidelines change constantly, especially about
accessibility and cross browser standardisation, so I don't know if
layers is the up to date term or not. Perhaps is it CSS or HTML
Elements more correct?

Basically I'm talking about

<div id="menu" class="menu" align="left">
bla bla bla
</div>

I thank you for taking the time looking at the errors, I knew there
were many concerning deprecated tags and similar, but as up to now it
wasn't affecting the look of the site, and I was in a rush to finish
the site, I had left for sorting out later. I know it's bad
practice. Anyway, what I don't understand is why altherb.eu, which
has the identical errors as the www.alternativeherbal.co.uk, can show
perfectly.

Anyway,

<div id="menu" class="menu" align="left">

            <a
href="index.php" class="menu">HOME</
a>                  <a
href="faq.php" class="menu">F.A.Q.</
a>                  <a
href="forums/index.php" class="menu" target="_blank">CUSTOMER
FEEDBACK / FORUMS</
a>                  <a
href="links.php" class="menu">LINKS</
a>                  <a
href="contact.php" class="menu">CONTACT US</
a>                  <a
href="https://alternativeherbal.co.uk/showbasket.php"
class="menu">VIEW BASKET</a> <a href="showbasket.php"
class="menu"><img src="images/cart.gif" valign="bottom" border="0"></
a>
</div>

is the element containing the horizontal menu.

Is it a problem using   to space the different hyperlinks? I
don't really expect this site to be viewed from other than European/
Western languages browsers.

If it's the   that you think are a problem, what would you
suggest excluding tables?

About
td.list { font-family:Verdana, Arial, Helvetica, sans-serif; font-
size:0.58em; width:180px; height:15px; text-align:left; padding-top:
7px; padding-bottom:7px; padding-left:.8em; border-bottom:.5px solid
#00CC00}

I suppose that what is wrong there is using em for font sizing. As
before IE7 using px reesulted in a page with unalterable fonts, I
wanted to overocme his problem. At the time I studied Web Desing, 3
years ago, all they thought was pixel sizing, so I had to look for
solutions researching the internet; I was aware of the problem that
sizing up, or down gave extreme results, but I didn't know how to fix
it yet. I will follow you suggestion to use % sizing instead.

About Andy comment, yes, even though this project was born from my
first attempt not to use tables, and use HTML/CSS Elements instead, I
still ended up using some tables. Do you suggest doing away of them
totally? Should I substitute them all with <div></div> elements + CSS
positioning?

I'll also start working on making the page a coherent HTML 4.01
Strict.

I am looking forward to your answers, and I will post back when I've
fixed some errors.

Harlan Messinger · Oct 29, 2007

Nick said:
With the term of Layers I was referring to CSS Layers. There are many
sites out there talking of DIV Layers, such as in

http://www.dashdev.net/xhtml_css_tutorial_5.html for example.

I know the W3C guidelines change constantly, especially about
accessibility and cross browser standardisation, so I don't know if
layers is the up to date term or not. Perhaps is it CSS or HTML
Elements more correct?

Basically I'm talking about

<div id="menu" class="menu" align="left">
bla bla bla
</div>

I thank you for taking the time looking at the errors, I knew there
were many concerning deprecated tags and similar, but as up to now it
wasn't affecting the look of the site, and I was in a rush to finish
the site, I had left for sorting out later. I know it's bad
practice. Anyway, what I don't understand is why altherb.eu, which
has the identical errors as the www.alternativeherbal.co.uk, can show
perfectly.

I looked at them both this morning (Eastern US time) and their layout
was identical. I'm looking at them again and their layout is still
identical. In Firefox 2 both times.

Beauregard T. Shagnasty · Oct 29, 2007

Nick said:
<div id="menu" class="menu" align="left">

            <a
href="index.php" class="menu">HOME</

<schnipp>

Do it this way:

<div id="menu">
<a href="index.php">HOME</a>
<a href="faq.php">F.A.Q.</a>
[etc...]
</div>

Put the styling all in the "#menu { }" in the style sheet.

#menu {
margin: 0 auto;
}
#menu a { margin: 0 5em; }

or similar.

About
td.list { font-family:Verdana, Arial, Helvetica, sans-serif; font-
size:0.58em;

0.58em ? That is half of my default size, and unreadable.

Ben C · Oct 29, 2007

With the term of Layers I was referring to CSS Layers. There are many
sites out there talking of DIV Layers, such as in

http://www.dashdev.net/xhtml_css_tutorial_5.html for example.

I know the W3C guidelines change constantly, especially about
accessibility and cross browser standardisation, so I don't know if
layers is the up to date term or not. Perhaps is it CSS or HTML
Elements more correct?

I think "layers" is rather odd. That site seems to be using the term
just to mean "block box".

Basically I'm talking about

<div id="menu" class="menu" align="left">
bla bla bla
</div>

Use float: left, not align="left". IIRC align="left" on a div turns
into "float: left" but only in quirks mode.

[...]

has the identical errors as the www.alternativeherbal.co.uk, can show [...]
Is it a problem using   to space the different hyperlinks? I
don't really expect this site to be viewed from other than European/
Western languages browsers.

If it's the   that you think are a problem, what would you
suggest excluding tables?

Use a series of left floats if you need to set height on them. Otherwise
just a series of inline elements (span for example, or <li> but set li {
display: inline; }). You can then set left and right padding on the
inlines to achieve spacing.

dorayme · Oct 29, 2007

Nick said:
I have designed a new website. www.alternativeherbal.co.uk

I get this on Mac Safari and Firefox:

http://members.optushome.com.au/droovies/test/pics/herbal.png

When the ok is clicked, the page loads anyway.

Which brings me to this question, have you cut a side deal with
Bill Gates?

Bergamot · Oct 29, 2007

rf said:
Layers is a term used by Netscape during the last centurty.

Sadly, the term has been perpetuated by Dreamweaver. Its "layers" are
just absolutely positioned divs. Unfortunately, DW gives no guidance as
to the wisdom of such designs. :-(

Bergamot · Oct 29, 2007

Nick said:
<div id="menu" class="menu" align="left">
            <a
href="index.php" class="menu">HOME</
a>

Icky poo! Use a nice, clean, unordered list.
http://css.maxdesign.com.au/listamatic/

td.list { font-family:Verdana, Arial, Helvetica, sans-serif; font-
size:0.58em;

I suppose that what is wrong there is using em for font sizing.

There is nothing wrong with ems, except for IE bugs anyway. The problem
is the .58. Or don't you want your visitors to be able to actually
*read* the content?

I am looking forward to your answers

And I am looking forward to you not top posting any more.
http://web.presby.edu/~nnqadmin/nnq/nquote.html

Jonathan N. Little · Oct 29, 2007

Bergamot said:
Sadly, the term has been perpetuated by Dreamweaver. Its "layers" are
just absolutely positioned divs. Unfortunately, DW gives no guidance as
to the wisdom of such designs. :-(

Wow! Something worst than Netscape's layers!

Andy Dingley · Oct 29, 2007

With the term of Layers I was referring to CSS Layers.

No such thing.

Years ago, there was a feature called "layers" in some obsolete versions
of Netscape. It hasn't been supported for years, few used it even back
then. To use the term "layers" today is either irrelevant and wrong, or
even worse by being misleading to this other term. Neither way will aid
communication wilth people who use CSS correctly or usefully today.

There are many
sites out there talking of DIV Layers,

Then they're wrong.

http://www.dashdev.net/xhtml_css_tutorial_5.html for example.

Ignore that site. It's crap. Pretty much everything it tells you is
wrong, and the site itself is badly done.

I know the W3C guidelines change constantly,

Yes, this new "1997" standard is _so_ recent!

Basically I'm talking about

<div id="menu" class="menu" align="left">
bla bla bla
</div>

Ah, the misbegotten spawn of late '90s coding. "New" (10 years ago)
language features dropped in blindfold with little or no understandign
to how they ought to be used. This doesn't work at all well.

I'm not going to go point-by-point on this page, there's just too much
wrong with it. Start again, don't fiddle. But find a good tutorial
before doing anything! Nearly all tutorials are wrong, so get a copy of
"Head First HTML" which is by-and-large right.

As to why your two sites differ under FF, I told you once - their
doctype declarations are different. The .eu site has a broken doctype
declaration that makes FF drop back into an IE compatibility "quirks"
mode.

Chaddy2222 · Oct 30, 2007

No such thing.

Years ago, there was a feature called "layers" in some obsolete versions
of Netscape. It hasn't been supported for years, few used it even back
then. To use the term "layers" today is either irrelevant and wrong, or
even worse by being misleading to this other term. Neither way will aid
communication wilth people who use CSS correctly or usefully today.

Then they're wrong.

Ignore that site. It's crap. Pretty much everything it tells you is
wrong, and the site itself is badly done.

Yes, this new "1997" standard is _so_ recent!

Ah, the misbegotten spawn of late '90s coding. "New" (10 years ago)
language features dropped in blindfold with little or no understandign
to how they ought to be used. This doesn't work at all well.

I'm not going to go point-by-point on this page, there's just too much
wrong with it. Start again, don't fiddle. But find a good tutorial
before doing anything! Nearly all tutorials are wrong, so get a copy of
"Head First HTML" which is by-and-large right.

Or more to the point, use Dreamwever in source view.
It has quite a good text editor.
I personally use KompoZer: http://www.kompozer.net a long with Crimson
Editor (with the HandCoder extention).
HandCoder is for KompoZer, it uses HTML tidy.

As to why your two sites differ under FF, I told you once - their
doctype declarations are different. The .eu site has a broken doctype
declaration that makes FF drop back into an IE compatibility "quirks"
mode.

Just another note to the OP, you will need to actually fix the errors
that the W3C validator throws at you in order for the document to be
valid, just changing the Doctype won't really fix anything. Then once
the docs are valid you will need to tweek the display through the CSS
if any issues arise.

Andy Dingley · Oct 30, 2007

Or more to the point, use Dreamwever in source view.
It has quite a good text editor.

Expensive way to buy a text editor.

Just another note to the OP, you will need to actually fix the errors
that the W3C validator throws at you in order for the document to be
valid, just changing the Doctype won't really fix anything.

It will in this case - the OP needs to _break_ standards-mode
rendering to get it to work(sic). It would actually work better as it
is without a doctype.

Don't put a correct Strict doctype declaration onto either of these
pages until you're ready to fix them properly.

Nick · Oct 30, 2007

Expensive way to buy a text editor.

It will in this case - the OP needs to _break_ standards-mode
rendering to get it to work(sic). It would actually work better as it
is without a doctype.

Don't put a correct Strict doctype declaration onto either of these
pages until you're ready to fix them properly.

I have fixed several things, and now the W3C HTML Code checker tells
me that the page is a Valid HTML 4.01 Transitional!

So the DOCTYPE is right.

I've also eliminated most of the tables.

There is a major problem in Firefox though: the search box on the left
doesn't work anymore (<input type="text" name="searchbox" size="18"
maxlength="25" class="searchbox">
</form>), one can't even select it, and neither work the links
under Categories. I could not find the reason. These work fine in
IE7 and Opera 9.

Another problem is that I'd like everything to appear at the centre of
the browser, as it does on IE7. In order to achieve this I've added
text-align:center to the class: all :

div.all { position:absolute; left: 0px; top: 0px; width:100%; height:
100%; z-index:1; text-align:center},

this is the class of the parent <div> that contains all other <div>
and everything else. It works on IE7, but not on Firefox or Opera,
that is the reason why I had originally done

<div id="all" class="all" align="center">.

It did center the content on Firefox in that way, but I know that is
has been deprecated in HTML 4.01. Could you help me finding out how
to make it work on Firefox and Opera ?

I have enlarged the font size, but I still have to do that for the
Categories Links, but I want to sort out the exhisting problems first.

I am aware of problems that can appear when once enlarge text, because
the size of the <div id="main class="main" which contains the website
content is fixed in pixels to 980px. It might be good to find an
alternative to that at some stage, perhaps after the existing problems
have been sorted.

Again, feedback and constructive criticism is appreciated. Negative
criticism, sarcasm, and silly jokes about me having a deal with Bill
Gates, are obvious, dull, sad, and bring nothing to the discussion, so
are best avoided.

Nick · Oct 30, 2007

There is alo another thing I needed to add:

As you can see the <div> element on the left (<div id="central-left"
class="central-left">), which is inside the <div id="all" element with
the greyed out leafy background, comes out at the bottom.

I though that the <div id="main" element would size itself in order to
be long enough to fully contain the <div> elements that it contains.
In the style sheet I've set height:auto, but obviosly it's not
happening. How do I achieve this ?

rf · Oct 30, 2007

I have fixed several things, and now the W3C HTML Code checker tells
me that the page is a Valid HTML 4.01 Transitional!

So the DOCTYPE is right.

I've also eliminated most of the tables.

There is a major problem in Firefox though: the search box on the left
doesn't work anymore (<input type="text" name="searchbox" size="18"
maxlength="25" class="searchbox">
</form>), one can't even select it, and neither work the links
under Categories. I could not find the reason. These work fine in
IE7 and Opera 9.

That'd be the form on the right, right?

There are so many weirdly positioned divs and tables in there that I'll bet
the browser is simply getting confused. I sure was when I looked at the
structure using firebug. It is, to say the least, a mess.

As to the non-functional form: It's being covered up by the welcome div
which has width: 100% specified. I think.

Also, why the javascript skulduggery with that image that is supposed to be
a "submit" button. Why not just make it a real submit button and let the
browser do it's work?

Another problem is that I'd like everything to appear at the centre of
the browser, as it does on IE7. In order to achieve this I've added
text-align:center to the class: all :

That aligns the content, not the divs that contain that content. margin:
auto might work but not with all that positioning stuff flying around.

div.all { position:absolute; left: 0px; top: 0px; width:100%; height:
100%; z-index:1; text-align:center},

this is the class of the parent <div> that contains all other <div>
and everything else. It works on IE7, but not on Firefox or Opera,
that is the reason why I had originally done

<div id="all" class="all" align="center">.

It did center the content on Firefox in that way, but I know that is
has been deprecated in HTML 4.01. Could you help me finding out how
to make it work on Firefox and Opera ?

I have enlarged the font size, but I still have to do that for the

To what? 75% of my preferred font size?

And there is a problem as well. When I increase my font size (as I must to
be able to put it back to 100% of my preferred size) your navigation bar
escapes it's absolutely positioned and sized dif.

I am aware of problems that can appear when once enlarge text, because
the size of the <div id="main class="main" which contains the website
content is fixed in pixels to 980px.

Ah I see you already know about that problem.

It might be good to find an
alternative to that at some stage, perhaps after the existing problems
have been sorted.

Like removing all the absolute positioning and sizing?

Again, feedback and constructive criticism is appreciated. Negative
criticism, sarcasm, and silly jokes about me having a deal with Bill
Gates, are obvious, dull, sad, and bring nothing to the discussion, so
are best avoided.

Welcome to usenet

Nick · Oct 31, 2007

That'd be the form on the right, right?

There are so many weirdly positioned divs and tables in there that I'll bet
the browser is simply getting confused. I sure was when I looked at the
structure using firebug. It is, to say the least, a mess.

As to the non-functional form: It's being covered up by the welcome div
which has width: 100% specified. I think.

Also, why the javascript skulduggery with that image that is supposed to be
a "submit" button. Why not just make it a real submit button and let the
browser do it's work?

That aligns the content, not the divs that contain that content. margin:
auto might work but not with all that positioning stuff flying around.

To what? 75% of my preferred font size?

And there is a problem as well. When I increase my font size (as I must to
be able to put it back to 100% of my preferred size) your navigation bar
escapes it's absolutely positioned and sized dif.

Ah I see you already know about that problem.

Like removing all the absolute positioning and sizing?

Welcome to usenet

Thank you very much for your advices about relative and absolute
positioning. At last I understand why the length of <div id="main"
class="main" (that has the leafy background) doesn't stretch to
accomodate the size of <div id="centre" the other two on the right.
You see, I'm quite new to relative positioning, and even though I
underastand it in theory, in practice I often see that the results
differ from what I expected. I took a CIW Qualification as web
designer and web developer 3 years ago, but they taught lots of old
stuff, mainly tables. My previous sites were all about tables, until I
understood it was better to do otherwise.

Could you have a look at these two experimental pages I've done using
Firefox:

I've taken out the header for the moment, just to tackle 1 problem at
a time.

the first is:

alternativeherbal.co.uk/example1.php

this page uses relative positioning for the <div id="centre" element,
but as you can see it doesn't look right, although the automative
sizing of the leafy background contained in <div id="main" is perfect.

in

alternativeherbal.co.uk/example2.php

I've used the absolute positioning, and in fact the middle box (<div
id="centre") is longer than the <div id="main" that was supposed to
contain it, and thanks to your advice now I understand why.

What I needed to ask you if you think there is a way to make the three
boxes look like in example1, but using relative positoning instead.
Obviously the length of <div id="left" class="left" can change in the
other pages, especially because in other pages it contains images of
products, dynamically generated querying a MySql Database, and as I
understood the length of the <div id="left" affects the relative top
positioning of the <div id="centre" element.

So, considered this, do you think there is a way at all to make
example1 look more like example2, but still using relative positioning
instead?

thanks a lot.

PS View this in Fiorefox, not IE. I have found out that IE requires
totally different positioning coordinates when using relative
positioning, so I'll be using a different stylesheet for that, but I
haven't made it yet for this, because it is just an experiment really.

Bergamot · Oct 31, 2007

Nick said:
alternativeherbal.co.uk/example1.php
this page uses relative positioning

alternativeherbal.co.uk/example2.php
I've used the absolute positioning

What I needed to ask you if you think there is a way to make the three
boxes look like in example1, but using relative positoning instead.

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.

PS View this in Fiorefox, not IE. I have found out that IE requires
totally different positioning coordinates when using relative
positioning,

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.

so I'll be using a different stylesheet for that,

That would be fixing the wrong problem, I think.

Help Please On 2 of my Websites	1	Oct 2, 2024
How to automate repetitive tasks on firefox ???	6	Dec 24, 2022
Chrome not displaying uploaded HTML and CSS code	5	Nov 17, 2022
Azul Systems 3320B - 2 pcs from uncle	0	Nov 7, 2022
Stuck with html and css	25	Dec 14, 2022
[HELP] Add-on - Twitch chat input	0	Aug 31, 2024
My JSP/Javascript page looks differently on 2 different machines	0	Aug 30, 2019
CIN Input #2 gets skipped, I don't understand why.	1	Feb 9, 2023

HTML on Firefox 2

Nick

rf

Beauregard T. Shagnasty

Andy Dingley

Nick

Harlan Messinger

Beauregard T. Shagnasty

Ben C

dorayme

Bergamot

Bergamot

Jonathan N. Little

Andy Dingley

Chaddy2222

Andy Dingley

Nick

Nick

rf

Nick

Bergamot

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads