text overflow scrolling problem when viewed in IE

[monta17]

(Using Dreamweaver CS4)

I have an AP DIV which has a background image. I have put text into the DIV and set the overflow to AUTO in the css.

When I view it in Safari and Firefox and Chrome and Opera, it works fine. However, when viewed in IE, BOTH the text AND the image scroll.

(Also, the navigation I have made with the thumbnail images across the bottom seems to work in all but Chrome... it does something totally weird. I probably have made the whole thing wrong. This is my first Dreamweaver site)

Thanks for any and all help!

http://www.das20studio.com/test3/sutton_street1.html

 

[SrWebDeveloper]

Add "background-attachment:fixed" to the selector for the background image, it's CSS1 and compatible with all browsers.

If you want "Sutton Street Urban Fruit Garden" to be in a fixed position, put it in a div and use "position: fixed" also using left/right/top as you'd do for position relative or absolute ---- but won't work in MSIE 6 or less as this is CSS2. A possiblke workaround (if you care about MSIE 6 or less) is to make it into an image, transparent background, and use the same procedure above, plus z-index: 100 or any value greater than any other z-indexes you might have set.

 

[monta17]

Thank you so much.
However, I must have done something a bit wrong.

I went into the css for the div (the one that has that background image) and in the "background" category I have:
Background-image - (name of the image)
Background-repeat - no repeat
Background-attachment - fixed

For some reason now my image is very small in the div. The box size of the div = 800px width, 400px height. The image is exactly the same size (at 72ppi).

Do you have any idea what has happened?
(this is my very first Dreamweaver site, and to say that I'm floundering is a gross understatement!)

here is a link:
http://www.das20studio.com/test3/sutton_street1.html

 

[monta17]

... to revise my last post...

I've just noticed that the image itself is staying in one position. So if I resize the browser window the image remains in the same place while everthing else moves.
I am using AP DIVs. Which I understand isn't the best thing to do, but I just couldn't figure out how to get the whole page together in any other way.

I'm beginning to think that I had better just start all over. This is so hard when all I'm doing is reading books and watching bits of tutorial videos from here and there (don't have anyone to ask questions). It seems like each one has a different approach.

Sorry for the whining ... just getting very tired and my brain is about to explode!

 

[angelwatt]

Do the background as a single CSS property,

background:url("images/images_sutton_street/1bkgrnd.jpg") no-repeat fixed 260px 170px transparent;

The position has to be modified because you're using the 'top' and 'left' properties on #ss1image as well plus some padding.

 

[monta17]

re:
background:url("images/images_sutton_street/1bkgrnd.jpg") no-repeat fixed 260px 170px transparent;



Do I enter all of this info in the Div css rule within the "Background" category?
And, if so, where do I select "transparent"?

thanks!

 

[angelwatt]

Do I enter all of this info in the Div css rule within the "Background" category?
And, if so, where do I select "transparent"?

I don't use DreamWeaver so not sure what the interface looks like for you, this is just plain CSS.

The pieces though:
background-image: url("images/images_sutton_street/1bkgrnd.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 260px 170px;
background-color: transparent; (optional)