We Keep Coding

Why does the on mouse in even gets triggered when the mouse is not in the button?

I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.

The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:

The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.

Applying a new background color to Jquery's slider handles

I am not sure why I am having such troubles with this. I have browsed Jquery's slider css file and found the class name of the handles. .ui-slider-handle and it even says in the API docs that is the name of it Slider API doc link, but whenever I add background or background-color and give it a color, it does nothing. The same thing for trying to get the handles to cover the entire bar.
I created a demo page on a site I have to show what I am trying to do. Demo page
.ui-slider-handle {
height: 100%;
color: #000;
margin: 0;
}
Also if someone doesn't mind. I am trying to make the words "Budget" appear in the red part (the budgeted range), but when I applied this: <div class="ui-slider-range">Budget</div> into my html, the word Budget shows to the far left of the slider. The html is like this:
<div id="slider-range">
<div class="ui-slider-range">Budget</div>
</div>
.ui-slider-range {
background: red;
text-align: center;
}
How can I add the background-color to the slider handles and add the word "budget", so that it is in the middle of the red area?

To change ui-slide-handler color, try:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: yellow !important;
}
This is the rule to be overwritten.
The original rule is the following:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}

It's very easy to see all the rules that apply to any element in the page using browser dev tools element inspector.
Your rule isn't specific enough based on the existing rules that have higher specificity with selectors like:
.ui-widget-content .ui-state-default
/* and */
.ui-slider-horizontal .ui-slider-handle
A simple way to make more specific for one instance would be to use your ID of main widget in selector
#slider-range .ui-slider-handle
Or for more broad reaching use.... copy the most specific selector and use that. Last rule in page with same selector takes precedence

How to set a tooltip width dynamically?

I want to create a tool-tip that will have flexible size according to the text length. For example, I have the following tool-tip:
Now, for this text, the width is OK (fixed in the css). But, when I have a very smaller string:
the tool-tip looks too big. My question is: how do I make the tool-tip flexible according to the text length? Is there a way to do this in the .css maybe? I work with d3.js, so an answer from this point of view would be acceptable too.
Thank you in advance for your answer!
EDIT: I use this tutorial in order to accomplish my goal, my code is something like that (not exactly, but close enough). It would be best to provide an answer based on that example, since my code is too big to post here.

You can do that with CSS, just use min-width and max-width together instead of width
Also you can simply remove width from your CSS or change it into width: auto;

the css for the tooltops looks like this (according to your link)
div.tooltip {
position: absolute;
text-align: center;
width: 60px; /* Width and Height are fixed */
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
Try removing the width property of the CSS. Above you can see that this is set to a fixed-width of 60 pixels.

This may be best CSS for this. It will adjust its size according to text inside it
div.tooltip{
position: absolute;
white-space: pre-line;
pointer-events: none;
visibility: visible;
background-color:White;
text-align: left;
padding: 5px 0;
display: block;
z-index: 1;
border: 0.5px solid black;
}

Can't adjust label widths. JQuery

I have such a sketch: http://jsfiddle.net/challenger/upcZJ/.
I found an article http://www.jankoatwarpspeed.com/post/2008/07/09/Justify-elements-using-jQuery-and-CSS.aspx which explains how to adjust label widths relative to the widest one.
But I can't do the same. What have I missed? I've tried do the thing inside an accordion tab and inside aside division.
Thanks!

Your label elements are display: inline (the default) so the width property does not apply.
Set display to something else (e.g. inline-block)

You forgot to add the CSS which was mentioned in the article
label, input[type="text"]{
float:left;
display:block;
}
label
{
margin-right: 5px;
}
.field{
width:100%;
overflow:auto;
margin:5px 0px;
}

Iframe Scrollbar css

How do I go about changing the css of an iframe scrollbar?
My problem with the current scrollbar in my iframe is the frame is not very wide and the scrollbar appears bulky in it and takes up too much space.
Using "scrolling="no" makes the scrollbar disappear but then the user cannot scroll.
By the way, My browser is Google Chrome.

This is the css to change the scrollbars in iframes in chrome
body {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
display: none;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 30px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}

You can make it by getting scrollbar element in the frame, for example use jquery:
$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px")
But as others said - it's not a pretty solution.

You can't style a scrollbar (other then to turn it on and off) with CSS at all.
There is some proprietary stuff which lets you apply some styling, but this is supported only by IE and Opera.
Chrome provides no mechanism to do this.
As a commenter points out, WebKit now supports a different proprietary mechanism for styling scrollbars. I've no idea if the Chrome build of WebKit has this merged or enabled though.
You could look at replacing the scrollbar wholesale with JavaScript, and jScrollPane appears to do a reasonable job of not breaking the usual interaction rules.
That said, changing the appearance of user controls is something I'd try to avoid, and making something users need to aim a pointer at smaller sets off the flashing red light marked "Fitts's law".
A better solution would probably be to "Not cram so much information into so little space".