Comments on: Mozilla Problem

Question: Mozilla Problem

weston — Fri, 12 Mar 2004 01:34:09 -0800

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. )

By: twine42

twine42 — Fri, 12 Mar 2004 02:10:38 -0800

I'm using Firebird and the only difference I can see is a lack of whitespace above the picture and grey box.

By: normy

normy — Fri, 12 Mar 2004 04:03:03 -0800

Try taking the style="position:relative" out of your <td> tags in the content table.

By: yerfatma

yerfatma — Fri, 12 Mar 2004 04:21:50 -0800

Moz definitely doesn't handle position: relative well on table elements. You probably don't need "overflow: visible;" either.

By: ook

ook — Fri, 12 Mar 2004 08:29:01 -0800

For what it's worth, the page looks fine in Moz1.5b on OSX.

By: DrJohnEvans

DrJohnEvans — Fri, 12 Mar 2004 09:20:17 -0800

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.

By: DrJohnEvans

DrJohnEvans — Fri, 12 Mar 2004 09:21:36 -0800

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.

By: AstroGuy

AstroGuy — Fri, 12 Mar 2004 09:48:47 -0800

Disappears in Firefox 0.8. I can see it for a fraction of a second though.

By: weston

weston — Fri, 12 Mar 2004 10:55:22 -0800

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?

By: bobo123

bobo123 — Fri, 12 Mar 2004 15:16:41 -0800

Mozilla 1.6 Win2k: content dissapears like you describe, so it's not just a Firefox bug.

By: arto

arto — Fri, 12 Mar 2004 21:22:24 -0800

Funny, it works fine in Firebird 0.6... Are those perchance older versions of Camino and (the full) Mozilla you're using?

By: bobo123

bobo123 — Sat, 13 Mar 2004 11:31:58 -0800

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.

By: weston

weston — Sat, 13 Mar 2004 12:02:48 -0800

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.

By: weston

weston — Sat, 13 Mar 2004 12:05:05 -0800

Oh, and arto: Camino 0.7 on Mac, Firebird 0.8 on Win/Mac, version 1.6 of the Beast on Windows.

By: bobo123

bobo123 — Sat, 13 Mar 2004 13:28:35 -0800

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.

By: bobo123

bobo123 — Sat, 13 Mar 2004 13:34:38 -0800

Whoops, in my postings replace every instance of .contentbox2 with .contentBoxB, that's what I meant. Sorry about any confusion.

By: weston

weston — Sat, 13 Mar 2004 23:57:34 -0800

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...