Previous Message
Next Message

Re: [css-d] what am i doing wrong in netscape 6.x and mac IE?

Sent by Andrew Clover on 28 January 2002 15:03

Fortune Elkins [EMAIL-REMOVED]> wrote:

> hiya!

Why hello, Fortune Elkins!

> could you kind souls suggest what i'm doing wrong? <grin>

Right, lets attack the problems one at a time then.

1. Mozilla/N6 shows the left column without its colour. This is because
you (or TopStyle) have specified the background-position (inside a
'background:' shortcut) as 'left 50%'.

This isn't valid. background-position may be specified as measurements
('0% 50%') or keywords ('center left'), but not as a mixture. Also, the
top/center/bottom position must come before left/center/right.

2. Opera and the Mozilloid browsers don't indent the text. This is because
your leftdiv is floated to the left of the text. The left margin and
padding on the headings and p.rights is there, it's just underneath the
floated element. IE's implementation is wrong.

Simple fix is to give #contentdiv a left-margin equal to the size of the
floated element (200px). You might also want to replace the 'width'
specification with a 'margin-right' so it always fits the space properly.

3. Opera doesn't show the "BREADCOFFEE" graphic. This seems to be a bug,
it's positioning the floated left div on top of it.

Easily worked around, though, give #headdiv a 'z-index: 1'.

4. Opera 6 positions the first heading too high up. I think this is a
bug, but the CSS rules on how top and bottom margins behave and collapse
across nested elements are complicated and not how any sane person would
think so who knows, Opera could be right.

I tend to make sure the top margin of the first element in a block and
the bottom margin of the last element in a block are zero to avoid
problems. Top and bottom padding is *much* more reliable.

5. Moz and Opera don't make the left column stretch to match the height of
the content div. Actually I think IE6 would behave the same way if you gave
the document a full DOCTYPE to force it into Standards Mode.

CSS does not allow you to set an element's height as a percentage of its
parent unless that parent is explicitly sized. Of course you cannot set an
explicit 'height' on the parent on your page because you need it to grow
to match its content. Unless you know the exact height you want in advance,
trying to get two 'column' elements to match each other's height is a
non-starter in CSS. (Though IE5 allows it, and I seem to remember there was
a way to fool Mozilla into doing it.) Setting elements' sizes dependent
on other elements' sizes is a big weak spot in CSS, compared to tables.

Luckily you don't need to use a second column div to get the left-area
effect you are after. You can just use a background image on a parent of
the content div (eg. rightdiv), positioned left and only vertically
repeating. The column border effect is trickier, but you can do it by
putting the left and right border edges as part of the background image,
and putting a top and bottom border image, aligned left, just before and
after contentdiv.

HTH. I'm, erm, not wonderfully impressed with TopStyle if that's the
kind of output you get from it! I mean, what's with all the 'voice-family'
nonsense all over the place? (It doesn't seem to be a Tantek hack.)

Andrew Clover
Previous Message
Next Message

Message thread: