Opera and refreshing

[A.Translator]

I have been struggling with a page that is based on a table structure
(because that is all I am feeling comfortable with at the moment) styled
with css.

One of the problems I run in to is Opera (Opera 7 in my case).
The weird thing is: viewing the page through Opera's eyes the first time
around is OK, but after refreshing, the page gets messed up badly.

I will look into the cause of the mess, but for now am really curious:
what does refreshing have to do with it?

Referring URL:
http://huizen.dds.nl/~ochrid/Henk/index.htm

then click on 'bibliografie' (first button in navbar).

If that is OK, refresh, or go back Home and click bibliografie again:
here the whole page gets messed up (the first 'justified' text div is seen
as one long line of text, tearing up the rest of the page as well).

Is there someone who can tell me what principle is involved here?
What should I be aware of?

Thanks for taking the time, and good Easter!
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[Spartanicus]

"A.Translator" <ad******************@yaBISHhoo.com> wrote:

In that case I've misunderstood you, please explain again why you used
this code:

ul { position:relative;left:-2em; }

I used it because: - I want bullets of some sort - just using bullets was
OK in Mozilla and Opera, but not in IE6: the latter browser does
something interpreting the width of the ul, and makes it look as though it
is indented ( I am using layman's words, do not know the proper
terminology).

- therefore (?) the ul became to wide for IE to contain both UL and image,
and it pushed the image down, as show in this
illustration:http://www.xs4all.nl/~hogen/test/.

- someone in this group suggest the position relative idea, with a
negative left margin.

Strange suggestion, I'd loose it. For me the image doesn't move down if
I take the ul css rule out in IE (5.5).

Another thing:

<div align="center">
<td><div><a href="#">biografie</a></div></td>
<div><p align="justify">
<div><div class="imagebox2">

None of these divs are needed.

A quick reworking of that page sans divs:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio2.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl2.htm

--
Spartanicus

[A.Translator]

On Sun, 11 Apr 2004 01:34:28 +0100, Spartanicus wrote:

"A.Translator" <ad******************@yaBISHhoo.com> wrote:

In that case I've misunderstood you, please explain again why you used
this code:

ul { position:relative;left:-2em; }

I used it because: - I want bullets of some sort - just using bullets was
OK in Mozilla and Opera, but not in IE6: the latter browser does
something interpreting the width of the ul, and makes it look as though it
is indented ( I am using layman's words, do not know the proper
terminology).

- therefore (?) the ul became to wide for IE to contain both UL and image,
and it pushed the image down, as show in this
illustration:http://www.xs4all.nl/~hogen/test/.

- someone in this group suggest the position relative idea, with a
negative left margin.

Strange suggestion, I'd loose it. For me the image doesn't move down if
I take the ul css rule out in IE (5.5).

Another thing:

<div align="center">
<td><div><a href="#">biografie</a></div></td>
<div><p align="justify">
<div><div class="imagebox2">

None of these divs are needed.

A quick reworking of that page sans divs:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio2.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl2.htm

Thank you very much!

I will recreate the page step by step following your suggestions, but I
don't understand why the image moves down here.

I thought I needed div's as containers to control the flow, but that is
obviously not true.

Thanks again.

--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[A.Translator]

On Sun, 11 Apr 2004 01:34:28 +0100, Spartanicus wrote:

"A.Translator" <ad******************@yaBISHhoo.com> wrote:

In that case I've misunderstood you, please explain again why you used
this code:

ul { position:relative;left:-2em; }

I used it because: - I want bullets of some sort - just using bullets was
OK in Mozilla and Opera, but not in IE6: the latter browser does
something interpreting the width of the ul, and makes it look as though it
is indented ( I am using layman's words, do not know the proper
terminology).

- therefore (?) the ul became to wide for IE to contain both UL and image,
and it pushed the image down, as show in this
illustration:http://www.xs4all.nl/~hogen/test/.

- someone in this group suggest the position relative idea, with a
negative left margin.

Strange suggestion, I'd loose it. For me the image doesn't move down if
I take the ul css rule out in IE (5.5).

Another thing:

<div align="center">
<td><div><a href="#">biografie</a></div></td>
<div><p align="justify">
<div><div class="imagebox2">

None of these divs are needed.

A quick reworking of that page sans divs:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio2.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl2.htm

Thank you very much!

I will recreate the page step by step following your suggestions, but I
don't understand why the image moves down here.

I thought I needed div's as containers to control the flow, but that is
obviously not true.

Thanks again.

--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[Spartanicus]

Spartanicus <[e-mail]> wrote:

A quick reworking of that page sans divs:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio2.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl2.htm

And using a strict doctype and no table for layout:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio3.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl3.htm

--
Spartanicus

[Spartanicus]

Spartanicus <[e-mail]> wrote:

A quick reworking of that page sans divs:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio2.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl2.htm

And using a strict doctype and no table for layout:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio3.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl3.htm

--
Spartanicus

[A.Translator]

On Sun, 11 Apr 2004 11:43:44 +0100, Spartanicus wrote:

And using a strict doctype and no table for layout:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio3.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl3.htm

Your help does a lot to make me loose my fear for a table-less layout!
I will have a good look at what you have done, and may well take the
plunge.

Thank you very much for your help and encouragement.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[A.Translator]

