Layout: CSS layout in Firefox

started by Mccavity on Nov 18, 2004 — RSS Feed

Mccavity Mccavity
Posts: 3

I have been working on CSS only pages (i.e. no tables) with what I thought was a fairly simple layout, a div id for the page, containing separate div id's for the separate sections of the page (header, left link bar, main section, footer). I have avoided things like padding and borders that I know are handled differently by browsers.  The idea is to be able to color theme the overall page for different sections of my site, but keep all other elements consistent.

Now it looks fine in IE, but falls apart in Firefox where the elements of the overall page seem to disappear, and the page elements size themselves with a mind of their own. Any ideas where I am going wrong? Thanks.

Schomer Schomer
Posts: 24

Is there something we could look at, online?

What do you mean by "disappear?" What exactly happens... divs are missing on the page in Firefox?

Baxter Baxter
Posts: 157

Yup, we'd need to see an example. Without it, all I can say is: VALIDATE!

Mccavity Mccavity
Posts: 3

I have finally got around to reposting, and have worked hard on the design. I think previously I set things up for IE  and made the code too complex to edit for Firefox.

This time I have adapted a simpler design I have worked on for another site. Now the problem I have is a page that validates (css and html 4.01 Trans) and works fine in Firefox, but not in IE. (6):

http://www.timcooke.com/Hash/indexp.htm

The inner container (#boxpagehash) is out of place and the 2nd column refuses to float left to join the first. It's probably something dumb, any ideas?

Joe Gillespie Joe Gillespie
Posts: 528

The thing to watch for, as far as IE is concerned, is that it doesn't handle inheritance predictably. You need to make sure that inner divs have their text-align set explicitly or they will inherit it from the parent divs in IE.

Aside from that, use the 'Outline Block Level Elements' feature in the Web Developer Toolbar to see what your divs are doing. The div below the text 'Click on a picture for a smaller version' looks too wide to me and you haven't specified what should happen to the overflow it creates explicitly.

Baxter Baxter
Posts: 157

Besides the things Joe has mentioned, I  suspect you also have a box model problem.

Using the WDT to outline, I also notice you have A LOT of DIVs, way more than you need. Near as I can tell, this site needs two divs, three tops... one for the gray box, one for the off-white box and MAYBE one of the links, but a UL would be better.

You must login to reply