text spills out of scrollind div

[David Graham]

Hi
I posted the request for help below at
comp.infosystems.www.authoring.stylesheets as that is the most appropriate
newsgroup, but they don't seem to be able to solve this problem (last reply
was a rant about whether I should be colouring my scrollbars!)
I hope this isn't breaking the rules, but I would like to ask the members
here for help, as I knoe there are quite a few bright sparks who hang around
this ng. (I tried one suggestion of removing the overflow-x: hidden; but it
doesn't help)

one little extra question - does it look OK in IE5?



Hi
I have a page at:
http://p0c79.phpwebhosting.com/~p0c79/testbusiness.html

which opens as expected, but an identical page, (except for the text content
of the scrolling div
http://p0c79.phpwebhosting.com/~p0c79/testbusiness2.html
opens up with the content of the scrolling div spilling over the right side
of the screen. I have worked on this all day and I'm no further on in
understanding what the problem is. Validation brings up warnings about no
alt attribute in a lot of the images, I will get round to putting them in,
but I know this has nothing to do with this problem. It has to be something
about the actual text content in the scrolling div as everything else is
identical between the two pages.

I know the javascript links in the menu is bad, but I did this page before I
had read 1001 postings in this ng. about good and bad practise. I really
would like to know what is causing the second page to load in an odd way.

BTW - it rectifies itself if you resize the browser window a couple of
times!

the css stylesheet is:
http://p0c79.phpwebhosting.com/~p0c79/layout2.css

and the relevant bits are #contentcontainertypes and #contenttypes

I have the problem in IE6 and NN7, in Opera the scrolling div has no scroll,
it displays it all in a big div, but the problem above doesn't occur (don't
have any other browsers to test with)

big thanks if you can solve this mystery

David

 

[Sid Ismail]

On Tue, 8 Jul 2003 10:14:12 +0100, "David Graham"

: I posted the request for help below at
: comp.infosystems.www.authoring.stylesheets as that is the most appropriate
: newsgroup, but they don't seem to be able to solve this problem (last reply
: was a rant about whether I should be colouring my scrollbars!)


Why are you colouring in your scrollbars?

Sid

 

[David Graham]

On Tue, 8 Jul 2003 10:14:12 +0100, "David Graham"

: I posted the request for help below at
: comp.infosystems.www.authoring.stylesheets as that is the most appropriate
: newsgroup, but they don't seem to be able to solve this problem (last reply
: was a rant about whether I should be colouring my scrollbars!)


Why are you colouring in your scrollbars?

Sid

I want to present the user of my site with an aesthetic looking site. The
coloured scrollbars are in keeping with the general ambience of the site. If
you go to say, a restaurant, you don't swap the proprietors curtains etc
because you don't think he/she has made a good choice. I suppose my analogy
breaks down if you consider the scrollbars to be yours - can't argue against
that one very easily, except to say, at most, I am temporarily decorating
them while you visit my site. If you object to this then you have the right
to leave my site, and then your scrollbars are back to the way you want
them. I can't see the problem, my intention is to produce a pleasing looking
site, the normal grey scrollbars look a bit harsh and don't complement my
design.
I guess I am not going to alter anyones view - they seem to be fairly
entrenched on this one, but can I ask again to have the benefit of your
skills on my problem.

thanks

David

 

[rf]

I want to present the user of my site with an aesthetic looking site. The
coloured scrollbars are in keeping with the general ambience of the site. If
you go to say, a restaurant, you don't swap the proprietors curtains etc
because you don't think he/she has made a good choice. I suppose my analogy
breaks down if you consider the scrollbars to be yours - can't argue against
that one very easily, except to say, at most, I am temporarily decorating
them while you visit my site. If you object to this then you have the right
to leave my site, and then your scrollbars are back to the way you want
them. I can't see the problem, my intention is to produce a pleasing looking
site, the normal grey scrollbars look a bit harsh and don't complement my
design.

I was going to leave this thread alone as the baby-puke yellow turned me
right off. However, since you are being so polite about the flames I will
proceed.

I guess I am not going to alter anyones view - they seem to be fairly
entrenched on this one, but can I ask again to have the benefit of your
skills on my problem.

The real problem is the one you have created for yourself by thinking that
the web page is a screen. It is not. It is a document, to be scrolled by the
browser. You don't ensure your word documents exactly fit the size of the
editors window do you?

The div under consideration should not have a scroll bar. It's height should
be the height of its content.

On my system and at most font sizes I choose to use I actually end up with
two scroll bars. There is the one provided by the browser and there is the
one you have enforced on that div. To read all of the text I have to juggle
both of them.

Abandon your view of a web page exactly filling a browser canvas. It never
will. A web page starts at the top and ends at the end of its content. The
browser takes care of scrolling the content up and down.

Also of consideration is the div soup you have in there. IE is singularly
bad in its box model. Throw enough nested divs at it and it barfs. Simplify
the whole thing (probably by letting that div grow as it should to fit the
content) and all might get better.

