tableless CSS design - why won't IE6 display my background image?

Question

"navigation" is nested inside the "content_wrapper." I'm trying to get navigation_gray_bar_on_righ.png to display on top of the "content_wrapper" element. It works fine in Firefox but not in IE6.

Here's the web site - http://clbc.net/next

.content_wrapper {
background: url(images/background.jpg) repeat-y;
width: 770px;
height: 100%;
}

.navigation {
background: url(images/navigation_gray_bar_on_righ.png);
width: 200px;
float: left;
padding-top: 20px;
padding-bottom: 20px;

Answer 1

You have two div tags which are not closed properly; they are missing the ">"

.content_wrapper
{
background-image: url('images/background.jpg');
background-repeat: repeat-y;
etc.
}

Answer 2

Try adding a height into the .navigation portion.. even say even just 1px or 100% just to see it it will show then, IE 6 has so many bugs it just kills me..

There are many many things that can cause it to simply not display.. I even have to add display:inline sometimes (even where it isn't needed to get IE to work)

I just checked the HTML again,, you are also missing a couple of closings!

Answer 3

It's called layering. You cannot do it with IE6, only with FF or Netscape engines and the like.

Use the code below instead ( just add a table with a background ). You may wish to remove the background in your .navigation class less you end up with two backgrounds in FF ).

Play around with this idea a bit. Use tables whenever you have complicated layers. IE and FF interprets tables much closer than they interpret (div)s, which is a source of migraine to most html/css programmers.