annotation doesn't float in IE

[Xah Lee]

i have a very simple html doc using the following style:

<style type="text/css">
..x-note {background-color:#afeeee; margin:1ex; padding:1ex;
float:right; line-height:130%; width:60ex; clear:both;}
p {line-height:130%; width:70ex;}
</style>

typically, the <p> is main text of novels, and in between is <div
class=x-note>...</div> that are annotations floating on the right side.

My problem is that in Microsoft IE under Windows XP the annotation does
not seems to float. That is, on its left side are huge gaps of
blankness.

Firefox browser is fine as well as other browsers in Mac. (but i'm
concerned with IE as it's got ~80% users)

what could cause the problem in IE?
here's page in question:

http://xahlee.org/p/george_orwell_english.html

Thanks.

Xah
xah@xahlee.org
∑ http://xahlee.org/

[Evertjan.]

Re: annotation doesn't float in IE

Xah Lee wrote on 12 jul 2005 in comp.infosystem s.www.authoring.stylesheets:
[color=blue]
> i have a very simple html doc using the following style:
>
> <style type="text/css">
> .x-note {background-color:#afeeee; margin:1ex; padding:1ex;
> float:right; line-height:130%; width:60ex; clear:both;}
> p {line-height:130%; width:70ex;}
> </style>
>
> typically, the <p> is main text of novels, and in between is <div
> class=x-note>...</div> that are annotations floating on the right side.
>
> My problem is that in Microsoft IE under Windows XP the annotation does
> not seems to float. That is, on its left side are huge gaps of
> blankness.
>
> Firefox browser is fine as well as other browsers in Mac. (but i'm
> concerned with IE as it's got ~80% users)
>
> what could cause the problem in IE?
> here's page in question:
> http://xahlee.org/p/george_orwell_english.html
>[/color]

Put the <div> inside the <p></p> and not in the gap </p> <p>

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Els]

Re: annotation doesn't float in IE

Evertjan. wrote:
[color=blue]
> Xah Lee wrote on 12 jul 2005 in comp.infosystem s.www.authoring.stylesheets:
>[color=green]
>> i have a very simple html doc using the following style:
>>
>> <style type="text/css">
>> .x-note {background-color:#afeeee; margin:1ex; padding:1ex;
>> float:right; line-height:130%; width:60ex; clear:both;}
>> p {line-height:130%; width:70ex;}
>> </style>
>>
>> typically, the <p> is main text of novels, and in between is <div
>> class=x-note>...</div> that are annotations floating on the right side.
>>
>> My problem is that in Microsoft IE under Windows XP the annotation does
>> not seems to float. That is, on its left side are huge gaps of
>> blankness.
>>
>> Firefox browser is fine as well as other browsers in Mac. (but i'm
>> concerned with IE as it's got ~80% users)
>>
>> what could cause the problem in IE?
>> here's page in question:
>> http://xahlee.org/p/george_orwell_english.html
>>[/color]
>
> Put the <div> inside the <p></p> and not in the gap </p> <p>[/color]

A <div> inside a <p>? You do know that that is the end of the <p> when
you start a <div> right?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Re: annotation doesn't float in IE

Xah Lee wrote:
[color=blue]
> i have a very simple html doc using the following style:
>
> <style type="text/css">
> .x-note {background-color:#afeeee; margin:1ex; padding:1ex;
> float:right; line-height:130%; width:60ex; clear:both;}
> p {line-height:130%; width:70ex;}
> </style>
>
> typically, the <p> is main text of novels, and in between is <div
> class=x-note>...</div> that are annotations floating on the right side.
>
> My problem is that in Microsoft IE under Windows XP the annotation does
> not seems to float. That is, on its left side are huge gaps of
> blankness.[/color]
[color=blue]
> http://xahlee.org/p/george_orwell_english.html[/color]

It's because you set the width of the <p> element. IE respects that
width, and will only float the .x-note if it fits alongside a 70ex
wide p.
Solution: set the 70ex width on the body, not on the individual <p>
elements.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Xah Lee]

Re: annotation doesn't float in IE

[color=blue]
> It's because you set the width of the <p> element. IE respects that
> width, and will only float the .x-note if it fits alongside a 70ex
> wide p.[/color]

Ah, that's why. Thanks! I tested with Opera and indeed Opera behaves
the same as IE.
[color=blue]
> Solution: set the 70ex width on the body, not on the individual <p>
> elements.[/color]

you mean <body style="width:70 ex">?

that seems to limit the entire page's width, including moving all
floats to the left so that there's nothing beyond 70ex.

Xah
xah@xahlee.org
∑ http://xahlee.org/



Els wrote:[color=blue]
> Xah Lee wrote:
>[color=green]
> > i have a very simple html doc using the following style:
> >
> > <style type="text/css">
> > .x-note {background-color:#afeeee; margin:1ex; padding:1ex;
> > float:right; line-height:130%; width:60ex; clear:both;}
> > p {line-height:130%; width:70ex;}
> > </style>
> >
> > typically, the <p> is main text of novels, and in between is <div
> > class=x-note>...</div> that are annotations floating on the right side.
> >
> > My problem is that in Microsoft IE under Windows XP the annotation does
> > not seems to float. That is, on its left side are huge gaps of
> > blankness.[/color]
>[color=green]
> > http://xahlee.org/p/george_orwell_english.html[/color][/color]

[color=blue]
> It's because you set the width of the <p> element. IE respects that
> width, and will only float the .x-note if it fits alongside a 70ex
> wide p.
> Solution: set the 70ex width on the body, not on the individual <p>
> elements.
>
> --
> Els http://locusmeus.com/
> Sonhos vem. Sonhos vão. O resto é imperfeito.
> - Renato Russo -[/color]

[Els]

Re: annotation doesn't float in IE

Xah Lee wrote:[color=blue]
> Els wrote:[color=green]
>> Xah Lee wrote:
>>[color=darkred]
>>> My problem is that in Microsoft IE under Windows XP the annotation
>>> does not seems to float. That is, on its left side are huge gaps
>>> of blankness.[/color]
>>[color=darkred]
>>> http://xahlee.org/p/george_orwell_english.html[/color][/color]
>[color=green]
>> It's because you set the width of the <p> element. IE respects that
>> width, and will only float the .x-note if it fits alongside a 70ex
>> wide p. Solution: set the 70ex width on the body, not on the
>> individual <p> elements.[/color]
>
> Ah, that's why. Thanks! I tested with Opera and indeed Opera
> behaves the same as IE.
>[color=green]
>> Solution: set the 70ex width on the body, not on the individual <p>
>> elements.[/color]
>
> you mean <body style="width:70 ex">?[/color]

Yes.
[color=blue]
> that seems to limit the entire page's width,[/color]

I thought that's what you were after?
[color=blue]
> including moving all floats to the left so that there's nothing
> beyond 70ex.[/color]

If you mean that the right floats seem to be moved to the left,
they're not. They're just too wide to leave any space to the left of
them I guess?

I have no idea what you want the page to look like really, so I just
went by the way it looked in Firefox. And how that looks is entirely
dependent on the width of my browser. Is that what you're after? That
could get a bit complicated for IE really, because as soon as you set
a width or height to any container, it turns into a block in IE. For
the floats to stick out to the right, and also dependent on window
width, you would need some clever positioning.

Or do you just want the floats to be positioned to the right of the
text entirely? (which in Firefox only happens when the window is wider
than 70ex plus the width of the float)


--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Xah Lee]

