IE rendering of text next to floating block

E

Els

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?
 
S

Steve Pugh

Els said:
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/explorer/threepxtest.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
 
E

Els

Steve said:
Yes, it's normal for IE. It's called the '3 pixel jog' bug.

That's a relieve :)

I'll have a look there, thanks.
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 :)
 
E

Els

Steve said:
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.
 
E

Els

Els said:
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?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top