IE7 & Firefox 3 not displaying CSS background properly, but IE6 is.

[herrjosua]

Hello,

I am having an issue where I have a div that is a set height and width and on some page there is more content that the height would allow. So I enabled the overflow on that div, but when I did that my background image would scroll with the scroll bar, which I do not want to happen. So within that div I added the code that prevents no repeating and fixing the image to the starting position. I tested in IE6 and it worked, but when I tested on IE7 and Firefox 3 my background image does not appear. How would I go able fixing this? I have bold the code where is the issue is for ease.

Thanks in Advance

Josh

CSS

body{
margin:5px;
padding:5px;
background-color:#E8E8E8;
font-family: Arial, Helvetica, sans-serif;
font-size:8pt;
}

#container{
width:800px;
height:600px;
margin-left: auto;
margin-right: auto;
}

#header{
width:800px;
height:89px;
float:left;
background-image:url(../Images/Backgrounds/Header.gif);
/*background-color:#0000FF;*/
}

#contentMain{
width:800px;
height:425px;
float:left;
overflow:hidden;
background-image:url(../Images/Backgrounds/Full_Content.gif);
}

#contenttitle{
width:800px;
height:25px;
float:left;
background-image:url(../Images/Backgrounds/3d_Content_Title.gif);
/*background-color:#990000;*/
}

#contentsubcontainer{
width:800px;
height:400px;
float:left;
}

#contentmainmenu{
width:159px;
height:400px;
float:left;
background-image:url(../Images/Backgrounds/3d_Works_Mainmenu.gif);
/*background-color:#66CC99;*/
}

#content{
width:499px;
height:400px;
float:left;
background-image:url(../Images/Backgrounds/3d_Works_Content.gif);
/*background-color:#3333CC;*/
}

#contentsubmenunonscroll{
width:142px;
height:400px;
float:left;
background-image:url(../Images/Backgrounds/3d_Works_Submenu.gif);
/*background-color:#9933FF;*/
}

#contentsubmenuscroll{
width:142px;
height:400px;
float:left;
overflow:scroll;
background-image:url(../Images/Backgrounds/3d_Works_Submenu.gif);
background-repeat: no-repeat;
background-attachment: fixed;
/*background-color:#FF3399;*/
}

#footersubcontainer{
width:800px;
height:86px;
float:left;
}

#footerlogo{
width:159px;
height:86px;
float:left;
background-image:url(../Images/Backgrounds/Logo.gif);
/*background-color:#FFFF00;*/
}

#footernav{
width:641px;
height:86px;
float:right;
background-image:url(../Images/Backgrounds/Nav.gif);
/*background-color:#663366;*/
}

.Worksthumbnail img{
width:216px;
height:144px;
}

.Worksthumbnail{
text-decoration:none;
float:left;
display: inline;
margin: 10px 19px 10px 19px;
}

.Worksthumbnail span{
display: block;
text-align: center;
}

.mediumthumbnail img{
padding:20px;
width:450px;
height:337px;
}

.smallthumbnail img{
width:79px;
height:59px;
}

.smallthumbnail{
text-decoration:none;
margin: 2px 20px 2px 20px;
}

.smallthumbnail span{
display:block;
margin-left:21px;
}

a:link {
color: #801422;
text-decoration: none;
}
a:visited {
color: #801422;
text-decoration: none;
}
a:hover {
color:#d02239;
text-decoration: none;
}
a:active {
color: #801422;
text-decoration: none;
}

h1{
font-size: 150%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
border-bottom: #000000 1px solid;
}

#nav{
margin:0;
padding:0;
}

#navlist
{
padding: 1px;
margin-left: 0;
list-style:none;
}

ul#textnav {
list-style: none;
}

#footernav li{
display:inline;
padding: 10px;
}

ul#nav a img {
height:30px;
width:133px;
border-width:0;
}

ul#nav_splash a img {
height:38px;
width:146px;
border-width:0;
}

