[RESOLVED] Page appears correct in IE, but not in Opera and Firefox

[webrik]

Can some of you CSS-guru's please look at the page:

http://www.sitestepper.com/niefste2006/test.htm

I am trying to recreate the bought design (which uses tables a lot for it's formatting) using CSS DIV's.

Although, I have been using html and css for a while now, I don't seem to be able to solve this.

If you look at the page in IE 6, you will see a pink background image is displayed in the left bar (in case you wonder why the pink, just to make a colour which is different from the grey buttons ;) ).
If you look at the same page in Opera and Firefox, no pink background image is visible.

As you will see in the source, I have one DIV (id webcontents) surrounding two colums (webleft) and (webright).
Since I want to extend the background image all to the bottom of the surrounding webcontents, I repeated the image over the y-axis.

But somehow, Opera and Firefox don't like what I am doing.

Anyone any ideas ?

Thanks in advance.

[scragar]

there is no url() in background-image

background-image:url(images/heading1.jpg);

I'm not sure if this will fix it, but it's worth a try to see what happens.

[webrik]

Thanks for answering, but I don't know where you see a missing background.

I let the online html and css checker check my page before submitting this post, and apart from some trivial points, they checked out ok.

[Centauri]

All contents of #webcontents are floated, and are therefore outside the document flow, and FF correctly (as per W3C) allows the floats to protrude outside the container, which in this case has zero height due to no other content. IE incorreclty expands the container around floated elements. A clearing div at the end of the #webright div will do the trick.

Cheers
Graeme

[drhowarddrfine]

I let the online html and css checker check my page before submitting this post, and apart from some trivial points, they checked out ok.
Oh? (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sitestepper.com%2Fniefste2006%2Ftest.htm)

[webrik]

Oh? (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sitestepper.com%2Fniefste2006%2Ftest.htm)

Yes, I know about these two errors. Line 28 produces an error while further up in the file a simular background is present inside a similar TD.
The LISTING was certainly not related to the problem, but produced the required result for the page for you to look at, so I kept it in.

I meant that they were not related to the question I posted.

I did let the page check, and I let the css check too (because I first suspected an error in the syntax somewhere). I spend some time, a couple of months ago, invistigating a problem, only to discover, in the end, that I had 'closed' a style declaration inside the css with ) in stead of }.

I assure you, you continiously look over that error ! And Firefox is not forgiving if you make an error like that.

[webrik]

All contents of #webcontents are floated, and are therefore outside the document flow, and FF correctly (as per W3C) allows the floats to protrude outside the container, which in this case has zero height due to no other content. IE incorreclty expands the container around floated elements. A clearing div at the end of the #webright div will do the trick.

Cheers
Graeme

Thanks Graeme for pointing me in the wright direction.
I placed borders around the three DIV's and saw immediatly what you meant.

I now have placed a <div style='clear:both;height:1px;'></div> below the webleft and webright columns and now have the effect I was looking for.

Thanks again, your help is really appreciated.