How do I lock the scroll bar on, keeping valid HTML5?

I have a site that was originally created in FrontPage some years ago, and I have now redone it using Muse (not before time, I hear you say!)
There were several pages on the site where the content was not large enough to need to be scrolled on most displays, and some browsers removed the scroll bar from the right of the page when those pages were visited. This resulted in a shift to the right on those pages, which made all the fixed elements move on the screen when going between pages, which I found very annoying.
I fixed it by adding this code to the pages in question -
<style type="text/css">
/* Force Right Scrollbar */
html { overflow-y : scroll; }
</style>
This worked fine and locked the scroll bar on, and I wanted to do the same with the Muse version of the site.
I have added the same code using the add HTML feature, and it still works fine.
However, if I run any of the pages concerned through a validator, I get the error -
Validation Output: 1 Error
Line 23, Column 28: Element style is missing required attribute scoped.
<style type="text/css">
I tried to find out why this was, but all I found was a lot of standards documents which were mostly way over my head!
So, is there any modification I can do to that code to get it through the validator, or do I need to look at a different method of locking the scroll bar on on my web pages?
Thanks for any and all suggestions!
Dave.

Thanks very much jgrummel and Vikas.Sharma!
Sorry for the delay in responding.
I have now added "scoped="scoped"" to the code, and the validater (http://validator.w3.org) is now showing just a warning rather than an error.
"Line 23, Column 44: The scoped attribute on the style element is not supported by browsers yet. It would probably be better to wait for implementations.
<style type="text/css" scoped="scoped">"
I'm not too worrid about that, as it is still passing it!
The code is inserted on the master page of my site, so it presumably propagates through to all the pages, including those that don't need it, but this doesn't seem to cause any problem.
The site is here - http://www.thedraculasociety.org.uk

Similar Messages

How can I hide the scroll bar in TextArea?

How can I hide the scroll bar in TextArea?

Hi. To remove the horizontal scrollbar you can do this:
textArea.setWrapText(true);
To remove the vertical scrollbar you can do this:
ScrollBar scrollBarv = (ScrollBar)ta.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true); and set the opacity to 0 in the css file:
//css file
.text-area .scroll-bar:vertical:disabled {
    -fx-opacity: 0;
}Here is an example:
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ContextMenu;
import javafx.scene.control.MenuItem;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.TextArea;
import javafx.scene.input.ContextMenuEvent;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class TextAreaSample extends Application {
    @Override
    public void start(Stage primaryStage) {
    final TextArea textArea = new TextArea();
        textArea.setWrapText(true);
        StackPane root = new StackPane();
        root.getChildren().add(textArea);
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setScene(scene);
        primaryStage.show();
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        ScrollBar scrollBarv = (ScrollBar)textArea.lookup(".scroll-bar:vertical");
        scrollBarv.setDisable(true);
    public static void main(String[] args) {
        launch(args);
}

How do you lock the menu bar so it does not disappear as the cursor is moved around?

How do you lock the menu bar so it does not disappear as the cursor is moved?

No.... you need a different cover

How can we remove the scroll bars from the table?

Hi,
I have a dynamic table. Currently the table appears with the scroll bars. But there is a requirement that the scroll bar should not appear and the table should stretch in the entire page. How can this be achieved.
Thanks in advance
Nita

Thanks Mohammad for the reply.
Was able to remove the scroll bars by using only the styleClass as AFStretchWidth. But there is a default partition in middle of the page still? Can i remove that too by any way.

How do I get the scroll bars in iCloud Numbers Beta to appear?

I have been playing around with Numbers iCloud and have a long spreadsheet. The only way I have figured out to make scroll bars appear is to drag on one of the spreadsheet's borders. They appear, then disappear as soon as I get done scrolling. How can I make them stay visible or make them visible in a more elegant way?

I don't know if you're still working on this, but I finally stumbled onto a solution. I've been having the same problem using iCould Numbers on a PC in Google Chrome. I finally figured out if you 'mouse over' where they're supposed to be, they'll appear. So drag your mouse over near either the edge of that window or where the spreadsheet meets the format panel along the right edge (depends on what you have showing.) The scroll bars will faithfully appear.

How can I retrieve the scroll bar in Home applications using OS 10.6.8? I don't have a general section after clicking on System Preferences. Thanks.

I have deleted the scroll bar twice in 4 years and I still don't know how to set it back. Please help.

hi Samberl
thanks a lot for the fast reply.
I was dragging folders from main folders on the laptop-desktop onto the external drive icon - to copy them across....
Your suggestion sounds very promising - I didn't know about 'cloning'.
Yes the idea is to backup the laptop - I thought I would just move it all now, new - and then keep saving/dragging physically across to the new drive myself each day or two...
Would this be the sizeof the internal hard drive = c.500 gb ? = under the HD icon on desktop is written :
" 499.76gb , 311.5 gb free "
I can erase and start agin on the new external drive - so this plan is to make two partititions, rather than the one at present, and make one of them 500 gb ?
I have found CCC [carbon copy cloner] googling - looks good.
When CCC site says it backs up the hard drive - would this mean all my files [over 100 gb] that are mostly in folders on the desktop, plus the others in itunes, iphotos etc found in the HD icon, would all copy across successfully [wherever they are in the computer ] ?
thanks again, hope you can clarify these things and then I will go for it.
It would be great and amazing if this 'lack of permission' message doesn't show up in the process of doing this ccc transfer - hopeful!
Julie

How can I get the scroll bars to be more visible/contrasting?

The scroll bars are difficult for me to differentiate from their background. Can I change their colour or darkness to make them more visible?

Firefox uses the native scroll bars by default.<br />
You can try to select another window theme in your Linux distribution that has better scroll bar appearance or see if installing a Firefox theme helps.
* https://support.mozilla.org/kb/Using+themes+with+Firefox
*https://addons.mozilla.org/firefox/themes/

How do I get the scroll bar back to the right side of the screen and how do I get the mouse scroll wheel to work again?

Yesterday the scroll bar on Firefox was moved from the right to the left of the screen and the webpages do not scroll when using the mouse scroll wheel.

Reset the pref <b>layout.scrollbar.side</b> to '0' or set to '2' to place the scroll bar at the default right side.
See:
* http://kb.mozillazine.org/layout.scrollbar.side
* http://kb.mozillazine.org/about%3Aconfig
Start Firefox in [[Safe Mode]] to check if one of the add-ons is causing the problem (switch to the DEFAULT theme: Tools > Add-ons > Themes).
* Don't make any changes on the Safe mode start window.
See:
* [[Troubleshooting extensions and themes]]
* [[Troubleshooting plugins]]

How can I get the scroll bar to go to the top or bottom of the page with a right click command?

When I right click on the scroll bar nothing happens. I have to spin the mouse wheel repeatedly to get to the top or bottom of the page. I just switched from explorer. I'm used to being able to do this. It's much less time consuming and frustrating. I hope someone can help. Thanks.

You can hold down the Shift key and left-click the scroll bar to go to that position.
If you set the Boolean pref <b>middlemouse.scrollbarPosition</b> to "<i>true</i>" (default on Linux) on the <b>about:config</b> page then you can middle-click the scroll bar to go to that position.
*http://kb.mozillazine.org/middlemouse.scrollbarPosition
*http://kb.mozillazine.org/ui.scrollToClick

How do I get the scrolling bar to stop popping up when I'm connected to the iTunes Store? It wont allow me to type in the search bar when it pops up.

When I am connected to the iTunes Store a scrolling bar pops up which says "accessing itunes store" even though I'm connected. It pops up every time i try to type a letter in the search bar, not allowing me to type. I can type 1 letter in then it pops up. Very frustrating.

Do you have disk use enabled? If so, disable it.
Check iTunes/edit/preferences. With the iPod connected of course. : )

On a Parallax Scrolling Page, How can I start the scroll bar at the bottom on page load?

Hello,
I'm working on a parallax scrolling animated page in Edge Animate, and it's a timeline of life on Earth. But we wanted to start from the bottom, or "Origin of Life" and then scroll up while our 'tree of life' animates in as the user scrolls up. We definitely know it's not good web etiquette to start at the bottom, but our client is determined. I am more of an animator than a web designer, but I was wondering how one might do this using a bit of code? We are using EC.Parallax.setup(sym); from Edgecommons for the parallax function, which is basically just tying the timeline animations to the scrollbar. I've already got the animations setup to go the right way but we don't want visitors to have to scroll to the bottom first, as they'll then see everything animated in reverse! In my google searches I found something called an Iframe that you can use, and then a flurry of responses on how horrible Iframe is. Thanks for your help, we really appreciate it!

Hi, Vizkid-
You can find the height of the document and then use window.scroll in your initialization function to default your scrollbar to the bottom of the page.
http://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javas cript
Hope that helps,
-Elaine

How can i get the footer bar to stay, whilst page scrolls?

how can i get the footer bar to stay, whilst page scrolls?
at the moment, on my site, if the page is longer than the screen, it goes behind the footer,
but the foot bar moves up the page as yo scroll down to see the rest of the content.
any way of getting the footer to stay put, while body/page contant scrolls ?
thanks

You can use some css to do it...
#footer_id {
position:fixed;
bottom:0px;
<div id="footer_id">Your footer content</div>
The css above will lock your footer to the bottome of the browser window. As long as your footer <div> is last in your html, it will float over the top of everything on your page when the page is scrolled. If it's not last in the html, you'll need to add a z-index to get it on top of your other content in the stack.

I would like to know it it's possible to change the scroll bar from the right part of the firefox browser, to the left part and, if it's possible, how can it be done. Thank you!

The scroll bar (the one used to scroll up and down any kind of website), that is normally in the right part of the firefox browser, would be of much help to me if it could sometimes be moved to the left part of the browser. Is this possible? How can it be done? Can anybody tell me the exact steps to take in order to do this (if it is possible of course)? This would be helpfull to me, since I think that the firefox scroll bar is overlaping the scroll part of the facebook chat sidebar, since I just can see a few people on this facebook chat sidebar and I can´t scroll along it, as I could a while ago. So my guess is that the firefox scroll bar is covering the other. In order to solve it in a simpler way, I guessed that if the firefox scroll bar could be moved to the left side of the browser, this problem could be solved. So, can anybody help me?

http://kb.mozillazine.org/layout.scrollbar.side
Type '''about:config''' in Location (address) bar
filter for '''layout.scrollbar.side'''
Right-click the Preference and Modify it to '''3'''
You may need to reload any pages open to have scrollbar move to left after Preference change.

How do I keep the scroll bar from disappearing in the Mountain Lion update 10.8.5?

When I got the prompt yesterday that there was an update for Mountain Lion I went ahead and downloaded it, and it is awful! The scroll bar on the right side of the screen disappears too quickly now to use it easily, and is difficlut to get back, which adds extra steps (clicking on the down arrow while the cursor is in the scroll area then quickly clicking the arrow cursor while it is in the temporary scroll down bar. Or else this is from a Firefox update I did NOT actually download, but indications when I started up my computer today are that it did download somehow by itself without my permission, as there was a notice that some of my Mozilla ad-ons might not be compatible with this version of Firefox. I couldn't understand that since it should have been the same version of Firefox I used yesterday! I know I didn't download the new Firefox because the pop-up box went away very quickly each time it came up so I never did click on it. Does anyone know if the change in scrolling is a Firefox update or the OSX 10.8.5 update? I HATE it and want it off, but don't know which one is the culprit nor how Firefox updated itself without my consent. Aaaarrrggghhh!

System Preferences > General > Show scroll bars:
Make sure that "Always" is selected.
Best.

All web pages appear with a blinking cursor like in a "word document". i can't scroll down or up using the buttons of my key board. i have to pull down the scroll bar. something in settings has changed. how to correct it??

all web pages appear with a blinking cursor like in a "word document". i can't scroll down or up using the buttons of my key board. i have to pull down the scroll bar. something in settings has changed. how to correct it??
== This happened ==
Just once or twice
== 2 days ago.

See also this article about caret browsing: http://kb.mozillazine.org/Scrolling_with_arrow_keys_no_longer_works
In Firefox 3.6 and later versions you can disable the F7 shortcut that toggles caret browsing by setting the pref accessibility.browsewithcaret_shortcut.enabled to false.
To open the ''about:config'' page, type '''about:config''' in the location (address) bar and press the Enter key, just like you type the url of a website to open a website.
If you see a warning then you can confirm that you want to access that page.

How do I lock the scroll bar on, keeping valid HTML5?

Similar Messages

Maybe you are looking for