Re: annotation doesn't float in IE

i just want how it looks currently in Firefox. (or on the Mac, Safari,
Firefox/Camino, iCab).

the paragraphs should be 70 ex, left aligned. The annotation should be
60ex, and float on the right. When the window width is less than 130ex,
there the annotation should float on top of the paragraphs, and the
texts in paragraphs effectly flow around the annotation.

This is a screeshot of the desired look it Mac iCab:

http://xahlee.org/p/x.png

i didn't think this very demanding?

if i put a <body style="width:70 ex">, then every content on the page is
moved inside 70ex to the left, so that there's nothing on the right
side after 70ex, regardless how large is the window. This is not
desired result....

Set your window with to 1024 pixels width...

Xah
xah@xahlee.org
∑ http://xahlee.org/

Els wrote:[color=blue]
> Xah Lee wrote:[color=green]
> > Els wrote:[color=darkred]
> >> Xah Lee wrote:
> >>
> >>> My problem is that in Microsoft IE under Windows XP the annotation
> >>> does not seems to float. That is, on its left side are huge gaps
> >>> of blankness.
> >>
> >>> http://xahlee.org/p/george_orwell_english.html[/color]
> >[color=darkred]
> >> It's because you set the width of the <p> element. IE respects that
> >> width, and will only float the .x-note if it fits alongside a 70ex
> >> wide p. Solution: set the 70ex width on the body, not on the
> >> individual <p> elements.[/color]
> >
> > Ah, that's why. Thanks! I tested with Opera and indeed Opera
> > behaves the same as IE.
> >[color=darkred]
> >> Solution: set the 70ex width on the body, not on the individual <p>
> >> elements.[/color]
> >
> > you mean <body style="width:70 ex">?[/color]
>
> Yes.
>[color=green]
> > that seems to limit the entire page's width,[/color]
>
> I thought that's what you were after?
>[color=green]
> > including moving all floats to the left so that there's nothing
> > beyond 70ex.[/color]
>
> If you mean that the right floats seem to be moved to the left,
> they're not. They're just too wide to leave any space to the left of
> them I guess?
>
> I have no idea what you want the page to look like really, so I just
> went by the way it looked in Firefox. And how that looks is entirely
> dependent on the width of my browser. Is that what you're after? That
> could get a bit complicated for IE really, because as soon as you set
> a width or height to any container, it turns into a block in IE. For
> the floats to stick out to the right, and also dependent on window
> width, you would need some clever positioning.
>
> Or do you just want the floats to be positioned to the right of the
> text entirely? (which in Firefox only happens when the window is wider
> than 70ex plus the width of the float)
>
>
> --
> Els http://locusmeus.com/
> Sonhos vem. Sonhos vão. O resto é imperfeito.
> - Renato Russo -[/color]

