div background image

[RedRobotHero]

I have a background image in a div. The background image displays as I want it in IE 6 and Opera 7, but not in Netscape 7.

You can see the page here:

http://www.melissa-martin.net/about.html

This is the .css I'm using.

#mback {
       border:none;
       padding:0px;
       margin:0px;
       background-image: url(/images/line.png);
       background-repeat:repeat-x;
       background-position: left center;
       width:100%;
       }

Is there something I can change to make the image appear in Netscape?

 

[Vragabond]

I can tell what is the problem with Netscape (and Mozilla) but I am not sure why this has happened nor do I have any smart idea how to change it.

I have played with your code a bit and noticed that this div has no height in Mozilla. The attribute float causes other elements not to be part of this div but simply floating someplace else. Your div is thus just a small line on the top of the screen, hence no background. If you comment out the float attrbiute of the sub-divs this div will appear correctly. But this seems like a strange behaviour.

I promised no help, but here is a rather stupid solution:

#mback {
border:none;
padding:0px;
margin:0px;
background-image: url(/images/line.png);
background-repeat:repeat-x;
background-position: left center;
width:100%;
height: 190;
}

That will make it work in Netscape and Mozilla and should mess up IE and Opera. It is cheating but it does the job.

 

[RedRobotHero]

Thanks, I fixed it, now. But I didn't set the height in the CSS, (which would have been a fixed height, even though the images can change size) I instead added an extra .div to the html which is set to "clear:both;width:100%" and put it inside of 'mback' right after all the floating images.

But your suggestion was the inspiration behind this.