The background images are normal under IE9, but don't work in IE8.
The URL is http://beta.ydfzxy.com, and the default CSS file is http://code.google.com/p/ydfzxy/source/browse/trunk/beta/wp-content/themes/pavo/css/screen/default.css
Can anyone tell me what's wrong and correct it?
background-size is not supported in IE8 and older. You need a javascript solution to make it work in IE8.
I use this method with a <img> positioned behind all content: http://css-tricks.com/perfect-full-page-background-image/
Related
The background-attachment:fixed is working well on Chrome but on safari, it does not work. How can I fix this issue?
for fixing background image please use width and height css element and make sure background-image property use properly.
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
I have a div fix on bottom of the page it is working fine in IE7, IE8, FF and chrome. But in IE6 it is not fixing itself on the bottom how can I fix that.
Suggestions:
use a CSS "reset"
use a CSS framework
use conditional styles (browser dependent) to work around such problems
use JavaScript only as a very last resort
More information:
http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices
See also the three links at the end of the Reset section.
IE6 doesn't support position: fixed natively. There are some workarounds:
http://www.howtocreate.co.uk/fixedPosition.html
http://tagsoup.com/cookbook/css/fixed/
I've got a simple webpage with a centered background image around the main div. The background image renders fine in IE and Firefox, but on Webkit-based browsers (Chrome, Safari), the background image only partially renders when the page is initially loaded. It's almost as if the browser just quits trying to render it. If I resize the browser window, or click on any of the links on the page, the background image shows fully. Here's the site: http://www.jnrtunes.com.
I've tried various CSS hacks, preloading images, etc and nothing seems to fix the problem. Has anyone had similar issues? Is there a problem with my HTML or CSS? I'm a realtive noob to HTML/CSS, so any advice would be appreciated. Thanks!
For some reason, it's the overflow: auto on the #wrapper div that does it. Don't ask me why, but there seems to be your problem.