[Els]

Re: annotation doesn't float in IE

Xah Lee wrote:[color=blue]
> Els wrote:[color=green]
>> Xah Lee wrote:[color=darkred]
>>> Els wrote:
>>>> Xah Lee wrote:
>>>>
>>>>> http://xahlee.org/p/george_orwell_english.html[/color][/color][/color]

Please stop topposting, it's weird to read upside down and mixed.
Also, please snip my signature, it's not part of the message.

[setting width to body not having desired effect]
[color=blue][color=green]
>> I have no idea what you want the page to look like really, so I just
>> went by the way it looked in Firefox. And how that looks is entirely
>> dependent on the width of my browser. Is that what you're after? That
>> could get a bit complicated for IE really, because as soon as you set
>> a width or height to any container, it turns into a block in IE. For
>> the floats to stick out to the right, and also dependent on window
>> width, you would need some clever positioning.[/color]
>
> i just want how it looks currently in Firefox. (or on the Mac, Safari,
> Firefox/Camino, iCab).
>
> the paragraphs should be 70 ex, left aligned. The annotation should be
> 60ex, and float on the right. When the window width is less than 130ex,
> there the annotation should float on top of the paragraphs, and the
> texts in paragraphs effectly flow around the annotation.
>
> This is a screeshot of the desired look it Mac iCab:
> http://xahlee.org/p/x.png
>
> i didn't think this very demanding?[/color]

It is, for IE.
The closest thing without a lot of trouble, would be setting a
margin-right on the <p> element, in percentage probably, but that
means flexible width of the <p> element too, no set width in ex.

The "clever positioning" I mentioned btw, is possible with images
floated to the left. But as the floats here are both to be floated to
the right, and also equally liquid as any other text, I'm not even
sure it's doable.
[color=blue]
> if i put a <body style="width:70 ex">, then every content on the page is
> moved inside 70ex to the left, so that there's nothing on the right
> side after 70ex, regardless how large is the window. This is not
> desired result....
>
> Set your window with to 1024 pixels width...[/color]

You'll have to make a choice for IE:
a) have white space to the left of the floats
b) have flexible width paragraphs (either extending to the right, or
with a margin
c) have a fixed width page (either stuck to the left (ugly imo) or
centered.

(I may have forgotten some other option)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Xah Lee]

Re: annotation doesn't float in IE

> > i didn't think this very demanding?[color=blue]
>
> It is, for IE. [and Opera, which behave different than Safari, FireFox, iCab, on a simple floating behavior of CSS][/color]

Egad, why is technology so complexly fucked up.