On Sun, 11 Apr 2004 11:43:44 +0100, Spartanicus wrote:

And using a strict doctype and no table for layout:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio3.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl3.htm

Your help does a lot to make me loose my fear for a table-less layout!
I will have a good look at what you have done, and may well take the
plunge.

Thank you very much for your help and encouragement.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[Spartanicus]

"A.Translator" <ad******************@yaBISHhoo.com> wrote:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio3.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl3.htm

Your help does a lot to make me loose my fear for a table-less layout!
I will have a good look at what you have done, and may well take the
plunge.

Some explanation may help as there are a few hacks in there that may
make it less than obvious as to the why:

The page is wrapped in a <div class="content"></div> because IE does not
support setting the 736px width of the page directly on the body element
(which works fine in most other UAs).

IE5.5 does not support centering the content div in a spec compliant way
(by setting the left and right margin to auto), a hack that exploits a
bug in IE5.5 to get the content div to center was added by setting the
body to "text-align:center", IE5.5 then (erroneously) centers the
content div. Spec compliant browsers and IE6 ignore this, they use the
"margin:auto" rule applied to the content div itself.

A further hack is then needed as setting "text-align:center" on the body
element is inherited by descendant elements, so "text-align:left" was
added to the content div itself to prevent that from happening.

The menu was marked up using an unordered list, this is considered the
appropriate markup for what is essentially "a list of links".

Since the menu needs to be displayed horizontally those <li> elements
have been set to "display:inline", text links like the ones you use are
by default inline, this is not wanted in this case because inline
elements cannot be assigned a width. Unfortunately due to a missing
feature in CSS2.0 there is no "inline-block" element available. We can't
use block because that would result in the buttons being displayed
vertically. Enter another hack: setting the nav links to "float:left",
floats are block level elements, hence they can be assigned a width, but
since all menu links are floated left, they are displayed horizontally.

Due to the fact that this is a hack, a drawback now pops up: the <ul>
(block level) element's height collapses to 0 since floated elements are
not "part of the flow" (CSS speak, sorry). This has a negative effect on
being able to specify a top and bottom margin on the menu <ul>, to
counter that effect the <ul> has been assigned a height of 1.3em, this
is roughly equal to the button text height and since it's specified as
em it will expand with the text if the menu text is zoomed.

--
Spartanicus

[Spartanicus]

"A.Translator" <ad******************@yaBISHhoo.com> wrote:

HTML: http://www.spartanicus.utvinternet.ie/test/biblio3.htm
CSS: http://www.spartanicus.utvinternet.i.../HenkStyl3.htm

Your help does a lot to make me loose my fear for a table-less layout!
I will have a good look at what you have done, and may well take the
plunge.

Some explanation may help as there are a few hacks in there that may
make it less than obvious as to the why:

The page is wrapped in a <div class="content"></div> because IE does not
support setting the 736px width of the page directly on the body element
(which works fine in most other UAs).

IE5.5 does not support centering the content div in a spec compliant way
(by setting the left and right margin to auto), a hack that exploits a
bug in IE5.5 to get the content div to center was added by setting the
body to "text-align:center", IE5.5 then (erroneously) centers the
content div. Spec compliant browsers and IE6 ignore this, they use the
"margin:auto" rule applied to the content div itself.

A further hack is then needed as setting "text-align:center" on the body
element is inherited by descendant elements, so "text-align:left" was
added to the content div itself to prevent that from happening.

The menu was marked up using an unordered list, this is considered the
appropriate markup for what is essentially "a list of links".

Since the menu needs to be displayed horizontally those <li> elements
have been set to "display:inline", text links like the ones you use are
by default inline, this is not wanted in this case because inline
elements cannot be assigned a width. Unfortunately due to a missing
feature in CSS2.0 there is no "inline-block" element available. We can't
use block because that would result in the buttons being displayed
vertically. Enter another hack: setting the nav links to "float:left",
floats are block level elements, hence they can be assigned a width, but
since all menu links are floated left, they are displayed horizontally.

Due to the fact that this is a hack, a drawback now pops up: the <ul>
(block level) element's height collapses to 0 since floated elements are
not "part of the flow" (CSS speak, sorry). This has a negative effect on
being able to specify a top and bottom margin on the menu <ul>, to
counter that effect the <ul> has been assigned a height of 1.3em, this
is roughly equal to the button text height and since it's specified as
em it will expand with the text if the menu text is zoomed.

--
Spartanicus

[A.Translator]

On Sun, 11 Apr 2004 15:58:08 +0100, Spartanicus wrote:

Some explanation may help as there are a few hacks in there that may
make it less than obvious as to the why:

That certainly helped! Just when it seemed so easy...
I have printed out your explanation and will keep it at hand as my very own
custom made css-course.

I had started out trying to use just css (without tables), but ran into too
many complications. Your hacks teach me a lot about what can crop up and
what to do about it.

I am in your debt.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[A.Translator]

On Sun, 11 Apr 2004 15:58:08 +0100, Spartanicus wrote:

Some explanation may help as there are a few hacks in there that may
make it less than obvious as to the why:

That certainly helped! Just when it seemed so easy...
I have printed out your explanation and will keep it at hand as my very own
custom made css-course.

I had started out trying to use just css (without tables), but ran into too
many complications. Your hacks teach me a lot about what can crop up and
what to do about it.

I am in your debt.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]