January 17, 201115 yr Hi All, I really hoping someone can help me? I'm using a fixed height DIV with it in mind that I can add as much content as I like without moving the base navigation. There is a background image that is meant to stay in place, which is working correctly in all browsers apart from Internet Explorer 6 or earlier (which is scrolling with the foreground). Is there an 'if' option that I can add to overcome this problem? Code is below. Any help would be greatly appreciated. <div id="wide" style="background-image:url('images/testimonials_bg.jpg'); background-attachment: inherit; background-position:top; background-repeat:no-repeat;"> #wide {height:365px; width:580px; padding-left:40px; padding-right:310px; padding-top:30px; margin-right:10px; margin-left:10px; margin-top:10px; border:solid; border-color:#fff; border-width:thin; text-align:left; overflow-y: auto; overflow-x: hidden; scrollbar-3d-light-color:#dbdbe5; scrollbar-arrow-color:#9495a2; scrollbar-base-color:#cdcedc; scrollbar-dark-shadow-color:#000000; scrollbar-face-color:#cdcedc; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#e7e7e7; }
January 17, 201115 yr Try background-attachment: fixed; instead of inherit (I never trust inherit because I'm never sure what it will inhereit). background-attachment: fixed; is the code to stop a background-image scrolling.
January 18, 201115 yr Author Try background-attachment: fixed; instead of inherit (I never trust inherit because I'm never sure what it will inhereit). background-attachment: fixed; is the code to stop a background-image scrolling. Thank you very much. This seems to have cured it.
January 19, 201115 yr Author Try background-attachment: fixed; instead of inherit (I never trust inherit because I'm never sure what it will inhereit). background-attachment: fixed; is the code to stop a background-image scrolling. I have made the suggested changes to the site, and it has cured the problem. It has however thrown up a new issue, which I'm not sure it's possible to get around. I need the background to stay static when scrolling within the DIV, but when the page scrolls down it needs to move with the page. If anyone can help with this I would be eternally grateful! The site can be seen here Many thanks
January 19, 201115 yr I can see that the about-us_bg.jpg background-image is fixed when you scroll the div but when you scroll the whole page it is fixed while the table moves up which looks odd. It stays fixed all the time if you just delete background-postion: fixed; in Firefox but IE7 did not work, so I had to put the background-image in the td cell instead of the div and change some heights and add extar table rows:- ...........<tr> <td height="112" align="center" valign="middle"><a href="index.html"><img src="images/vincents-shopfitters_logo.gif" width="203" height="50" border="0" alt="Vincents" /></a></td> </tr> <tr> <td height="395" background="images/vincents-bg.gif" align="center" style="background-image:url('images/about-us_bg.jpg'); /*background-attachment: fixed;*/ background-position:top center; background-repeat:no-repeat;"> <!--was 486 high--> <div id="about-us"> <h1>About Vincents </h1> <br /> <p> <span class="subheaders">Turning your ideas into reality </span><br /> As one of the UK’s leading shopfitting companies, Vincents Shopfitters have an enviable reputation for craftsmanship and excellence, with great attention to detail. With over 30 years experience in the shopfitting industry, we have developed the extensive skills required to undertake projects for both major household names and smaller clients that not only address their needs, but the needs of their customers. Our client list includes some of the largest names on the UK High Street and is growing each day. Please visit our <a href="vincents-shopfitting-gallery.html">gallery</a> to view a small selection of our completed shopfitting projects.<br /> <br /> But we are not just a shopfitting company. Our reputation for the highest quality fit outs, superb bespoke joinery and the ability to take on one-off specialist designs, has seen us work on a number of interesting recent projects. These include the refitting of Michelin star chef Atul Kochhar’s <a href="benares-restaurant.html">Benares Restaurant</a> in London and the manufacture of joinery for the new multi-million pound Hostry at <a href="norwich-cathedral.html">Norwich Cathedral</a>, which has been shortlisted for a number of prestigious awards.<br /> <br /> <span class="subheaders">First class design</span><br /> No job is too big or too small for our in house design team. We have extensive CAD facilities and the team is able to provide distinctive design solutions to your brief. A wealth of experience in a wide range of projects ensures that no details will be overlooked and continued investment in the latest manufacturing technology, combined with investment training, ensures a unique mix of traditional craftsmanship and hi-tech automation.<br /> <br /> <span class="subheaders">Hassle free project management</span><br/> You can trust us to deliver your project on time and to budget. Our highly skilled, on-site operatives provide efficient and reliable service with the least amount of disruption throughout, and will communicate with you every step of the way. <br /> <br /> <span class="subheaders">Superb after care</span><br /> Even when your project is complete we will continue to provide an excellent post-installation support service. Make sure you contact Vincents first for your interior fit out or bespoke joinery requirements.</p> </div> </td> </tr><tr> <td> <img src="images/vincents-shopfitters_09.jpg"............... CSS stylesheet #about-us {height:365px; width:300px; padding-left:40px; padding-right:590px; padding-top:30px; margin-right:10px; margin-left:10px; /*margin-top:10px; deleted*/ border:solid; border-color:#fff; border-width:thin; text-align:left; overflow-y: auto; overflow-x: hidden; scrollbar-3d-light-color:#dbdbe5; scrollbar-arrow-color:#9495a2; scrollbar-base-color:#cdcedc; scrollbar-dark-shadow-color:#000000; scrollbar-face-color:#cdcedc; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#e7e7e7; } I haven't tested with all your images but it's OK in Firefox and IE7 with about-us_bg.jpg so I hope that's OK Edited January 19, 201115 yr by Wickham
January 19, 201115 yr Author Thanks for you help again. This works in IE7, Firefox and Chrome but doesn't work in IE6 (which unfortunately is what my client is testing the site in!). Are there any other alternatives?
January 19, 201115 yr Are there any other alternatives? Try what i have started doing... charge extra for IE6 support! The amount of extra time spent coding hacks and surplus work in to sites just for IE6 was becoming ridiculous and definitely wasn't financially viable so i stuck an extra charge on top of regular builds. Be sure to explain openly and honestly to your clients why though. Sorry i couldn't help with your issue though, just a little tip
January 21, 201115 yr Author I don't suppose anyone has any ideas of getting around this do they? Maybe an 'if' option for IE6? I've got to present this early next week and am tearing my hair out! Any help/advice would be greatly appreciated.
January 22, 201115 yr you could just align it to the top of the div and if it scrolls in ie6 then so what? the text is still readable, the site still functions, ie6 users are probably used to seeing those kind of things anyway. one other suggestion in the copy on the front page you have "Our reputation for the highest quality fit outs, superb bespoke joinery and the ability to take on one-off specialist designs, has seen us work on a number of interesting recent projects." might sound smoother as "Our reputation for the highest quality fit outs, superb bespoke joinery and the ability to undertake one-off specialist designs, has seen us work on a number of interesting recent projects." oh yeah, don't foget your favicon Edited January 22, 201115 yr by dap
January 22, 201115 yr Is the problem the background is scrolling with text? if so wrap the text in a div <div id="about-us" style="background-image:url('http://www.nuimagedesign.co.uk/vincents/images/about-us_bg.jpg'); background-position:center; background-repeat:no-repeat;"> <div class="scrolltext"><!--added scrolltext div--> <h1>About Vincents </h1> <br /> <p> <span class="subheaders">Turning your ideas into reality </span><br /> As one of the UKs leading shopfitting companies, Vincents Shopfitters have an enviable reputation for craftsmanship and excellence, with great attention to detail. With over 30 years experience in the shopfitting industry, we have developed the extensive skills required to undertake projects for both major household names and smaller clients that not only address their needs, but the needs of their customers. Our client list includes some of the largest names on the UK High Street and is growing each day. Please visit our <a href="vincents-shopfitting-gallery.html">gallery</a> to view a small selection of our completed shopfitting projects.<br /> <br /> But we are not just a shopfitting company. Our reputation for the highest quality fit outs, superb bespoke joinery and the ability to take on one-off specialist designs, has seen us work on a number of interesting recent projects. These include the refitting of Michelin star chef Atul Kochhars <a href="benares-restaurant.html">Benares Restaurant</a> in London and the manufacture of joinery for the new multi-million pound Hostry at <a href="norwich-cathedral.html">Norwich Cathedral</a>, which has been shortlisted for a number of prestigious awards.<br /> <br /> <span class="subheaders">First class design</span><br /> No job is too big or too small for our in house design team. We have extensive CAD facilities and the team is able to provide distinctive design solutions to your brief. A wealth of experience in a wide range of projects ensures that no details will be overlooked and continued investment in the latest manufacturing technology, combined with investment training, ensures a unique mix of traditional craftsmanship and hi-tech automation.<br /> <br /> <span class="subheaders">Hassle free project management</span><br /> You can trust us to deliver your project on time and to budget. Our highly skilled, on-site operatives provide efficient and reliable service with the least amount of disruption throughout, and will communicate with you every step of the way. <br /> <br /> <span class="subheaders">Superb after care</span><br /> Even when your project is complete we will continue to provide an excellent post-installation support service. Make sure you contact Vincents first for your interior fit out or bespoke joinery requirements.</p> </div><!--close scrolltext--> </div> rename in you css #about-us to .scrolltext and increase padding-right to 600px I think that should work I've put an example up linky so you can check it in ie6 Edited January 22, 201115 yr by mteam
January 25, 201115 yr Author Is the problem the background is scrolling with text? if so wrap the text in a div <div id="about-us" style="background-image:url('http://www.nuimagedesign.co.uk/vincents/images/about-us_bg.jpg'); background-position:center; background-repeat:no-repeat;"> <div class="scrolltext"><!--added scrolltext div--> <h1>About Vincents </h1> <br /> <p> <span class="subheaders">Turning your ideas into reality </span><br /> As one of the UK’s leading shopfitting companies, Vincents Shopfitters have an enviable reputation for craftsmanship and excellence, with great attention to detail. With over 30 years experience in the shopfitting industry, we have developed the extensive skills required to undertake projects for both major household names and smaller clients that not only address their needs, but the needs of their customers. Our client list includes some of the largest names on the UK High Street and is growing each day. Please visit our <a href="vincents-shopfitting-gallery.html">gallery</a> to view a small selection of our completed shopfitting projects.<br /> <br /> But we are not just a shopfitting company. Our reputation for the highest quality fit outs, superb bespoke joinery and the ability to take on one-off specialist designs, has seen us work on a number of interesting recent projects. These include the refitting of Michelin star chef Atul Kochhar’s <a href="benares-restaurant.html">Benares Restaurant</a> in London and the manufacture of joinery for the new multi-million pound Hostry at <a href="norwich-cathedral.html">Norwich Cathedral</a>, which has been shortlisted for a number of prestigious awards.<br /> <br /> <span class="subheaders">First class design</span><br /> No job is too big or too small for our in house design team. We have extensive CAD facilities and the team is able to provide distinctive design solutions to your brief. A wealth of experience in a wide range of projects ensures that no details will be overlooked and continued investment in the latest manufacturing technology, combined with investment training, ensures a unique mix of traditional craftsmanship and hi-tech automation.<br /> <br /> <span class="subheaders">Hassle free project management</span><br /> You can trust us to deliver your project on time and to budget. Our highly skilled, on-site operatives provide efficient and reliable service with the least amount of disruption throughout, and will communicate with you every step of the way. <br /> <br /> <span class="subheaders">Superb after care</span><br /> Even when your project is complete we will continue to provide an excellent post-installation support service. Make sure you contact Vincents first for your interior fit out or bespoke joinery requirements.</p> </div><!--close scrolltext--> </div> rename in you css #about-us to .scrolltext and increase padding-right to 600px I think that should work I've put an example up linky so you can check it in ie6 You're a genius. Thank you so much for your help.
Create an account or sign in to comment