*html a img {
height:30px;
width:133px;
border-width:0;
}

ul#nav a#DemoReel img {background-image: url(../Images/Nav/dr_nav_normal.gif);}
ul#nav a#Works img {background-image: url(../Images/Nav/3d_nav_normal.gif);}
ul#nav a#Resume img {background-image: url(../Images/Nav/resu_nav_normal.gif);}
ul#nav a#LinkedIn img {background-image: url(../Images/Nav/linked_nav_normal.gif);}

ul#nav a#DemoReel:hover img {background-image: url(../Images/Nav/dr_nav_over.gif);}
ul#nav a#Works:hover img {background-image: url(../Images/Nav/3d_nav_over.gif);}
ul#nav a#Resume:hover img {background-image: url(../Images/Nav/resu_nav_over.gif);}
ul#nav a#LinkedIn:hover img {background-image: url(../Images/Nav/linked_nav_over.gif);}

ul#nav a.currentDemoReel img {background-image: url(../Images/Nav/dr_nav_over.gif);}
ul#nav a.currentWorks img {background-image: url(../Images/Nav/3d_nav_over.gif);}
ul#nav a.currentResume img {background-image: url(../Images/Nav/resu_nav_over.gif);}
ul#nav a.currentLinkedIn img {background-image: url(../Images/Nav/linked_nav_over.gif);}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joshua Bock's Portfolio</title>

<!-- CSS -->

<link href="CSS/screen.css" rel="stylesheet" type="text/css" media="screen" />

<link href="CSS/slimbox.css" rel="stylesheet" type="text/css" media="screen" />

<!-- Javascripts -->

<script type="text/javascript" src="Scripts/mootools.js"></script>

<script type="text/javascript" src="Scripts/slimbox.js"></script>

<script type="text/javascript" src="Scripts/imagerollover.js"></script>

<script type="text/javascript" src="Scripts/imageswap.js"></script>

<script type="text/javascript" src="Scripts/imageswapper.js"></script>

</head>

<body>

<div id="container">

<div id="header">

</div>

<div id="contenttitle">

<h1>Half Life 2 Apartment - Raven Art Test</h1>

</div>

<div id="contentsubcontainer">

<div id="contentmainmenu">

<ul id="navlist">

<li><a href="GermanMaglev.html">German Maglev - WIP</a></li>

<li>Half Life 2 Apartment - Art Test</li>

<li><a href="#">Watermill - Source SDK</a></li>

<li><a href="#">Setting Sun</a></li>

<li><a href="#">LSI</a></li>

<li><a href="#">Deadfall</a></li>

</ul>

</div>

<div id="content">

<div class="mediumthumbnail">

<img src="Images/Hal fLife 2 Apartment/Medium/HalfLife2apartment_medium_001.jpg" id="image" alt="" width="450" height="337"/>

</div>

</div>

<div id="contentsubmenuscroll">



<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image1b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_001.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image1b.src">MED </a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_001.jpg" rel="lightbox-German Maglev" title="<p>German Maglev <br /> This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>
</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image2b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_002.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image2b.src">MED</a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_002.jpg" rel="lightbox-German Maglev" title="<p>German Maglev This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>

</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image3b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_003.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image3b.src">MED</a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_003.jpg" rel="lightbox-German Maglev" title="<p>German Maglev This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>

</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image4b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_004.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image4b.src">MED</a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_004.jpg" rel="lightbox-German Maglev" title="<p>German Maglev This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>

</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image5b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_005.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image5b.src">MED </a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_005.jpg" rel="lightbox-German Maglev" title="<p>German Maglev <br /> This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>
</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image6b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_006.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image6b.src">MED</a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_006.jpg" rel="lightbox-German Maglev" title="<p>German Maglev This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>

</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image7b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_007.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image7b.src">MED</a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_007.jpg" rel="lightbox-German Maglev" title="<p>German Maglev This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>

