Forum Moderators: not2easy
The CSS plan you've explained should work well. If your divs have widths, you should just be able to layout the nav buttons, for instance, the way you would in a table cell — use breaks between the button imagess, or use transparent gifs to add padding — all that good stuff. You can just let the layout flow in most cases, with no need to fix the positions of every element via CSS.
As for elements within the divs, you usually don't have to do anything differently from what you'd do if the containing div wasn't absolutely positioned.
Do pay attention to what 3.x and earlier browsers will do when they try to display your page. For example, browsers that don't support CSS also usually don't support divs. If you break your nav bar into sections with a header for each, you can wrap each section in a paragraph element, place each line in a div element and bold the header. This causes NN 3.x, for example, to display each section has a horizontal list just under your page header, while CSS-compliant browsers will arrange them vertically (since div is a block element by default).
Be very, very careful with CSS-based layouts on NN4. My advice is generally to use tables for columns and CSS for everything else. NN4 and IE can both do some really weird things and it's hard to produce a columnar layout in CSS that doesn't run into the bugs in one or the other.
To save you a little time: NN4 crashes or misrenders (depending on the version) with tables inside positioned divs, and seems totally incapable of a positioned div. IE 5.x just starts ignoring style when you try to apply certain combinations.
Not true at all, i have used positioned DIV tags with tables inside on a few sites and they all display perfectly in NN4.X and all the other browsers cross platform.
>>IE 5.x just starts ignoring style when you try to apply certain combinations.
Really? IE5 seems the most favourable to layers.
I have done the same, but it's definitley not a sure thing -- even 4.77 tends to forget ALL styles within a div if the div's content continues after a table is closed. For this reason, I design with my default font set to something squirrely, like a script or symbols. It's a good way to catch Netscape when it starts to get forgetful. If my default font is the same as the page's font, I don't see the rendering errors. The workarounds for this problem vary, but they usually involve multiple style declarations as little reminders to the forgetful browser.
Depending on the combinations, Netscape 4 can also show MAJOR errors when tables are inside positioned divs -- like refusing to render the other divs on the page, or not drawing the scrollbars. I've seen the strangest things; suometimes everything straightens out if I remove just one row from the table. It's as if there's a critical level of information, and at a certain point that browser just goes TILT !
Layers are no different and as long as you dont got crazy like nesting 50 layers etc. you should'ne have TOO much of a problem ;)
the main tips when nesting layers is put the nested DIVs in the CSS - not body and set the cell dimensions to equal the table dimensions.
I have closable, minimise, maximise scrolling windows all of which work in NN in fact the only probs I've has is with Opera as it doenst fully support CSS2.
They seem to have fixed the crashing in later 4.x builds (in fact, I don't recall ever seeing a crash in 4.74 or higher), but it still misrenders in cases that used to crash. I suspect some state becomes invalid on complex pages and they worked around it by checking for validity and ignoring the style data if it's screwed. That sort of quick-fix workaround tends to appear a lot in software development when the real problem can't be identified and solved before a release deadline or when the developer doesn't want to devote significant resources to maintenance (which was the situation here).
Too scared to use anything less - ignorance is bliss ;)