Cheers
Richard.

 

[David Graham]

site.

I was going to leave this thread alone as the baby-puke yellow turned me
right off. However, since you are being so polite about the flames I will
proceed.


The real problem is the one you have created for yourself by thinking that
the web page is a screen. It is not. It is a document, to be scrolled by the
browser. You don't ensure your word documents exactly fit the size of the
editors window do you?

The div under consideration should not have a scroll bar. It's height should
be the height of its content.

On my system and at most font sizes I choose to use I actually end up with
two scroll bars. There is the one provided by the browser and there is the
one you have enforced on that div. To read all of the text I have to juggle
both of them.

Abandon your view of a web page exactly filling a browser canvas. It never
will. A web page starts at the top and ends at the end of its content. The
browser takes care of scrolling the content up and down.

Also of consideration is the div soup you have in there. IE is singularly
bad in its box model. Throw enough nested divs at it and it barfs. Simplify
the whole thing (probably by letting that div grow as it should to fit the
content) and all might get better.

Cheers
Richard.

Hi
Always polite if at all possible. I agree about div soup, but the basic idea
was adapted from
http://scott.sauyet.name/CSS/Demo/FooterDemo1.html
this allows the footer to be at the bottom of the viewport if canvas is
short and the bottom of the canvas when the canvas is longer,
this was then added to by me for the title at the top with its logo and
image stating which page this is, together with bands of colour running
under it and the navigation down the left - and the div in question houses
the content.It all starts to add up to quite a few divs, and to be honest I
lose track of what I'm doing half the time. I felt guilty asking for people
to try and solve the problem because I knew the code is a bit difficult to
get your head round. Anyway, the site is for my brother-in-law, and he has
asked if the info can be presented without a lot of page scrolling, hence
the scrolling div. I must say, I find two vertical scroolbars confusing, but
I can't radically change things now, as my brother-in- law is happy with it
and has already asked his clients ot use it. I think I will take of the
scroll from the div and just have a long page scroll - unless you no how to
fix the problem. Anyway, as a learning exercise only, I would like to know
what causes this. I have noticed that if I use the text that is inside the
scrolling div from
http://p0c79.phpwebhosting.com/~p0c79/testbusiness.html
copy and pasted into the scrolling div found in
http://p0c79.phpwebhosting.com/~p0c79/testbusiness2.html

then all is well. So what is good about the first text and bad about the
second. I can also trigger the problem if I simply fill the scrolling div in
business2.html with a lot of blah<br> type of statements beyond a certain
number of lines. So, is it just something to do with the number of lines in
the scrolling div? If so, why, what would be the reason for a scrolling div
not liking too many lines? Actually the process of typing the last few lines
has given me an idea. I will paste the text from the scrolling div in
testbusiness2.html into the scrolling div in testbusiness.html (firstly
removing the text normally resident here) and see if the makes
testbusiness.html misbehave in a similar fashion.

Will report back in a few minuites.

thanks for sticking with this thread

David

 

[David Graham]

Actually the process of typing the last few lines

has given me an idea. I will paste the text from the scrolling div in
testbusiness2.html into the scrolling div in testbusiness.html (firstly
removing the text normally resident here) and see if the makes
testbusiness.html misbehave in a similar fashion.

Will report back in a few minuites.

thanks for sticking with this thread

David

Hi
Reporting back
Well, the text from testbusiness2.html has an equally bad affect on
testbusiness.html. So this text is fundermentally bad in some way. Also, I
don't think it is directly related to the number of lines in the text, as
about 12lines of blah<br> will trigger it wereas many more lines of text
from testbusiness.html does not????

Confused - any help most appreciated

David

 

[David Graham]

Hint: try removing all background: properties and see what happens. You may
just be pleasantly surprised. IE's box model often breaks by simply adding a
background, or a border, or most bizarre, leaving out a border.

As you suspect I think the KISS principle may apply in this case

Cheers
Richard.

Hi
Commented out the border and backgrounds, still does it? I think I will have
to drop the scrolling div - may be better design anyway.
thanks for the help received
David

 

[Jacqui or (maybe) Pete]

....
Commented out the border and backgrounds, still does it? I think I will have
to drop the scrolling div - may be better design anyway.
thanks for the help received

The example at http://scott.sauyet.name/CSS/Demo/FooterDemo1.html is
pretty fragile. I've done a couple of things based on it, but it's never
easy.

 

[David Graham]

The example at http://scott.sauyet.name/CSS/Demo/FooterDemo1.html is
pretty fragile. I've done a couple of things based on it, but it's never
easy.

Hi
I solved my problem. I was closing the scrolling div and the containing div
like this:

<p>&nbsp;</p>
</div>
<p>&nbsp;</p>
</div>

Just to create some space, of course I should just of created the space with
CSS. I have taken the <p> elements out and IE is no longer confused. I
haven't uploaded working page as it was only a test.
Thanks to everyone who helped
David