</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image8b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_008.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image8b.src">MED</a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_008.jpg" rel="lightbox-German Maglev" title="<p>German Maglev This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>

</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image9b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_009.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image9b.src">MED </a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_009.jpg" rel="lightbox-German Maglev" title="<p>German Maglev <br /> This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>
</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image10b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_010.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image10b.src">MED</a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_010.jpg" rel="lightbox-German Maglev" title="<p>German Maglev This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>

</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image11b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_011.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image11b.src">MED</a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_011.jpg" rel="lightbox-German Maglev" title="<p>German Maglev This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>

</div>

<div class="smallthumbnail">

<a href="#" onmousedown="image.src=image12b.src"><img src="Images/Hal fLife 2 Apartment/Small/HalfLife2apartment_small_012.jpg" alt="" width="79" height="59"/></a>

<span>preview:<br /><a href="#" onmousedown="image.src=image12b.src">MED</a> ¦ <a href="Images/Hal fLife 2 Apartment/Large/HalfLife2apartment_large_012.jpg" rel="lightbox-German Maglev" title="<p>German Maglev This project is being built to showcase my skills as an enviroment artist, and also showing my ability to model higher poly count models.</p>">LRG</a></span>

</div>



</div>

</div>

<div id="footersubcontainer">

<div id="footerlogo">

</div>

<div id="footernav">

<ul id="nav">

<li>

<a id="DemoReel" href="#"><img src="Images/Nav/blank.gif" alt="Demo Reel"/></a>
<!--<a href="#" class="currentDemoReel"><img src="Images/Nav/blank.gif" alt="Demo Reel"></a>-->

</li>

<li>

<!--<a id="Works" href="#"><img src="Images/Nav/blank.gif" alt="3dWorks"></a>-->
<a href="#" class="currentWorks"><img src="Images/Nav/blank.gif" alt="3dWorks"/></a>

</li>

<li>

<a id="Resume" href="#"><img src="Images/Nav/blank.gif" alt="Resume"/></a>
<!--<a href="#" class="currentResume"><img src="Images/Nav/blank.gif" alt="Resume"></a>-->

</li>

<li>

<a id="LinkedIn" href="#"><img src="Images/Nav/blank.gif" alt="LinkedIn"/></a>
<!--<a href="#" class="currentLinked"><img src="Images/Nav/blank.gif" alt="LinkedIn"></a>-->

</li>

</ul>

</div>

</div>

</div>

</body>

</html>

[swa66]

That's a lot of code.

"background-attachment: fixed" is often misunderstood. The positioning is done relative to the viewport and it stays fixed in the vieport.
You might want to try give the background to a wrapper of the element with the overflow:scroll to get the efect you seek.

[luispunchy]

Hi Josh - I don't think many (any?) folks here are going to want to dig through all that code :) even with your bolded parts where you suspect the problem is...

Here's what I'd suggest:
1. Strip your code down to a minimal test case. You've got so much code there it isn't easy to see what's conflicting with what else. A minimal test case will help you isolate the issue. Great tutorials on troubleshooting:
- [webmasterworld.com...]
- [webmasterworld.com...]

2. Did you validate your xhtml/css?

3. Consider the fact that Firefox3 (and perhaps IE7 as well) is likely displaying the CSS background correctly, as that is a more standards-compliant browser.

Perhaps you are building with IE6 as your main testing browser and aren't aware of its many flaws in CSS rendering? Better to get your design working in a standards-compliant browser like FF or Safari first, then apply fixes for IE6 et al.

4. The only code specific advice I can give here (without a minimal test case) is that you may simply misunderstand the overflow:scroll property. You've set a definite height and applied overflow:scroll - that *will* cause the scroll bars to appear if the content inside your div exceeds that declared height.

Good luck.

[overland48rookie]

