compatibility problem

[Dday76]

I've got a simple div element that looks fine in ie but is invisible in firefox. What gives?

http://groups.cob.ohio-state.edu/olma/

Thanks for any help.

[mwinter]

I've got a simple div element that looks fine in ie but is invisible in firefox. What gives?

http://groups.cob.ohio-state.edu/olma/

The immediate issue is that you relatively-position the "maincol" div element. This alters its position on the z-index stack, placing it over the sidebar. Removing that position declaration will reveal the left-hand part.

There are other changes you can make, too. Some small, some not.

The first is to remove the height declaration for the "navbar" div element. If the document was rendered in "Standards" mode (you'd need to - and should, in my opinion - add a document type declaration [DOCTYPE] to achieve that), it wouldn't even apply as percentage heights require the containing block to have its own explicit height. To stop the content to the right from rendering below the last form, add a left margin.

The next are related to fonts. All font family specifications should end with a generic family, such as serif, sans-serif, or monospace. A visitor might have not the fonts you specify. In addition, don't use units like pt or px. The former is for print media, and the latter may not be easily readable depending on the dimensions of the display device and resolution. Worse still, these aren't resizeable in IE (prior to 7), which would be very bad if the user needed a larger size. Use percentages, instead, preferably keeping body text at 100% of the default size.

Keep in mind that fonts like Georgia and Verdana appear larger than other fonts in the same family. Reducing the font size might look fine for these, but far too small with a fall back font with different metrics. Reducing the font size by no more than 85% from the default should avoid any problems in this regard.

The final point, again related to units, regards element dimensions. When sizing an element, the px unit isn't usually appropriate when that element contains text. If the text is rendered at a different size, unwelcome wrapping will occur. On some sites with fragile designs, this can be disastrous. Using em units, the dimensions are proportional to the font size. Similarly, padding and margins that separate or surround text tend to look better when proportional to the font, rather than a fixed number of pixels.

I've written an example of some of these concepts (http://mwinter.webhop.info/dd/olma/) using your site, though I used absolute positioning, rather than floats, for the sidebar.

Mike

[Dday76]

Thanks for the help. I played around a little. I did the absolute positioning like you suggested, but now the footer I had ends up at the top.

div.maincol will be varying lengths. How do I always ensure div.footer is at the bottom of the page without covering anything?

I took your other suggestions as well and will incorporate the DOCTYPE, font, %, and px changes you suggested with the format change.

[mwinter]

I did the absolute positioning like you suggested, but now the footer I had ends up at the top.

I didn't say that you needed to adopt absolute positioning - you can float the sidebar if you like.

To identify the problem exactly, I'd need to see an example. At a guess, I'd say that you absolutely-positioned the wrong element. As absolutely positioned elements are taken out of the flow, they take up no space and elements that follow - the footer, in this case - take their place. Only the container for the sidebar itself needs to be absolutely-positioned, though you'll notice that I relatively-position the parent of that element so that the positioning would be relative to the parent, not the document as a whole.

Mike