CSS problem with FF/Opera - Scrollbar problem with all

[Rioshin an'Harthen]

In designing a new site for the local bridge club, I've stumbled upon a
problem with my css code. Interesting fact is that I copied the code from
another website an aquaintance did a few years back, and on that page it
displays correctly.

The front page stuff, for some strange reason I can't fathom, doesn't
display in the div-element I have for the contents of the page in Firefox
and Opera; other pages show up inside the correct div. This problem does not
occur with IE or Avant.

However, I have a second problem to do with the scroll bar in said
div-element. The overflow is set to automatic in the css, which means it
shows up when necessary. What it does not is glue to the right edge of the
div; depending on the page viewed it might appear just about anywhere. This
is apparent with all four browsers I've tested with.

I've been stumped with this for a few days now, and can't figure out what is
wrong. If anyone could take a look, I'd appreciate it. :)

The site is at
http://koti.mbnet.fi/b001/uusi/

and the style-sheet is at
http://koti.mbnet.fi/b001/uusi/layout/b001_styles.css

[Beauregard T. Shagnasty]

Rioshin an'Harthen wrote:

In designing a new site for the local bridge club, I've stumbled upon
a problem with my css code. Interesting fact is that I copied the
code from another website an aquaintance did a few years back, and on
that page it displays correctly.

Does that other site attempt to use scrolling divs? Bad choice, imo.

The front page stuff, for some strange reason I can't fathom, doesn't
display in the div-element I have for the contents of the page in
Firefox and Opera; other pages show up inside the correct div. This
problem does not occur with IE or Avant.

However, I have a second problem to do with the scroll bar in said
div-element. The overflow is set to automatic in the css, which means
it shows up when necessary. What it does not is glue to the right
edge of the div; depending on the page viewed it might appear just
about anywhere. This is apparent with all four browsers I've tested
with.

It looks to me as if you have a rather standard two-column layout.
Rather than penalize the visitors with scrolling sections *within* the
page, I'd recommend not using a scrolling div. There is no reason for
it.

I've been stumped with this for a few days now, and can't figure out
what is wrong. If anyone could take a look, I'd appreciate it. :)

The site is at
http://koti.mbnet.fi/b001/uusi/

and the style-sheet is at
http://koti.mbnet.fi/b001/uusi/layout/b001_styles.css

Have a look at a couple good two-column layouts, and use them.

http://benmeadowcroft.com/webdev/css...ft-column.html
http://bluerobot.com/web/layouts/layout1.html

--
-bts
-Motorcycles defy gravity; cars just suck

[Ben C]

On 2006-12-11, Rioshin an'Harthen <rh******@hotmail.comwrote:

In designing a new site for the local bridge club, I've stumbled upon a
problem with my css code. Interesting fact is that I copied the code from
another website an aquaintance did a few years back, and on that page it
displays correctly.

The front page stuff, for some strange reason I can't fathom, doesn't
display in the div-element I have for the contents of the page in Firefox
and Opera; other pages show up inside the correct div. This problem does not
occur with IE or Avant.

I can't understand your description of the problem. I don't have IE or
Avant-- I expect it would be obvious what's wrong if I could look at the
page in one of those, but I can't.

What's the "front page stuff", and which div element is it supposed to
be appearing in?

[Rioshin an'Harthen]

"Ben C" <sp******@spam.eggswrote:

On 2006-12-11, Rioshin an'Harthen <rh******@hotmail.comwrote:

>In designing a new site for the local bridge club, I've stumbled upon a
problem with my css code. Interesting fact is that I copied the code from
another website an aquaintance did a few years back, and on that page it
displays correctly.

The front page stuff, for some strange reason I can't fathom, doesn't
display in the div-element I have for the contents of the page in Firefox
and Opera; other pages show up inside the correct div. This problem does
not
occur with IE or Avant.

I can't understand your description of the problem. I don't have IE or
Avant-- I expect it would be obvious what's wrong if I could look at the
page in one of those, but I can't.

What's the "front page stuff", and which div element is it supposed to
be appearing in?

Ok, I'll try with some ascii art... better read with a fixed-width font if
possible. I have divs setup as follows:

+------------------------+
| header |
| language |
+-----+------------------+
| nav | page content |
| | |
| | |
+-----+------------------+

With Firefox and Opera, opening the front page of the site moves whatever is
in the "page content" div under all divs; no other page there exhibits that
problem.

If you click on one of the links in the navigation area to the left you
should see the contents correctly; if you then return to the front page and
compare the two the difference should stand out. This is regardless of the
language chosen for the site.

[Rioshin an'Harthen]

"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:

Rioshin an'Harthen wrote:

>In designing a new site for the local bridge club, I've stumbled upon
a problem with my css code. Interesting fact is that I copied the
code from another website an aquaintance did a few years back, and on
that page it displays correctly.

Does that other site attempt to use scrolling divs? Bad choice, imo.

Maybe in your opinion. Not in mine, or in that of those others involved in
the design of this site. The idea behind using a scrolling div is to keep
the navigation area visible at all times; so far, none of us have found a
solution for this other than said scrolling div that works reliably on any
browser we've encountered. (Too bad none of us have access to Safari to test
with, as well.)

It looks to me as if you have a rather standard two-column layout.
Rather than penalize the visitors with scrolling sections *within* the
page, I'd recommend not using a scrolling div. There is no reason for
it.

Have a look at a couple good two-column layouts, and use them.

http://benmeadowcroft.com/webdev/css...ft-column.html
http://bluerobot.com/web/layouts/layout1.html

<sarcasm>
Forcing the navigation area to scroll away when scrolling down. Bad choice,
imo.
</sarcasm>

[Beauregard T. Shagnasty]

Rioshin an'Harthen wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:

>Rioshin an'Harthen wrote:

>>In designing a new site for the local bridge club, I've stumbled
upon a problem with my css code. Interesting fact is that I copied
the code from another website an aquaintance did a few years back,
and on that page it displays correctly.

Does that other site attempt to use scrolling divs? Bad choice,
imo.

Maybe in your opinion. Not in mine, or in that of those others
involved in the design of this site. The idea behind using a
scrolling div is to keep the navigation area visible at all times; so
far, none of us have found a solution for this other than said
scrolling div that works reliably on any browser we've encountered.
(Too bad none of us have access to Safari to test with, as well.)

I think you would find the general public is quite comfortable with
"navigation areas" that scroll with the page, and far less comfortable
trying to find a scrollbar in the *middle* of a page, or even
recognizing that one is present.

If you asked this group for a survey ...

However, if this site is *only* for your bridge club members and you
never expect anyone else to visit, feel free to use a non-standard
method of display.

>It looks to me as if you have a rather standard two-column layout.
Rather than penalize the visitors with scrolling sections *within*
the page, I'd recommend not using a scrolling div. There is no
reason for it.

Have a look at a couple good two-column layouts, and use them.

http://benmeadowcroft.com/webdev/css...ft-column.html
http://bluerobot.com/web/layouts/layout1.html

<sarcasm>
Forcing the navigation area to scroll away when scrolling
down. Bad choice, imo.
</sarcasm>

As the nagivation "scrolls away" on nearly every other web page on the
entire World Wide Web, you are in a minority, my friend.

Have fun. :-)

--
-bts
-Motorcycles defy gravity; cars just suck

[Rioshin an'Harthen]

"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:

>
I think you would find the general public is quite comfortable with
"navigation areas" that scroll with the page, and far less comfortable
trying to find a scrollbar in the *middle* of a page, or even
recognizing that one is present.

If you asked this group for a survey ...

However, if this site is *only* for your bridge club members and you
never expect anyone else to visit, feel free to use a non-standard
method of display.

As the nagivation "scrolls away" on nearly every other web page on the
entire World Wide Web, you are in a minority, my friend.

Have fun. :-)

Well, I guess we have to agree to disagree, then. :)

