|
|
Posted by JWS on 04/25/07 12:45
Jukka K. Korpela wrote:
> Scripsit JWS:
>> I make "sidenotes" in a simple html page with the following
>> css: [..]
> Looks OK (using floating), but as usual, a URL would have
> helped to see the technique in action.
OK: http://www.jw-stumpel.nl/stestu.html
Of course the actual css (especially print css) in the page is
more complicated than the simplified example that I posted.
> Justification is seldom justified for web pages. :-) [..]
Depends, I think, on how it is used. In an otherwise uncluttered
design, and with well-chosen line spacing, I rather like it.
Especially for printing. Just a matter of taste, I think.
> [..] and long words easily mess it up. For a narrow sidenote,
> even modestly long words cause too big gaps between words.
True. The <wbr> tag might help (it actually works in IE and in
Mozilla c.s.), but it isn't official html, I understand. I went to
some trouble to make really long words (file pathnames)
"breakable" in my page.
>> This also displays OK in the browsers mentioned, but when
>> printing with IE 6/7 I get:
> [..]The problem seems to be that on printing (or in Print
> Preview), the sidenote does not appear as floating but as
> separate between paragraphs, with empty space on the left of
> it.
Yes, that's it. But only in IE, not in Mozilla c.s. (or Opera).
>> Why does this happen? Any suggestions/tricks to fix this?
> This probably relates to the widths and margins. For example,
> setting width: 70% for the div removes the problem, though it
> changes the layout. I'm not sure I follow your ideas with the
> horizontal spacing and widths, but here's a different approach:
> div#content p {
> width: 74%;
> float: left;
> margin-bottom: 1em;
> text-align: justify; }
> .sidenote {
> float: right;
> clear:right;
> width: 22%; }
This seems to do weird things with the vertical placement of the
sidenotes (completely different weirdnesses with IE and the
Mozilla family BTW). Must investigate further.
Of course I could always put
<!--[if IE]>
<STYLE>
div#content {
text-align: left;
}
</STYLE>
<![endif]-->
giving up my nice justified layout for the IE users..
Thanks very much for your reply
Jan
Navigation:
[Reply to this message]
|