IE background div image troubles

http://www.thepetnurse.net

Works great in firefox/safari/opera

But the big picture of the dog at the bottom doesn't show up in IE.

The CSS tag:
   .bottom {
      position: absolute;
      z-index:-10;
      top:350px;
      margin:0; padding:0;
      background:url('img/thepetnurse_btm.png') top left no-repeat;
      width:748px;
      height:473px;
      }

How can I get this working in IE? My book offers no explanation.

[Free WordPress Themes]

I guess the problem is the z-index, try a different style solution

So how can I get that image to go under the content box? Z-index's dont work in IE?

[Free WordPress Themes]

So how can I get that image to go under the content box? Z-index's dont work in IE?

z-index is the reasom for a lot of trouble in IE...

create the grey box with CSS using a background color and diff. borders

[Just Visit...]

actually I cannot see it in FF2 either... What do you intend to do. Can you show me the old page with the problem? Maybe I can help. In my experience, using absolute positioning with z-index values especially putting the image call at the bottom, puts the image behind the previous object div or paragraph or container. It is best to achieve the same graphic style by using relative positioning...

There is supposed to be a large sleeping puppy at the bottom, its right under the end of the content box. It works on FF3 beta on the mac....

http://www.thepetnurse.net/dev/tpn.png

is how its supposed to look. Any help is appreciated!

There also seems to be another issue, on some browsers, the content box is tiny, and there is a white space underneath the header.


ffs.

[Free WordPress Themes]

place the image in the body background

place the image in the body background

How can I get it positioned underneath the content box, and lower down on the page?

[Just Visit...]

Actually you have two problems, other than the image not showing at the bottom problem, the background of the colourful paws on top and of the puppy pic at the bottom is #f7f7f7 instead you have white, which makes the edges visible. The solution is to replace your css tag for "container" and it fixes all problems mentioned. See Below.

Copy Below and replace the one on your css.

Code:

#container {
margin:0pt;
padding:0pt;
width:748px;
height:900px;
background:#f7f7f7 url(img/thepetnurse_btm.png) no-repeat left 400px;
}

Thank you.

So i just use that tag, and get rid of the z-index and current div bg?

[Guest]

[34.931]

Yahoo crawler, Googlebot