I think the behavior of IE and Opera is wrong. If one wants their
current behavior of not having things floating above them, one'd put
the "clear:both ".

....Thanks for the suggested workarounds anyway.

Xah
xah@xahlee.org
∑ http://xahlee.org/

[Els]

Re: annotation doesn't float in IE

Xah Lee wrote:
[color=blue][color=green][color=darkred]
>>> i didn't think this very demanding?[/color]
>>
>> It is, for IE. [and Opera, which behave different than Safari, FireFox, iCab, on a simple floating behavior of CSS][/color]
>
> Egad, why is technology so complexly fucked up.
>
> I think the behavior of IE and Opera is wrong.[/color]

That's just IE, really. Opera gets it right as soon as you replace
your current doctype with a Strict one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Xah Lee]

Re: annotation doesn't float in IE

Thanks for this great tip. I'll use it as my final workaround. (too bad
for IE on the WindowsXP...)

Xah
xah@xahlee.org
∑ http://xahlee.org/

Els wrote:[color=blue]
> Xah Lee wrote:
>[color=green][color=darkred]
> >>> i didn't think this very demanding?
> >>
> >> It is, for IE. [and Opera, which behave different than Safari, FireFox, iCab, on a simple floating behavior of CSS][/color]
> >
> > Egad, why is technology so complexly fucked up.
> >
> > I think the behavior of IE and Opera is wrong.[/color]
>
> That's just IE, really. Opera gets it right as soon as you replace
> your current doctype with a Strict one:
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
> --
> Els http://locusmeus.com/
> Sonhos vem. Sonhos vão. O resto é imperfeito.
> - Renato Russo -[/color]

[Els]

Re: annotation doesn't float in IE

Xah Lee wrote:[color=blue]
> Els wrote:[color=green]
>> Xah Lee wrote:[/color][/color]

Please pay attention to your posting. It should be at the bottom, like
you did in your previous post.
[color=blue][color=green][color=darkred]
>>> I think the behavior of IE and Opera is wrong.[/color]
>>
>> That's just IE, really. Opera gets it right as soon as you replace
>> your current doctype with a Strict one:
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">[/color]
>
> Thanks for this great tip. I'll use it as my final workaround. (too bad
> for IE on the WindowsXP...)[/color]

And for IE on any other Windows system.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Evertjan.]

Re: annotation doesn't float in IE

Els wrote on 12 jul 2005 in comp.infosystem s.www.authoring.stylesheets:
[color=blue][color=green]
>> Put the <div> inside the <p></p> and not in the gap </p> <p>[/color]
>
> A <div> inside a <p>? You do know that that is the end of the <p> when
> you start a <div> right?
>[/color]

Did you try this in the OQ source? I did.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Els]

Re: annotation doesn't float in IE

Evertjan. wrote:
[color=blue]
> Els wrote on 12 jul 2005 in comp.infosystem s.www.authoring.stylesheets:
>[color=green][color=darkred]
>>> Put the <div> inside the <p></p> and not in the gap </p> <p>[/color]
>>
>> A <div> inside a <p>? You do know that that is the end of the <p> when
>> you start a <div> right?
>>[/color]
>
> Did you try this in the OQ source? I did.[/color]

What is 'the OQ source'? I've never heard of it. I just know you can't
put divs inside paragraphs.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Evertjan.]

Re: annotation doesn't float in IE

Els wrote on 12 jul 2005 in comp.infosystem s.www.authoring.stylesheets:
[color=blue]
> Evertjan. wrote:
>[color=green]
>> Els wrote on 12 jul 2005 in comp.infosystem s.www.authoring.stylesheets:
>>[color=darkred]
>>>> Put the <div> inside the <p></p> and not in the gap </p> <p>
>>>
>>> A <div> inside a <p>? You do know that that is the end of the <p> when
>>> you start a <div> right?
>>>[/color]
>>
>> Did you try this in the OQ source? I did.[/color]
>
> What is 'the OQ source'? I've never heard of it.
>[/color]

This is usenet: OQ = original question, the posting posted by the OP.
[color=blue]
> I just know you can't put divs inside paragraphs.[/color]

Did You try?

Of cause you can "do" it.

In the case of a floating div, it even gives a nice result.

Is it "legal"? Perhaps not.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)