[madmacgames]

Greetings all,

As I near completion of moving a website from an all horrible horrible nested tables in nested tables layout to a much cleaner XHTML + CSS layout, I am beginning to test it in a variety of browsers. I tested when I came up with the initial layout and sections to be sure what I had was ok, and now that it is mostly in place am testing again.

Anyways, so far I have starting the re-tested in (all Mac based) Safari 1.2, IE 5.2.3, Netscape 6.1, Netscape 7.1, Mozilla 1.0 RC1, Mozilla 1.6, Camino .7, and FireFox .8

Aside from the text rendering of Netscape 6.1 and Mozilla 1.0 being absolutely horrific (does not seem to be anti-aliased), the pages render and display quite satisfactorily in all browsers but a small problem in FireFox and Mozilla 1.6

The problem is the website is basically a header, 2 column, footer layout, with the left column being a menu type of column and the main content area to the right being a floated div (so it actually comes 1st in the source). The left column & main content column are both contained in a container DIV that is placed between the header and footer. There is about 20px of margin between the 2 columns and the background of the that entire section is set with the container DIV. Out side of the "page", the body contains a different background.

The problem with FireFox & Mozilla 1.6 is that it does not render the container DIV's background in the area of 20px margin and also below the left column about 50px it does not render the background, if that shows above the fold. Once you scroll, it renders the background in the area you scrolled over if you scroll back, and also it is properly rendered in the area you scrolled too (ie, the page of the page below the fold seems to be properly rendered). Where not rendered, you see the bodies background and not the container DIV's background. I've even set the background of the 2 columns to white (as that is all it needs to be) and still it does not render in that one area between the 2 columns. It also seems to be intermittent. Sometimes it does not always not render the background (if that makes sense). Sometimes refreshing the page makes it go away and render how it should. Sometimes refreshing when it was rendered ok will make it mess up. You get the idea.

This seems to be a newer Mozilla bug perhaps (older Mozilla is fine, Camino is fine, NS 7.1 is fine). Has anybody seem this or know of a solution? I have tried searching for background bugs in Mozilla, but any place that I've seen that lists Mozilla bugs has nothing like this (and in fact lists background bugs as zero).

[Simon Mundy]

Originally posted by madmacgames:
Greetings all,

As I near completion of moving a website from an all horrible horrible nested tables in nested tables layout to a much cleaner XHTML + CSS layout, I am beginning to test it in a variety of browsers. I tested when I came up with the initial layout and sections to be sure what I had was ok, and now that it is mostly in place am testing again.

Anyways, so far I have starting the re-tested in (all Mac based) Safari 1.2, IE 5.2.3, Netscape 6.1, Netscape 7.1, Mozilla 1.0 RC1, Mozilla 1.6, Camino .7, and FireFox .8

Aside from the text rendering of Netscape 6.1 and Mozilla 1.0 being absolutely horrific (does not seem to be anti-aliased), the pages render and display quite satisfactorily in all browsers but a small problem in FireFox and Mozilla 1.6

The problem is the website is basically a header, 2 column, footer layout, with the left column being a menu type of column and the main content area to the right being a floated div (so it actually comes 1st in the source). The left column & main content column are both contained in a container DIV that is placed between the header and footer. There is about 20px of margin between the 2 columns and the background of the that entire section is set with the container DIV. Out side of the "page", the body contains a different background.

The problem with FireFox & Mozilla 1.6 is that it does not render the container DIV's background in the area of 20px margin and also below the left column about 50px it does not render the background, if that shows above the fold. Once you scroll, it renders the background in the area you scrolled over if you scroll back, and also it is properly rendered in the area you scrolled too (ie, the page of the page below the fold seems to be properly rendered). Where not rendered, you see the bodies background and not the container DIV's background. I've even set the background of the 2 columns to white (as that is all it needs to be) and still it does not render in that one area between the 2 columns. It also seems to be intermittent. Sometimes it does not always not render the background (if that makes sense). Sometimes refreshing the page makes it go away and render how it should. Sometimes refreshing when it was rendered ok will make it mess up. You get the idea.

This seems to be a newer Mozilla bug perhaps (older Mozilla is fine, Camino is fine, NS 7.1 is fine). Has anybody seem this or know of a solution? I have tried searching for background bugs in Mozilla, but any place that I've seen that lists Mozilla bugs has nothing like this (and in fact lists background bugs as zero).

Do you have an element that explicity 'clears' the float in your layout? I've found Mozilla to be a bit picky about that. A <br clear="all" /> or a 'spacer' DIV fixes this in most cases.

[Synotic]

Originally posted by Simon Mundy:
Do you have an element that explicity 'clears' the float in your layout? I've found Mozilla to be a bit picky about that. A <br clear="all" /> or a 'spacer' DIV fixes this in most cases.

This seems like a likely culprit... I personally use a <div class="clear"> solution when the layout needs to be very precise and can't have a break return inserted randomly in the page. If you're doing the same thing... i've found an bug (or at least Safari, IE 6, and IE 5 don't exhibit the behavior) where if you give the div a pixel height of "0" the clearer div is totally invalidated. I've noticed this in a few places but sometimes it seems to actually work... so I need to investigate it a bit more. BTW, that's quite a lot of stuff to conceptualize in one's head at one time. If this bug is only showing up in Firefox and not even other breeds of Mozilla browsers then it's probably something very specific within the code... so it would probably be helpful if you could construct a test page... that is unless one of our suggestions happens to work

[madmacgames]

thanks for the suggestions guys.

