|
|
Posted by JWS on 04/26/07 11:09
Jukka K. Korpela wrote:
>> Unfortunately some of these things (like "no gaps between
>> paragraphs") do not seem to work in IE, so I am looking for
>> work-arounds.
> "No gaps" works well on IE, but you have to be careful with the
> selectors. Setting p { margin: 0; text-indent: 1.3em; } works
> fine.
I found out what was the matter now: as selector I had used the
"its child" property:
div > p {margin: 0;}
but it seems that IE does not understand "its child". So wherever
possible I now avoid "its child"; this cured a few IE problems
(like "no gaps between paragraphs", and the headlines in the white
boxes on my page, which should be centered and bold, but were not
displayed as such by IE). In some other cases I still have to
define a few new classes, as you said, to get the effects I want
(e.g. no gaps between paragraphs which are children of the white
boxes, even on screen).
> What remains is setting text-indent to 0 for the first
> paragraph, and you might use a class for the purpose or just
> let IE up to version 6 display the first paragraph with indent.
Yes.. it also seems IE does not understand the p+p ("two
consecutive paragraphs") selector, which handles the "first
paragraph" problem automatically.
>> But printing the notes belonging to a paragraph actually
>> before the paragraph itself -- that would be a very bad idea
>> IMHO. What would the poor reader think?
> That was my concern too, with the two approaches I suggested,
> considering what happens when style sheets are off.
Right, and also in text browsers such as lynx; that was also my
concern with my original design. It would be better to display the
notes after the paragraph in such cases, preferably preceded by a
warning like "NOTE:"; but it seems there is no reliable media
selector for text browsers. There is @media tty, but lynx at least
does not recognise it.
> I tried various strategies like making the paragraphs floated
> so that a paragraph would precede the side-note. And I almost
> found something working, until I realized that I breaks if the
> side-note is taller than the paragraph.
>> Anyway [..]
> Repeating such things has an adverse effect on your chances of
> getting help. We kinda like to keep this is as a discussion
> forum, not a helpdesk. [..]
You are quite right, I bow my head in shame. I'll try to avoid
this kind of thing in the future. I am anyway very impressed by
this forum.
> Back to the drawing table. Since we're going to need some
> markup anyway to indicate which fragments of texts are
> sidenotes, we might just as well use simple table markup, which
> is rather logical since it expresses the relationships:
> <table> [..]
> Then you could add some CSS to make the presentation nice, e.g.
> [..]
> Demo page: http://www.cs.tut.fi/~jkorpela/test/notes.html
Very nice-looking!
> Now please excuse me white I fetch my asbestos suit and prepare
> to getting flamed for recommending "tables for layout".
I do not have an ideological position in this, but.. tables are so
"square". If a sidenote is taller than its accompanying paragraph,
display of the next paragraph is pushed down until the sidenote
finishes. This is not so nice; sidenotes waste space (or paper)
anyway, and such wastage should not be made worse if it can be
avoided.
With the float element approach on the other hand, available
margin space is used for the long sidenote while the action on the
text side goes on uninterrupted. There are differences in
behaviour between IE and Mozilla if a long sidenote meets another
sidenote, though. Mozilla pushes the next sidenote down, while IE
pushes the text side (plus the sidenote) down.
Jan
Navigation:
[Reply to this message]
|