background or background-color? Which one is safe to use?
I just now found that when I try to change background-color using YUI for a body it doesn't work in FF5 and Opera but works in IE and Chrome. However, if I set color values for background it works in FF as well as Opera. I thought that background-color was just some sort of specialisation for background. Which one can be used safely across all browsers? Code in question can be seen here, background or background-color? Which one is safe to use?, I still have problem understanding how YUI handles events. I have also hosted the page with modified code here http://www.kumarchetan.com/yui-module.html, try accessing this page using IE, Chrome, FF and Opera and notice how smoothly the values change in different browser开发者_StackOverflow社区s.
This is because the YUI CSS reset sets the background property on the html element rather than body, so if you want to specify a different page background color, do it for html. It isn't related to any compatibility issues between background-color and the shorthand background whatsoever, as both properties are fully supported (the CSS1 version, anyway) in all browsers.
EDIT: oh you mean you were using YUI's JavaScript APIs... in that case, it's a discrepancy with the DOM style properties. Indeed, you have to use camelCase notation for cross-browser compatibility (this doesn't just apply to YUI, but the DOM in general). IE and Chrome just happen to support hyphenated property names too.
To fix your problem, add this CSS:
html, body {
margin: 0;
padding: 0;
height: 100%
}
The html and body do not take up 100% height, which is what you need to handle mousemove events. The background for the root element is handled specially, but that's not the same as having 100% height.
The reason for the inconsistent behaviour between browsers is possibly to do with @BoltClock's edit, and also probably to do with the fact that your page is using Quirks Mode, because you don't have a doctype. Add this as the very first line:
<!DOCTYPE html>
There's no real difference between the two unless you're setting an image and a colour. If you're only setting one thing then you might as well just use background.
They both can be used safely across all browsers.
background can set all it's sub-attributes, such as background-color, background-image, background-position etc.
So instead of setting
background-color: #fff; /* white */
background-image: url(path/to/image.png);
background-repeat: repeat; /* or repeat-x, repeat-y, none */
background-position: top center; /* other options include bottom, right, left, along with pixel values and percentages*/
background-attachment: scroll; /* or fixed */
you can write
background: #fff url(path/to/image.png) top center fixed;
+1 to BoltClock's answer, since that's probably the right one in this case, however I have actually had a similar situation with a different solution recently, so I thought I'd share.
In my case, the element in question had a gradient background:
background: -moz-linear-gradient(top, #c2c2c2, #ffffff);
Setting the background-color had no effect on this element, since the gradient took precedence over the color. I had to use background to override it.
加载中,请稍侯......
精彩评论