On 2007-04-16, Amanda <am*******@gmail.comwrote:
please take a look at:
shannon.amandadevries.com
1. in firefox, the 'content' div should be starting on the right-hand
side of the menublock, not all the way down at the 'copyrightblock'.
what gives?
You've got menublock and copyright block first in the content, these are
both float: left and clear: left, so they stack up on the left one
underneath the other. So far so good. Then content, which is float:
right. The rule is that a float can never go higher than another float
that appears earlier in the document, so content cannot go higher than
copyright block.
Here is the rule, in section 9.5.1 of CSS 2.1:
The outer top [p. 100] of a floating box may not be higher than the
outer top of any block [p. 117] or floated [p. 130] box generated by an
element earlier in the source document.
That's why there's a gap above content. Fix it by moving copyrightblock
down in the HTML source so it's after content.
There's another problem here which you don't get on Firefox or Konqueror
but which you do get on Opera. menublock is width: auto and consists of
a series of left floats. Opera treats its "preferred width" as the sum
of the widths of all those floats, i.e. the width they would occupy if
they were all adjacent to one another horizontally, in spite of the fact
that each one has clear set on it and so could never actually be placed
horizontally adjacent to its predecessor.
The spec doesn't exactly say what to do in this situation-- it doesn't
say anything about how floats affect content minwidths and content
preferred widths, leaving that to the common sense of the implementor. I
think both Opera and Firefox are doing something reasonable here.
Anyway, this results, in Opera, in a computed width value for menublock
equal to the available width since the sum of the widths of the menu
floats inside is greater than the width of the viewport (for viewport
widths in a normal sort of range). This means the menu will always
appear above content, not to the right of it: not what you want.
Since you're setting the width of each menu item anyway to 125px, it is
easy to avoid this altogether just by setting the width of menublock
itself to 125px or so. That way, incidentally, each "menu" item doesn't
even need to be floated or cleared, they can just be normal block boxes
inside the menublock.
2. why is 'container' not being centred in IE? i have a site that is
very similar to this in terms of it CSS, which is correctly centred...
3. why does the content in 'content' repeat itself below the
copyrightblock in IE?
Can't help with your IE problems. You aren't using the strict DOCTYPE
though. Always start your document with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
