Nested DIV now showing background

Forum Moderators: not2easy

Message Too Old, No Replies

Nested DIV now showing background

problem is in Firefox.

longboy

3:12 pm on Aug 24, 2007 (gmt 0)

I have created page in css and outer div has background-image vertically and inner div have background-image vertically which is not showing in firefox but showing in IE7

body{
margin: 0px auto;
background-color: #FFF;
background-image: url("images/bg.jpg");
background-repeat: repeat-x;
text-align: center;
}

#page{
margin: 0px auto;
width: 779px;
height: auto;
position: relative;
background-image: url(images/bgshadow.jpg);
background-repeat: repeat-y;
clear: both;
}

div id=page is not showing background image.

Marshall

4:48 pm on Aug 24, 2007 (gmt 0)

Why do you have the clear:both in the #page?

Marshall

rocknbil

6:41 pm on Aug 24, 2007 (gmt 0)

Both working fine here, in both standards and quirk modes. You can remove quotes on the url spec, actually I've had more trouble leaving them in.

Maybe it's not clearing below the text for some reason, leaving #page with "no height?" Put p tags on the text and a border on #page to see what is going on.

4css

8:22 pm on Aug 24, 2007 (gmt 0)

Why do you have the clear:both in the #page?
Marshall

Good question as using a clearing is for floats. And I don't see any floats in the css that is shown above.

longboy

6:34 am on Aug 25, 2007 (gmt 0)

all the things changed according your replies but still not working.

vincevincevince

6:39 am on Aug 25, 2007 (gmt 0)

Are you, by any chance, viewing this from your local drive on a windows pc? It sounds like a / \ issue with the path which is being complicated because one has " " and one doesn't. Match the two.

Set borders on #page so that you can see the outline - is it the size you expect?

Right click within page and 'view background image' - what URL do you get taken to?

Marshall

7:24 am on Aug 25, 2007 (gmt 0)

Are you trying to float the #page and have it center in the window? If so, remove the margin: 0px auto; from the body and add text-align:left; to #page. Also try adding height: 100%; to both body and #page.

Marshall

Using my own images, this worked fine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>blah blah blah</title>
</head>
<style type="text/css">
body{
background: #fff url(images/my_images.gif) repeat-x;
height: 100%;
}

#page{
margin: 0 auto;
text-align: left;
padding: 10px;
width: 779px;
height: 100%;
background: #fff url(images/my_images.gif) repeat-y;
border: thin solid #000; /* put in to see ends of div */
}
</style>
<body>
<div id="page">
blah blah blah
</div>

Don't know what to tell you other than check your files paths.

[edited by: Marshall at 7:40 am (utc) on Aug. 25, 2007]