2 Replies - 6056 Views - Last Post: 25 October 2007 - 11:16 AM

#1 ch4d   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-October 07

CSS scrolling div background problems in IE7

Posted 12 October 2007 - 06:32 AM

@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/.../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 October 2007 - 06:37 AM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS scrolling div background problems in IE7

#2 aceofspades686   User is offline

  • D.I.C Regular
  • member icon

Reputation: 6
  • View blog
  • Posts: 334
  • Joined: 08-October 07

Re: CSS scrolling div background problems in IE7

Posted 15 October 2007 - 02:21 AM

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.

#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!
Was This Post Helpful? 0
  • +
  • -

#3 ch4d   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-October 07

Re: CSS scrolling div background problems in IE7

Posted 25 October 2007 - 11:16 AM

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1