Not scrolling in Explorer?
Permalink
Thanks in advance for any help!
site:http://h2oguy.com/
This seems to work fine in Firefox & Safari, but as a Mac user I never tested it in IE. I have been told twice in the last day that scrolling does not work IE. I suspect my problem lies in this code:
[code]html, body {height: 100%}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
BODY { background: #ffffff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='0099ff') fixed; /* for IE */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#0099ff)) fixed; /* for webkit browsers */
background: -moz-linear-gradient(top, #ffffff, #0099ff 100%) fixed; /* for firefox 3.6+ */
}{/code]
site:http://h2oguy.com/
This seems to work fine in Firefox & Safari, but as a Mac user I never tested it in IE. I have been told twice in the last day that scrolling does not work IE. I suspect my problem lies in this code:
[code]html, body {height: 100%}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
BODY { background: #ffffff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='0099ff') fixed; /* for IE */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#0099ff)) fixed; /* for webkit browsers */
background: -moz-linear-gradient(top, #ffffff, #0099ff 100%) fixed; /* for firefox 3.6+ */
}{/code]
I don't have Internet Explorer around right now, but maybe replace the lower body statement with this.
I tried this in on my practice sitehttp://h2oguy.com /c/ (remove space, just avoiding search engine cataloging)
Now the background scrolls & repeats in Safari and Firefox
Now the background scrolls & repeats in Safari and Firefox
Trident (IE's code parser) is, for some reason, saying that the body is 100% of the view port and nothing more. In IE9, scrolling works, but the gradient is no longer there.
Also, in FF4 I just get a white background. No gradient at all.
You might want to check out how I did this site:http://thecirclegrouptruth.com/...
Notice the background is actually a group of images being scaled by JS. This solved two problems, browser compatibility and not needing additional browser add-ons(like flash).
See attached package for simplified source. Look in the theme's elements folder at the header.php file to change the images. Lines 26 thru 33. To stop the image rotation, comment out line 27 in the main.js file.
I had to remove the images because I don't have the rights to redistribute them. but you can use what ever images you want, including a gradient.
You might also want to look at how I did the dual transparent backgrounds in the content area.
Happy coding!
- IJ
Also, in FF4 I just get a white background. No gradient at all.
You might want to check out how I did this site:http://thecirclegrouptruth.com/...
Notice the background is actually a group of images being scaled by JS. This solved two problems, browser compatibility and not needing additional browser add-ons(like flash).
See attached package for simplified source. Look in the theme's elements folder at the header.php file to change the images. Lines 26 thru 33. To stop the image rotation, comment out line 27 in the main.js file.
I had to remove the images because I don't have the rights to redistribute them. but you can use what ever images you want, including a gradient.
You might also want to look at how I did the dual transparent backgrounds in the content area.
Happy coding!
- IJ
Have you tried wrapping all content in its own div?
Style it as float: left; display: block;
I have noticed that you have meta data in the body.
Style it as float: left; display: block;
I have noticed that you have meta data in the body.
