Page is a not externally linkable
jonter - 12:41 pm on Sep 4, 2012 (gmt 0)
[edited by: alt131 at 9:12 pm (utc) on Sep 4, 2012]
Hi all,
While adapting a website for contents written right to left (Arabic, Hebrew, ...) I
indicate this in the html tag by setting dir="rtl". I also change the alignment of the
background image to "background-position: top right" instead of "top left" as in the
English, Spanish, ... versions of the web site.
Oddly enough, this works great in IE while Chrome, Safari, ... fails when the horizontal
scrollbar appears. At this time, the background image starts sliding to the left while
I make the window smaller. If I now scroll all the way to the left I notice that the
background image is aligned to the right of the viewport instead of the document
which is wider than the viewport. I tried adding a "min-width: 900px" to the body
without any luck.
I include simplified html to isolate the problem. In the example, I want the word
"Contents" to always be on top of the blue background as I scroll make the window
smaller.
If I add the background-image to the contents div, I will achieve the desired effect.
However, I want the background-image to reapeat-y all the way to the bottom of the
document, not only the contents div.
Thank you for any hints! Here goes the code:
<html dir="rtl">
<head>
<style type="text/css">
body {
margin: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAACAgMAAABQ2kAmAAA
AAXNSR0IArs4c6QAAAAlQTFRF5ev/9Pb/////KIKAcgAAAAFiS0dEAIgFHUgAAAAJcEhZc
wAACxMAAAsTAQCanBgAAAAHdElNRQfcCQIMFSrrJQqoAAAAFUlEQVQY02PgWjU4wQoGokD
UkHY+ACqhykF2Ey1yAAAAAElFTkSuQmCC);
background-position: top right;
background-repeat: repeat-y;
}
#contents {
width: 900px;
}
</style>
</head>
<body>
<div id="contents">Contents</div>
</body>
</html>
[edit reason] Thread Tidy - Side Scroll [/edit]