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; 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%;posi tion:absolute;left:10%;top:15%;overflow:auto;paddi ng:0;margin:0;}
#copyright{background-color:transparent;color:gray;position:absolute;hei ght: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;heig ht: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;heig ht:5%;width:80%;margin:0;padding:0;left:10%;top:10 %;overflow:visible;}
#left{background-color:transparent;color:red;position:absolute;heig ht:90%;width:10%;margin:0;padding:0;top:10%;left:0 ;}
#right{background-color:transparent;color:red;position:absolute;heig ht:90%;width:10%;margin:0;padding:0;top:10%;left:9 0%;}
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;}
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:
#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%;p osition:absolute;left:10%;top:15%;overflow:auto;pa dding: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)
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:a uto;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
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. 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
2  3790 
Ernst Elzas wrote: If these questions have been asked numerous times before, please excuse
me, I have not managed to find the information I needed.
Your question seems to revolve around styling, not HTML. Hence it
belongs to the stylesheets group, and I set followups there. Therefore
I'm exceptionally quoting your entire message (though piecewise).
Your message contains several questions. All of them don't fit under
your Subject line, and you should actually have posted essentially
separate questions as separate messages.
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)
You should have posted the URL.
I repeat, you should have posted the URL. You cannot have read the
comp.infosystems.www.authoring groups much, if you have missed this
principle.
You should have posted the URL of your HTML document, letting us find
the markup as well as the stylesheet.
html,body {background-color: #000008; color:red; height: 100%;
width:100%; position:relative; margin: 0; padding:
0;font-family:serif;overflow:auto;}
Are you serious? All text in red?
#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%;posi tion:absolute;left:10%;top:15%;overflow:auto;paddi ng:0;margin:0;}
#copyright{background-color:transparent;color:gray;position:absolute;hei ght: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;heig ht: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;heig ht:5%;width:80%;margin:0;padding:0;left:10%;top:10 %;overflow:visible;}
#left{background-color:transparent;color:red;position:absolute;heig ht:90%;width:10%;margin:0;padding:0;top:10%;left:0 ;}
#right{background-color:transparent;color:red;position:absolute;heig ht:90%;width:10%;margin:0;padding:0;top:10%;left:9 0%;}
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;}
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:
#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%;p osition:absolute;left:10%;top:15%;overflow:auto;pa dding:0;margin:0;}
Sounds excessively complex, and position: fixed is often a mistake,
because IE does not support it. Besides, you haven't revealed is the
_markup_.
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)
It's impossible to see what scrollbars you are talking about. Window or
element scrollbars?
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),
Sounds pointless. You should not worry about the greyed-out scrollbar
(on some browsers) before your pages are almost perfect, and you
probably have much more serious issues.
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.
That might be somewhat surprising, but is it a problem? To whom?
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.
I still have no way of _seeing_ what you are talking about.
The css for the list (English version):
ul.bullet{display:table-row-group;width:100%;position:absolute;left:auto;top:a uto;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;}
Did I mention that we need the URL?
Has anyone got any idea to get around the above mentioned problems?
The problems haven't been identified yet.
I started with XHTML1.0 strict
Pointless. The web is not ready for XHTML 1.0, or the XHTML 1.0 is not
suitable for the web. (Just two formulations so that you can pick up the
one that offends you less.)
and encoding UTF-8,
Probably a good idea for the Hebrew version, and if your English version
has a link to the Hebrew version with the link name in Hebrew (as it
should), you might as well use UTF-8 for the English version too.
but later switched the
doc-type to XHTML1.1,
Even more pointless. XHTML 1.1 is an exercise in futility.
for some reason the document did validate, even
before I switched conten from text/html to application/xhtml+xml.
Which means that the page does not work at all on IE.
To see why it does not validate, we would need the URL.
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.
That sounds like a complex way of saying "XHTML 1.1 does not work on the
WWW".
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).
How would that be an _HTML_ matter?
It's not an CSS matter either, really, because CSS has no tools for
specifying where a scroll bar should appear.
In practice, setting the writing direction to "rtl" (right to left)
tends to put the scroll bar on the left, which is rather natural, but
still just a browser feature.
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
No.
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.
I'm surprised at the implicit thought here: you seem to think that such
things could and should be controlled in HTML.
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.
We would need the URL of a demo in order to estimate whether you have
found a bug (and what sort of bug) or just made a mistake in authoring.
On the other hand, it is often mentioned when discussing HTML authoring
in Hebrew and Arabic that you should use <html dir="rtl"> even though
this is often not needed by the specifications. Browsers should apply
the intrinsic directionality of characters, but they often fail to do
this, so dir="rtl" is a good idea. Since you did not post a URL, we
cannot see whether you had actually used that attribute, in which you
might need some other workaround.
On the other hand, font-variant: small-caps is of questionable value for
several reasons. In particular, browsers do not usually use genuine
small caps letters but reduced-size capital letters, which is a
typographically poor idea.
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%;posi tion:absolute;left:10%;top:15%;overflow:auto;paddi ng:0;margin:0;}
#copyright{background-color:transparent;color:gray;position:absolute;hei ght: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;heig ht: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;heig ht:5%;width:80%;margin:0;padding:0;left:10%;top:10 %;overflow:visible;}
#left{background-color:transparent;color:red;position:absolute;heig ht:90%;width:10%;margin:0;padding:0;top:10%;left:0 ;}
#right{background-color:transparent;color:red;position:absolute;heig ht:90%;width:10%;margin:0;padding:0;top:10%;left:9 0%;}
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%;p osition:absolute;left:10%;top:15%;overflow:auto;pa dding: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:a uto;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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Konrad Koller |
last post by:
For a card playing game I constructed a layout of 49 playing cards
(size of each: x=71, y=96) which are arranged in a 7X7 matrix side by
side. Accordingly the pysical size of the Canvas is x=71*7,...
|
by: adrien |
last post by:
Hi,
(also posted in netscape.public.mozilla.browser)
i use netscape 7 and want to hide the scrollbars of the window when
something happens. I tried this:
window.scrollbars.visible=false...
|
by: Nobody |
last post by:
Okay, you are all so smart in here. Answer me this:
IE6 in standards mode doesn't seem to hide scrollbars on the body element
(overflow:hide) Ain't this a quandary. I have it in my head that I...
|
by: Dennis M. Marks |
last post by:
My script opens a window that is supposed to be resizable and
scrollable. I am on a Mac. With IE 5.1.7 it works fine. With Netscape 6
there is no scroll bar. I am able to resize it smaller than the...
|
by: Jorg Matter |
last post by:
Hello
I should like to define the colors of the scrollbars for divs with overflows
set to auto. I have a design with black background and white text. Now the
scrollbars do not look very nice and...
|
by: Andi Plotsky |
last post by:
I have a subform where I dynamically change the SourceObject dependent upon
the User's response to questions on the Main form.
My problem is that the scrollbars do not show up on either the Main...
|
by: Fabrício de Novaes Kucinskis |
last post by:
Hi all,
I have to problems concerning datagrids, tabcontrols and scrollbars:
1) I created a form with a TabControl. This TabControl has two TabPages: the
first with a datagrid to browse...
|
by: needin4mation |
last post by:
Does anyone know what would cause a popup with scrollbars=1 to suddenly
lose its scrollbars? I have a popup from window.open
(....scrollbars=1..) and it used to be a normal window that would have...
|
by: Victor |
last post by:
Hi I have a very strange problem for my page. I have writen a js to make
sure my table's height is 100% for the browser's viewport. my code is just
the following. This works fine for firefox and...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
