Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Thread Tools Display Modes
  #1 (permalink)  
Old June 7th, 2007, 05:07 PM
Registered User
Join Date: Jun 2007
Location: Orlando, FL, USA.
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default Help need fixed background on a scrollable div


I've been searching the net all day and I apologize for any repeat posts but I'm in a deadline situation and there's one nagging problem...

I'm making site with a mix of css/html/java/php

On one page one of the divs (content-main) I want to have scrollable text with the background to that div fixed. It works in Firefox (overflow set to auto) but for IE it makes the background scroll too.

I tried using:

position-attachment: fixed;
That works for IE... But that messes up in Firefox making the background of that div fix onto the top of the whole page! I tried setting the background position to the center but it still doesn't line up.

So I worked on it and finally resorted to having alternate css files for IE and Netscape (detected through a java script in the head).

So there everything solved UNTIL I realized while it worked in my IE6 (I can't upgrade because my windows software won't validate, and I'm at an office who's so backed up they can't solve the problem) it didn't work in IE7..... in IE7 it was doing what Firefox did before, with making the background image attach to the top of the page.

Here is my css for div in IE:
#content-main {
    overflow: auto;
    background-image: url(images/body.jpg);
    background-repeat: no-repeat;
The website is: www.bcswf.com/test2/job.php

Please help! I'm tearing my hair out and google is not helping me brainstorm this.

So basically works in IE6... not in IE7. Firefox is in its own css and works as far as I know.

- Sheila
Reply With Quote
  #2 (permalink)  
Old June 17th, 2007, 11:31 AM
Authorized User
Join Date: Jun 2007
Location: Tehran, Tehran, Iran.
Posts: 39
Thanks: 0
Thanked 0 Times in 0 Posts

You can still use alternate url approach. Set your css base on browser type AND browser version (window.navigator.appVersion). If this property contains string "MSIE 6.0", means your client's browser is IE6, while IE7 introduces itself as MSIE 7.0 .

For example running this statement in my browser (Maxthon with IE6 engine) will returns me :

"4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon; FDM; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.2)"
Reply With Quote
  #3 (permalink)  
Old June 18th, 2007, 09:17 AM
Registered User
Join Date: Jun 2007
Location: Orlando, FL, USA.
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts

a thank you!

I'll have to keep that in mind in the future. I ended up cleaning it up and using iframes (grown) to make it compatible with everything.

the end result: www.bcswf.com

thanks to those who left advice!
Reply With Quote
  #4 (permalink)  
Old June 20th, 2007, 03:15 PM
Registered User
Join Date: Jun 2007
Location: Harrogate, , United Kingdom.
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts

OK, now heres another problem that is related to this... I fixed the IE6, ie7 and firefox problems with this by using some css that ie6 and below doesn't bother with to over right the problem. Now I have a problem where ie6 works correctly, FF works correctly, but IE7 presents another issue!

the problem is that in FF WITH the fixed background it goes from the absolute of the window. If its in its default (ie scroll) then it aligns with the element (in my case a form element) when text is entered the background image stays in place. Now.. IE7 has all the same attributes but when text overflows the textbox, the background scrolls off to the left.

to see for yourself then feel free http://www.diamondukpromotions.co.uk...uiry/GECF.html

Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Pure CSS Scrollable Table with Fixed Header rupen CSS Cascading Style Sheets 4 June 4th, 2007 09:30 PM
center text (only) in fixed size div, how to do it beetle_jaipur BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 April 16th, 2007 02:38 PM
Background Image problem in DIV tag. cumminsj CSS Cascading Style Sheets 6 September 15th, 2006 04:02 AM
background image for <div> anshul CSS Cascading Style Sheets 4 May 16th, 2005 12:00 PM
line-height -n- background-color with <DIV> block anshul HTML Code Clinic 11 September 5th, 2004 03:15 PM

All times are GMT -4. The time now is 03:04 AM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.