why DIV doesn't work on FireFox

[SZero]

hi every1
i started a topic earlier on how to divide a page using div, well the problem was solved, but only on IE, when i try it on FireFox the left DIV doesn't appear and no scroll appears horizontally too..
here's the code i use


<div style="background: url(templates/subSilver/banr.gif) repeat-y right top; padding: 0; margin: 0">
<div style="background: url(templates/subSilver/banl.gif) repeat-y right left; padding: 0; margin: 0">

<DIV style="margin-left: 32px; margin-right: 32px; width:100%">
Page Content
</DIV>


any idea why?

[dtm32236]

have you closed the top two divs?

<div style="background: url(templates/subSilver/banr.gif) repeat-y right top; padding: 0; margin: 0"><!-- banner right --></div>
<div style="background: url(templates/subSilver/banl.gif) repeat-y right left; padding: 0; margin: 0"><!-- banner left --></div>

<DIV style="margin-left: 32px; margin-right: 32px; width:100%">
Page Content
</DIV>
(some browsers don't like empty divs, so i put a comment in them)

or:

<div style="background: url(templates/subSilver/banr.gif) repeat-y right top; padding: 0; margin: 0">
<div style="background: url(templates/subSilver/banl.gif) repeat-y right left; padding: 0; margin: 0">

<DIV style="margin-left: 32px; margin-right: 32px; width:100%">
Page Content
</DIV>

</div>
</div>

[WebJoel]

(I moved this thread to CSS from Graphics, as it has nothing to do with Graphics)..

What effect are you after? It appears that you want two 'bands' of image tiling in the y-axis ("vertically"), but this:<div style="background: url(templates/subSilver/banl.gif) repeat-y right left; padding: 0; margin: 0"> doesn't make sence. -How can a vertically-tiling background-image be positioned "right left"?

I think your co-ordinate options are left-top, top-right, right-bottom and bottom-left. And if these are meant to be left-border and right-border backgrond-images, they should have one on HTML {} and the other on BODY {}

Either that, or create a all-encompassing "wrapper" DIV, float a (let's say) 50px wide DIV left and float another 50px DIV right, both have height:100%, and give height:100%; padding: 0 50px 0 50xp; the latter to the "wrapper" to keep the "content" DIV from over-writing the 'edges', and proceed that way.

What you have now is two block-level elements with no height control, one below the other. That is how Firefox would read it.

[SZero]

closing div makes the whole div doesn't work on IE, ofcourse nor firefox..

WebJoel: that was a little stupid of me this right left thing, i think i was just outta bed :)

any more ideas?

[WebJoel]

closing div makes the whole div doesn't work on IE, ofcourse nor firefox..
any more ideas? Nor would it. Without stating a width and a height, as "background" is not actually 'in the document flow' and exerts no 'pressure' on the container. I'm delighted that IE and Firefox agree on this.

If your background-image is 500px by 100px, your "width:500px; height:100px; background-image:url(name.jpg);" in the div should suffice.

Bear in mind that an 'empty div' might throw a validation 'warning', so give "comment" within:

<div style="width:500px; height:100px; background-image:url(name.jpg);"><!-- --></div>

whereby <!-- --> can be just that, or "<!-- empty header area -->" or whatever...:)

Since you seem to want to have a y-axis tiling effect, probably the DIV are 'page length' and should not 'closed' until the end-of-page. I think at this point I/we'd have to see your entire code & images being used to proceed.
It's a fairly easy layout you're doing.