Opinions do differ; those of us who designed the new site don't like it when
the navigation scrolls away, so it's reflected in the site design. I do know
most don't mind, but as far as I've been able to see, not that many mind
only a part of the display scrolling, either. So we went for this.

However, any hints on how to rectify the rendering problems occuring? I've
used the tricks I know for pre-2 versions of Mozilla and earlier Opera's,
but it seems I'm missing something for the newer releases to get them to
work correctly...

[Rioshin an'Harthen]

"Rioshin an'Harthen" <rh******@hotmail.comwrote:

>
The site is at
http://koti.mbnet.fi/b001/uusi/

and the style-sheet is at
http://koti.mbnet.fi/b001/uusi/layout/b001_styles.css

Well, replying to my own post now...

However, the address has changed a bit - the site went live, but the same
problems are still evident.

In the new address, just remove the part "uusi/" from the address, ie. the
new addresses are

http://koti.mbnet.fi/b001/

and

http://koti.mbnet.fi/b001/layout/b001_styles.css

respectively.

[Beauregard T. Shagnasty]

Rioshin an'Harthen wrote:

However, any hints on how to rectify the rendering problems occuring?
I've used the tricks I know for pre-2 versions of Mozilla and earlier
Opera's, but it seems I'm missing something for the newer releases to
get them to work correctly...

In div.navibar { I changed the width from 200px to:

width: 120px;

...which seems to fit the link text better.

In div.documentarea { I commented out (or removed):
/* float: left; */

...and it seems to do what you want.

You also need to add: background-color: white;
to the div.header, as the blue intrudes around the graphic.

--
-bts
-Motorcycles defy gravity; cars just suck

[Rioshin an'Harthen]

"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:

Rioshin an'Harthen wrote:

>However, any hints on how to rectify the rendering problems occuring?
I've used the tricks I know for pre-2 versions of Mozilla and earlier
Opera's, but it seems I'm missing something for the newer releases to
get them to work correctly...

In div.navibar { I changed the width from 200px to:

width: 120px;

..which seems to fit the link text better.

In div.documentarea { I commented out (or removed):
/* float: left; */

..and it seems to do what you want.

You also need to add: background-color: white;
to the div.header, as the blue intrudes around the graphic.

Thank you! That did the charm. Works nicely now. :)

[Beauregard T. Shagnasty]

Rioshin an'Harthen wrote:

Thank you! That did the charm. Works nicely now. :)

...except for that scrolling div... <lol!>

--
-bts
-Motorcycles defy gravity; cars just suck

[Rioshin an'Harthen]

"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:

Rioshin an'Harthen wrote:

>Thank you! That did the charm. Works nicely now. :)

..except for that scrolling div... <lol!>

lol :)