IE rendering of text next to floating block

Hi all,

I have some text in a div, which is next to a floating div,
containing a block. I set a left margin on the div with the
text, to avoid flowing under the floating div.
Now the text gets pushed slightly to the right, but only
when next to the block. Below that level, it's further to
the left.
http://home.tiscali.nl/~elizabeth/test-3.html
Is this normal for IE and do I have to live with it, or is
there something I can do about it?
I have tried absolute positioning the content div, which
works to solve this, but then I can't find a way to position
the bottom div at the bottom of the document.
http://home.tiscali.nl/~elizabeth/test-4.html

Another thing: I found that Opera (7.23) has a different
idea about the position of the hover effect on the menu.
Apparently, it 'counts' the distance of the absolutely
positioned element (span) not from the relatively positioned
parent element (menu), but from the also relatively
positioned 'grand-parent' element (container), or maybe even
the canvas.
Did I do something wrong, or is Opera just rendering
differently from IE and Moz?

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Els

Els <> wrote:

>I have some text in a div, which is next to a floating div,
>containing a block. I set a left margin on the div with the
>text, to avoid flowing under the floating div.
>Now the text gets pushed slightly to the right, but only
>when next to the block. Below that level, it's further to
>the left.
>http://home.tiscali.nl/~elizabeth/test-3.html
>Is this normal for IE and do I have to live with it, or is
>there something I can do about it?

Yes, it's normal for IE. It's called the '3 pixel jog' bug.
Under some cicumstancs it's fixable.
See http://www.positioniseverything.net/...reepxtest.html

>Another thing: I found that Opera (7.23) has a different
>idea about the position of the hover effect on the menu.
>Apparently, it 'counts' the distance of the absolutely
>positioned element (span) not from the relatively positioned
>parent element (menu), but from the also relatively
>positioned 'grand-parent' element (container), or maybe even
>the canvas.
>Did I do something wrong, or is Opera just rendering
>differently from IE and Moz?

Opera doesn't think that div.menu can be both positioned and floated.
As the float is specified second it floats it and ignores the
position: relative;

I'm not sure if this is justifiable from the specs, but it has a
certain logic. Positioning and floating are very different things are
can rarely be used at the same time; the fact that all you want to do
is set position: relative to act as an base for future positioning
makes this frustrating.

I'd remove the position: relative; from div.menu, and adjust the
div.menu a:hover span to use top:14em; Now O7 and IE6 display the
hover messages in the same location.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

Steve Pugh wrote:

> Els <> wrote:
>
>>I have some text in a div, which is next to a floating div,
>>containing a block. I set a left margin on the div with the
>>text, to avoid flowing under the floating div.
>>Now the text gets pushed slightly to the right, but only
>>when next to the block. Below that level, it's further to
>>the left.
>>http://home.tiscali.nl/~elizabeth/test-3.html
>>Is this normal for IE and do I have to live with it, or is
>>there something I can do about it?
>
> Yes, it's normal for IE. It's called the '3 pixel jog' bug.

That's a relieve

> Under some cicumstancs it's fixable.
> See http://www.positioniseverything.net/...reepxtest.html

I'll have a look there, thanks.

>>Another thing: I found that Opera (7.23) has a different
>>idea about the position of the hover effect on the menu.
>>Apparently, it 'counts' the distance of the absolutely
>>positioned element (span) not from the relatively positioned
>>parent element (menu), but from the also relatively
>>positioned 'grand-parent' element (container), or maybe even
>>the canvas.
>>Did I do something wrong, or is Opera just rendering
>>differently from IE and Moz?
>
> Opera doesn't think that div.menu can be both positioned and floated.
> As the float is specified second it floats it and ignores the
> position: relative;
>
> I'm not sure if this is justifiable from the specs, but it has a
> certain logic. Positioning and floating are very different things are
> can rarely be used at the same time; the fact that all you want to do
> is set position: relative to act as an base for future positioning
> makes this frustrating.
>
> I'd remove the position: relative; from div.menu, and adjust the
> div.menu a:hover span to use top:14em; Now O7 and IE6 display the
> hover messages in the same location.

Thanks a lot!
Works now

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Steve Pugh wrote:

> Els <> wrote:
>
>>Did I do something wrong, or is Opera just rendering
>>differently from IE and Moz?
>
> Opera doesn't think that div.menu can be both positioned and floated.
> As the float is specified second it floats it and ignores the
> position: relative;
>
> I'm not sure if this is justifiable from the specs, but it has a
> certain logic. Positioning and floating are very different things are
> can rarely be used at the same time; the fact that all you want to do
> is set position: relative to act as an base for future positioning
> makes this frustrating.
>
> I'd remove the position: relative; from div.menu, and adjust the
> div.menu a:hover span to use top:14em; Now O7 and IE6 display the
> hover messages in the same location.

As I said in my previous post, I did what you said, and all
was fine.
Until I put a background color on the container div... all
floating elements disappeared in IE.
Looked it up through Google, and the only 'bug-repair' I
could find that works, is putting position:relative on all
floating elements.
But as I can't put that on the div.menu, I can't see the
menu at all.
http://home.tiscali.nl/~elizabeth/test-5.html
So I thought of position:absolute, and have it use top:11em,
and it all works. Opera, Mozilla and IE display the whole
page as intended.
http://home.tiscali.nl/~elizabeth/test-6.html
It's just, that the other day, I noticed, that absolute
positioning inside another absolute positioned element,
doesn't do what I want in Safari...

Do you (or anyone else) know if that is wrong, or avoidable?
And could anyone with a Safari browser please check for me?

Thanks.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Els wrote:

> Steve Pugh wrote:
>
>> Els <> wrote:
>>
>> I'd remove the position: relative; from div.menu, and adjust the
>> div.menu a:hover span to use top:14em; Now O7 and IE6 display the
>> hover messages in the same location.
>
>
> As I said in my previous post, I did what you said, and all was fine.
> Until I put a background color on the container div... all floating
> elements disappeared in IE.
> Looked it up through Google, and the only 'bug-repair' I could find that
> works, is putting position:relative on all floating elements.
> But as I can't put that on the div.menu, I can't see the menu at all.
> http://home.tiscali.nl/~elizabeth/test-5.html
> So I thought of position:absolute, and have it use top:11em, and it all
> works. Opera, Mozilla and IE display the whole page as intended.
> http://home.tiscali.nl/~elizabeth/test-6.html
> It's just, that the other day, I noticed, that absolute positioning
> inside another absolute positioned element, doesn't do what I want in
> Safari...

So.. I found a way (thanks to evolt.org) to avoid using
positioning on the div.menu. I set a width on the container
div.
http://home.tiscali.nl/~elizabeth/test-7.html
And now the background-color of the <p> doesn't come through...
Until -with the local file- I resize the window or touch the
menu. (but only comes up partly: top 5 lines don't have
background-color)
or -with the uploaded file- until I 'wipe' it with
another window...

I did hear about the peek-a-boo bug, but this isn't anything
floating or text disappearing, but the background-color...

Sometimes I think tables are a lot easier, and they can be
pretty liquid too...

> Do you (or anyone else) know if that is wrong, or avoidable?
> And could anyone with a Safari browser please check for me?

So what is better? Using width on the container div and have
probs with background-colors, or using position:absolute on
the menu div and not knowing what Safari does with it?


--
Els

Mente humana é como pára-quedas; funciona melhor aberta.