Re: Unnecessary scrollbars

Followup-to set: comp.infosystems.www.authoring.stylesheets

Ernst Elzas wrote : 
Hello,

If these questions have been asked numerous times before, please excuse
me, I have not managed to find the information I needed.
I'm making a webpage (for now it will only be in two languages, English
and Hebrew), and noticed a few issues with scrollbars:
I divided the page in divs, with drop-down menus appearing in the
top-div: (quoting the relevant lines from the css file)

html,body {background-color: #000008; color:red; height: 100%;
width:100%; position:relative;


Wow. The html and body elements are relatively positioned. I really wonder why you needed to do that. And also why you specifically needed to set the width and height of those elements. This is really really odd.

margin: 0; padding: 
0;font-family:serif;overflow:auto;}
#content{clear:left;background-image:url("backgroundimage.jpg");background-repeat:no-repeat;background-attachment:fixed;background-position:50%
60%;background-color:#000008;;color:red;height:77%;width:80%;position:absolute;left:10%;top:15%;overflow:auto;padding:0;margin:0;}
#copyright{background-color:transparent;color:gray;position:absolute;height:5%;width:30%;top:92%;left:35%;text-align:center;vertical-align:middle;margi
n:0;padding:0;}
#banner{background-color:transparent;color:red;position:absolute;height:10%;width:100%;margin:0;padding:0;left:0;top:0;text-align:center;vert
ical-align:middle;font-size:200%;}
#top{background-color:transparent;color:red;position:absolute;height:5%;width:80%;margin:0;padding:0;left:10%;top:10%;overflow:visible;}
#left{background-color:transparent;color:red;position:absolute;height:90%;width:10%;margin:0;padding:0;top:10%;left:0;}
#right{background-color:transparent;color:red;position:absolute;height:90%;width:10%;margin:0;padding:0;top:10%;left:90%;}

Right here, I'd say you do not know at all what CSS inheritance is.
Also, you should know that the initial, default value for background-color is transparent. So, your numerous declarations of background-color:transparent are unneeded and unnecessary.


body>div#banner{position:fixed;}
body>div#top{position:fixed;}
body>div#left{position:fixed;}
body>div#right{position:fixed;}
body>div#copyright{position:fixed;}
body>div#content{position:fixed;}

Again, this is very much odd. All those elements are fixed ... inside relatively positioned block containers...

In the Hebrew version, only the content-div gets a slightly different
lay-out, due to the drop-down menus appearing right-aligned instead of
left-aligned:

Realistically speaking, how do you expect people to read so much code, read your comments and then come up with a specific, custom answer to your long, complex code problem?

#content{clear:right;background-image:url("backgroundimage.jpg");background-repeat:no-repeat;background-attachment:fixed;background-position:50%
60%;background-color:transparent;color:red;height:77%;width:80%;position:absolute;left:10%;top:15%;overflow:auto;padding:0;margin:0;}

On a page where the contents of the content-div are small, no
scrollbars should appear, where they are big, scrollbar should appear
to the side of the content-div, the content of all the other divs is
small enough to fit inside the div (but the drop-down menus will
overflow to the content-div)


Did it ever occur to you that posting just a few questions along with an url would be better for readers of your post wishing to bring you some kind of assistance in solving your issues?


In Trident-browsers, there was always a greyed-out vertical scrollbar
on the side of the page, which should have been absent. I managed to
make it disappear by adding overflow:auto to html,body (as seen above),
however, then, both a horizontal and vertical scrollbar appeared on
the side of the document in the Hebrew version, although clicking again
on a link to that page from within the same page does make them
disappear. This does seem to happen only when switching from English to
Hebrew, not when opening the Hebrew page directly.

In Gecko-browsers a similar phenomenon occurs on one specific page. I
made a list, not withstanding the fact that the displaystyle is not the
on I want eventually, it's incorrectly displayed (in all browsers). The
discs do not appear in the English version, but in the Gecko-browsers
they do appear in the Hebrew version, unfortunately, the Gecko-browsers
then also do put a horizontal scrollbar, without need for it, since the
text wraps around, eliminating the need for a horizontal scrollbar.
This effect does not happen in Presto- and Trident-browsers.
The css for the list (English version):
ul.bullet{display:table-row-group;width:100%;position:absolute;left:auto;top:auto;list-style-type:disc;background-color:transparent;}
li.bullet{width:100%;height:10%;position:relative;border:thick;text-align:left;font-variant:normal;}
and the Hebrew version:
ul.bullet{display:table-row-group;width:100%;position:absolute;right:auto;top:auto;list-style-type:disc;background-color:transparent;}
li.bullet{width:100%;height:10%;position:relative;border:thick;text-align:right;}

Has anyone got any idea to get around the above mentioned problems?

I think your post so far does not relate to the concrete position, situation and context of readers, participants in newsgroups and their ability to be able to figure out your problems without seeing both HTML and CSS code together and separately.

I
started with XHTML1.0 strict and encoding UTF-8, but later switched the
doc-type to XHTML1.1, for some reason the document did validate, even
before I switched conten from text/html to application/xhtml+xml.


If you are bringing this up, is it because you believe that such has some relationship to the other layout issues and long, complex CSS code you brought so far. Right?

Doing 
that, which I did not know was officially required until today, did not
change appearance in any browser I tested, nor did any of them ask how
to open the page, even when using a link, an action which should at
least have sent Internet Explorer running back to  the hell it came
from, as far as I understood.

Another interesting aspect, something for which I looked in the
guidelines for both CSS and XHTML, with no result, is the positioning
of the scrollbar (on a Hebrew webpage). This actually goes slightly
further than my own webpage and might also be encoding dependent
(although I checked different pages, some encoded in some extension of
ASCII with support for Hebrew, others in UTF-8), what I've noticed is
the following:
Internet Explorer puts the scrollbar on the left-side.
Opera puts the scrollbar on the right-side.
Firefox sometimes puts it to the left (actually my page is the only one
I know of where it is put on the left-side), sometimes to the right.
Where should it be put? Is it possible to force all browsers to put it
on the same side, without  resorting to non-CSS, browser-dependent,
CSS-like extensions and/or javascript?
Note: the same seems, as expected, to hold for Arabic pages.

On yet another note, I discovered that one should delete
font-variant:small-caps for a section to be used with a language
lacking capital letters, Firefox (and Mozilla itself as well) did then
start to display Hebrew text from left to right instead of from right
to left, where it should have ignored the font-variant for reason of
nonexistence. I assume the same bug appears when doing this in other
languages that don't have capital letters, but input would be welcome.

Any help, and light shed unto the above issues is very welcome,

Ernst

Just post an url. Summarize a few (one or 2 for starters) of the problems you have with, as much as possible, useful, helpful, meaningful description. Identify the browser and browser versions which show what you believe to be problems.
Overall, try to be specific, relevant, short and helpful.

Followup-to set: comp.infosystems.www.authoring.stylesheets

Gérard
--
remove blah to email me
.