Mozilla Problem

March 12, 2004 1:34 AM

Apparent CSS or related markup problem. This page renders mostly correctly in IE6, but most of the content disappears under Moz. It's a hybrid CSS/table layout. I need your Browser-Fu! [more inside]

I'd thought the problem might be with some of the Javascript included, but it looks like an earlier version (sans JS) has the same trouble.

Any ideas what's going on here?

The CSS validates and the HTML almost does except for a complaint about me using the "background" attribute on a .... could this be related?

(And by the way, yes, the table layout is a necessity -- it will be used by someone who is uninterested in CSS Positioning. Unfortunate, given that this layout would lend itself rather well to something table-free. )

posted by weston to computers & internet (16 comments total)

I'm using Firebird and the only difference I can see is a lack of whitespace above the picture and grey box.
posted by twine42 at 2:10 AM on March 12, 2004

Try taking the style="position:relative" out of your <td> tags in the content table.
posted by normy at 4:03 AM on March 12, 2004

Moz definitely doesn't handle position: relative well on table elements. You probably don't need "overflow: visible;" either.
posted by yerfatma at 4:21 AM on March 12, 2004

For what it's worth, the page looks fine in Moz1.5b on OSX.
posted by ook at 8:29 AM on March 12, 2004

Moz1.5 Win2k: only difference is the lack of whitespace per twine42. All the content's there. (Aesthetic aside: I think it looks better without the whitespace anyway.)

To make the HTML valid, take out the background="images/LeftBarRepeat.jpg" in your tag and add background-image: url(images/LeftBarRepeat.jpg); in the cell's tag.
posted by DrJohnEvans at 9:20 AM on March 12, 2004

Damn you, preview daemons! Kindly correct to:

To make the HTML valid, take out the background="images/LeftBarRepeat.jpg" in your <td> tag and add background-image: url(images/LeftBarRepeat.jpg); in the cell's style attribute.
posted by DrJohnEvans at 9:21 AM on March 12, 2004

Disappears in Firefox 0.8. I can see it for a fraction of a second though.
posted by AstroGuy at 9:48 AM on March 12, 2004

Moz1.5 Win2k: only difference is the lack of whitespace per twine42. All the content's there. (Aesthetic aside: I think it looks better without the whitespace anyway.)

Hmmm. I've been using Firefox .8 and just assuming that it would represent the rendering of all Gecko-based browsers, but I just tried with Camino and the full-fledged Mozilla Beast itself and found that it is in fact rendering.

Firefox bug, then?
posted by weston at 10:55 AM on March 12, 2004

Mozilla 1.6 Win2k: content dissapears like you describe, so it's not just a Firefox bug.
posted by bobo123 at 3:16 PM on March 12, 2004

Funny, it works fine in Firebird 0.6... Are those perchance older versions of Camino and (the full) Mozilla you're using?
posted by arto at 9:22 PM on March 12, 2004

Funny, I was playing around with the css, I tried adding position: absolute; to .contentbox2 just to see what would happen, and the content finally showed up in Mozilla 1.6. Which is strange since .contentbox2 isn't explicitly positioned so that shouldn't do anything.
posted by bobo123 at 11:31 AM on March 13, 2004

bobo123 -- that's excellent news. I'll bet setting position: relative or anything else that would make it a default containing box might work.

Also, yerfatama's suggestion about removing position: relative from the table cells works.

I really appreciate the help, everybody. I put the question out to webdesign-l and css-discuss earlier in the week and didn't get answers. AskMe rocks.
posted by weston at 12:02 PM on March 13, 2004

Oh, and arto: Camino 0.7 on Mac, Firebird 0.8 on Win/Mac, version 1.6 of the Beast on Windows.
posted by weston at 12:05 PM on March 13, 2004

Hmm, problem with adding position:absolute in .contentbox2 is that it creates a box the size of the viewable screen, probably because of the height: 100% and width:100% attributes, so the page is a lot larger than it has to be.

But some better news, if you remove the height: 100% and width: 100% properties from .contentbox2, the whole thing renders fine in ie and mozilla 1.6. I think that was your problem, there's really no reason for those properties to be there anyway.
posted by bobo123 at 1:28 PM on March 13, 2004

Whoops, in my postings replace every instance of .contentbox2 with .contentBoxB, that's what I meant. Sorry about any confusion.
posted by bobo123 at 1:34 PM on March 13, 2004

Hmmm, yes.

I'm finding percentage heights and widths rarely behave the way I'd like them to under CSS. I think I now recall I was trying to guarantee width and height taking up the most of the cell, so I figured I'd make it the containing block by declaring its positioning absolute or relative. Obviously not productive...
posted by weston at 11:57 PM on March 13, 2004