I have the same problem with a CSS image and aa HTML image. I am a beginner with HTML and CSS. A friend put my web site together. I am trying to learn how to keep the pages updated. The Site was up for a year with one host and then we switched. The site is hosted again but with these 2 small problems. They were not a problem last year. I do not know why it is now. I have validated both HTML and CSS with W3C Validator. All pages passed after figuring out how to correct minor problems. The code excerpts will render in IE6 but not IE7 or FF 3.07 I am clueless as to why. I have searched the web for an answer for 5 days now. As I stated I do not know enough yet to figure this out on my own. I want to learn!
I am using W3C online school to learn. Please take a look and see if you can help. I will need examples if there is a response to this post.

<!DOCTYPE HTML PUBLIC 4.01//EN"Strict"
HTML code:
<link rel="stylesheet" type="text/css" href="/environmental.css">
<style type="text/css">
<!--
.style7 {color:#0000CC}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="container"><div id="header"></div><div id="links"><h3>Links</h3>
<p><a href="/index....">Home</a>
<br><a href="/pricing....">Pricing</a>
<br><a href="/information....">Information</a>
<br><a href="/contact....">Contact</a>
<br><a href="/Meter Repair....">Meter Repair</a>
</p></div>
__________________________________________________________
CSS code: This is the complete CSS for all my pages
body
{
background: #E0E0E0;
}

p
{
font: 9pt/17pt arial;
margin-top: 0px;
}

h1
{
font: 14pt/18pt arial;
text-decoration:underline;
}
h2
{
font: 14pt/18pt arial; color:#0C0;
text-decoration:underline;
}

h3
{
font: 14pt/18pt arial;
}
#container
{
width: 830px;
}

#header
{
background: #ffffff url(/header4.jpg) no-repeat;
height: 150px
}

#links
{
/* This image does not show in IE7 or FF 3.07
but shows in IE6*/
background: #CCFFFF url(/Truck_at_dusk.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 95% 5%;
width: 200px;
float: right;
padding: 5px 5px 5px 10px;
margin: 70px 10px 10px 5px;
border-right:1px dotted #000000;
border-left:1px dotted #000000;
border-bottom:1px dotted #000000;
border-top:1px dotted #000000;
overflow:auto;
}

#mainbody
{
background: #FFFFFF;
border-right:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
padding: 20px 40px 20px 40px;
min-height:400px;
}

I was trying the overflow in #links as explained in one of the posts I read. Did not help.
___________________________________________________________
The below code is for another issue with images in browsers IE7 and FF not IE6. The first 2 images and text render to the left in IE7 And FF but centers properly in IE6. The 2nd set of images work fine in all browsers. The page looks unprofessional with one set of images left and the other centered.

HTML code:
</div><div id="mainbody"><h1>HEADER....</h1>
<p>We use......exhaust.</p>
<div id="certified">
<div align="center">
<h1 align="center"><img src="seal_ca-1.jpg" alt="">Text in between images<img src="seal_ca-1.jpg" alt=""></h1></div>
<p>Ma......list for <a href="....facilities</a>.</p><p style="text-align: center";><img src="cert1.jpg" alt=""><img src="spacer.gif" width="30"alt=""><img src="cert2.jpg" alt=""></p>
</div>

I hope this post is done correctly.
Thank You in advance
overland48newbie
beginner
I hope this is enough code for you to evaluate.

[swa66]

I'd guess "

background-attachment:fixed; 

" is your problem. It is often misunderstood how it is supposed to work:
It will position your image relative to the viewport (the window of your browser) and fix it to that position irrespective of any scrolling that might go on.

Whenever IE and the standards compliant browsers such as Firefox disagree on how to render something, the odds are like 99.9% for IE to be wrong. So even if what happens in IE is what you want to happen, you code in all likelyhood is instructing browsers to do what you did not want to happen.

[overland48rookie]

Thanx for the reply swa66. I resolved the problem by removing the fixed element in the css. Now everything works well in all browsers. The other problem I was having was due to margins. Again thanx for the reply.

overland48rookie