I have been very careful to clear all floats where needed because of a similar bug in one of the IEs for windows where if not cleared, the background will not show. I personally use <div class="clearboth"><hr /></div> to clear my floats (where it has a 1px height, as I found out the 0px bug in IE windows and .clearboth hr is set to display: none because I read a div should not be empty).

And actually after I posted I realized I should have changed my title... the "bug" or whatever is also present in Mozilla 1.6 (I think FireFox is 1.5). it is ok in NN 7.1 and Camino .7, so between whatever Mozilla version those 2 are based on and 1.5, this "bug" appeared.

I will keep toying with it a bit, and if that fails, I will upload a test page displaying the problem.

[madmacgames]

just to be sure I had not missed clearing a float someplace, I placed clearing DIVs all over the main layout just to be sure... Mozilla 1.6/Firefox still refuses to render the parent's background & border I've now discovered (didn't notice border before as it is 1px and just a few shades darker than the left side of the left menu).

I've even made the clearing divs display a 1px solid black line across the screen so I could visually see, and yes indeed the main float is being cleared, so the parent background should be rendered, right?

what is also odd is that the left menu does not float but the background does not render below it either.

the left menu & main content float are in a container DIV, that itself is contained in the "pages" div, which sets the page background (the one not rendering in this case), border, holds the header, left menu/main content container, and footer, etc. Now if I set a background for the left menu/main content container and put in a clear just before that div closes, that background is rendered, but that is no good. I need the containers parent's background to render (otherwise below the left menu/main content container where there is other content before the footer, you can definitely see where the backgrounds do not match up.

I know this is very hard to get by my descriptions... it is very hard for me to explain The code is too long to post here, so I will try to get a testing page up that clearly displays what I'm talking about.

[madmacgames]

Originally posted by madmacgames:
Now if I set a background for the left menu/main content container and put in a clear just before that div closes, that background is rendered, but that is no good. I need the containers parent's background to render (otherwise below the left menu/main content container where there is other content before the footer, you can definitely see where the backgrounds do not match up.

*poking myself here*

that was the key to my solution. Move the content below the left menu/main content container div (banner holder & footer) inside the left menu/main content container div and set the "page" background on the container div instead of the parent container... then put in the extra clear... and yes it worked. The header doesn't need the page background anyways. The left border beside the menu is still not rendered since it is part of the parent, but fireFox/Mozilla 1.5+ people will just have to deal with it. It is not that noticeable anyways on the left side.

So that fixes it, but I still do not get why the container would not fully render the background from its parent.

[Synotic]

Originally posted by madmacgames:
*poking myself here*

that was the key to my solution. Move the content below the left menu/main content container div (banner holder & footer) inside the left menu/main content container div and set the "page" background on the container div instead of the parent container... then put in the extra clear... and yes it worked. The header doesn't need the page background anyways. The left border beside the menu is still not rendered since it is part of the parent, but fireFox/Mozilla 1.5+ people will just have to deal with it. It is not that noticeable anyways on the left side.

So that fixes it, but I still do not get why the container would not fully render the background from its parent.

I didn't attempt to to visualize all that.. mainly because you fixed your problem... (sorry ) but keep in mind that it would make sense if everything weren't being cleared that the contents would show but not the page background completely. The background would show just until whatever wasn't floated... and then stop once all the floated content starts... BTW, do you possibly know where you saw this "divs can't be empty" comment? I find this kind of unlikely, and even then, if you're using display: none, to the renderer, the div still is empty. I also doubt this was related to just divs... unless this was a very specific bug and not just a general "well-formedness" comment. This would harken back to the days of sticking hundreds of transparent gifs in all your empty table cells... so I'm somewhat skeptical

[madmacgames]

Originally posted by Synotic:
but keep in mind that it would make sense if everything weren't being cleared that the contents would show but not the page background completely. The background would show just until whatever wasn't floated... and then stop once all the floated content starts...

well as I mentioned in the earlier posts, everything is being cleared and to be sure I went in and put in extra un-needed clearing elements just to be sure and still no change. So that was definitely not it. What more, moving the background up one level made it show up in newer Moz where it would not in the parent.

pseudo layout of old:

Code:
<div> <-- holds "page" background/ "page" container (ie header, conent, footer)
  <div><-- header --></div>
  <div> <-- left menu/main content container
    <div><-- main content float right --></div>
    <div><-- left menu --></div>
  </div>
  <div><-- bottom banner container --></div>
  <div><-- footer --></div>
</div>

pseudo of my fix or work-around for Mozilla:

Code:
<div> <-- "page" container (ie header, conent, footer)
  <div><-- header --></div>
  <div> <-- left menu/main content container / holds "page" background
    <div><-- main content float right --></div>
    <div><-- left menu --></div>
    <div><-- bottom banner container --></div>
    <div><-- footer --></div>
  </div>
</div>

I just moved the placement of the background 1 level. Seems like a new Mozilla bug to me (like I said I am clearing everything where needed... i am fully aware of that issue, thank you). I also moved the banner & footer inside the menu/content container so the page background did not mess up between the 2.

BTW, do you possibly know where you saw this "divs can't be empty" comment?

I don't quite remember... I'd have to do some checking around. It may have been semantics more than anything... not that they cannot render empty, but code-wsie...

like: <div class="clearboth"></div> is technically not correct or something... might have had something to do with the CDATA specs or something, because a DIV is not a self enclosed tag like IMG or INPUT or HR and should contain other code inside of it (something like that I think)... so you should do <div class="clearboth"><hr /></div>. I will have to try to find where I read about it before, but it makes sense to be because a DIV is not a self enclosed tag, and therefore, should never be "empty", meaning empty of code, not necessarily meaning rendering nothing.