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.htmlOnly 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