Welcome to Dream.In.Code
Become an Expert!

Join 149,594 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,853 people online right now. Registration is fast and FREE... Join Now!




CSS scrolling div background problems in IE7

 
Reply to this topicStart new topic

CSS scrolling div background problems in IE7

ch4d
12 Oct, 2007 - 05:32 AM
Post #1

New D.I.C Head
*

Joined: 12 Oct, 2007
Posts: 2


My Contributions
CODE

@charset "UTF-8";
/* CSS Document */

html {
margin: 0;
padding: 0px; }

body {
background: #000000;
width: 1000px;
margin: 0px auto;
}

a {
color: #808080;
font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
font-weight: normal;
text-transform: uppercase;
}

a:hover {
color:#E6E6E6
}

div#header {
height: 20px;
margin: 0;
padding: 0;
}

div#nav_left {
float: left;
background: url(images/topgrafupperleft.jpg);
padding: 0;
margin: 0 0 0 100px;
width: 500px;
height: 50px;
}

div#nav_left ul, div#nav_left li {
line-height: 20px;
list-style-type: none;
display: inline;
margin: 0;
padding: 0 1em 0 0;
letter-spacing: 0.1em;
font-weight: bold;
}

div#nav_right {
background: url(images/topgrafupperright.jpg) no-repeat;
padding: 0;
margin: 0 0 0 600px;
width: 300px;
height: 50px;

}

div#nav_right ul, div#nav_right li {
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
word-spacing: 0.3em;
}

#topgraf {
background: url(images/topgraflower.jpg) no-repeat;
width: 800px;
height: 50px;
margin: 0 100px 0 100px;
padding: 0;
}

#leftgraf {
background: url(images/leftgraf.jpg) no-repeat;
margin: -100px 0;
padding: 0;
float: left;
width: 100px;
height: 625px;
}

#content {
position: relative;
background-color: #F0DFB4;
background: url(images/canvas.jpg) no-repeat;
margin: 0;
width: 800px;
height: 400px;
overflow: auto;
float: left;
}

div#content p {
text-align: left;
padding: 0 50px 0 50px;
}

div#content img {
margin: 40px 30px 30px 30px;
}

div#content h3 {
text-align: center;
padding: 30px 0 10px 0;
}

div#content h4 {
padding: 0 50px 0 50px;
}

div#content h2 {
text-align: center;
padding: 5px 0 5px 0;
}

#rightgraf {
background: url(images/rightgraf.jpg) no-repeat;
margin: -100px 0;
padding: 0;
float: right;
width: 100px;
height: 625px;
}

#bottomgraf {
background: url(images/bottomgraf.jpg) no-repeat;
width: 800px;
height: 125px;
margin: -25px 0 0 100px;
padding: 0;
float: left;
}

#footer {
text-align: center;
font-size: 11px;
color: #333333;
float: left;
width: 1000px;
height: 30px;
padding: 0;
margin: 0;
}


Hello, I'm having some problems with the way IE displays a backgroung in a scrolling div. The size of the image is 800 x 400px and it should remain static while text scrolls over it. Everything works fine in Safari, Firefox, Sunrise and Opera.
Here is a very similar problem to the one I have http://www.hixie.ch/tests/adhoc/css/backgr.../block/002.html
Only difference seems to be that I have no-repeat on my background and so in IE it will scroll to black (default background-color)... so I figured I would put a background-color similar to the background picture I have so the text will be readable. But the background remains unchanged (black).
Is this static background possible in IE? And if it's not possible, can I make IE display the div with a background color and dropping out the background image while other browsers see the image ?
The area I'm trying to work on is the #content div

This post has been edited by ch4d: 12 Oct, 2007 - 05:37 AM
User is offlineProfile CardPM
+Quote Post

aceofspades686
RE: CSS Scrolling Div Background Problems In IE7
15 Oct, 2007 - 01:21 AM
Post #2

D.I.C Regular
Group Icon

Joined: 8 Oct, 2007
Posts: 261


Dream Kudos: 100
My Contributions
Well, IE (before version 7) has been known to do very strange things with CSS that works in other browsers so if you plan to start doing this seriously, get used to dealing with quirks in IE.

As for the fixed position background, this should be workable by setting the background-attachment property to "fixed", like so.

CODE

#content {
position: relative;
background-color: #F0DFB4;
background: url(images/canvas.jpg) no-repeat;
background-attachment: fixed;
margin: 0;
width: 800px;
height: 400px;
overflow: auto;
float: left;
}


Hope this helps!
User is offlineProfile CardPM
+Quote Post

ch4d
RE: CSS Scrolling Div Background Problems In IE7
25 Oct, 2007 - 10:16 AM
Post #3

New D.I.C Head
*

Joined: 12 Oct, 2007
Posts: 2


My Contributions
Thanks for the reply, I managed to fix the IE problem with all versions before IE7, the "fixed" would not work for me and would place the background in the wrong place...

I added the background this way <div id="background"><div overflow: auto;> site content </div></div> I'm not sure if this was "correct" css but it worked. Ofcourse not in that way, the actual rules are in a linked css file, just shortly to describe what i did.
Can this be done ? I mean layering divs into each other ? it seems to render the page perfectly in all browsers. The inside div has the overflow so it wont affect the background of the previous div and so the "fixed" is no longer needed.

User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 11:14PM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month