nested items and IE6

Situation: Fw page with Expression Engine.

I do have two nested div’s on this page. Settings for both items: “overflow:auto” Yet in IE6 the “mother” div does not grow when the “child” div does (when a large image is inserted)

Testpage to be seen here: http://www.monumentmaker.nl/tempindex.php/mm/g_m/
You’ll notice that in IE6 some of the images grow over the border and even collaps with items below.

(in FW is the page set to “compatible IE6 and 7” if that’s worth something regarding this issue…)

I do not see how to avoid the unwanted effect.
Some help higly appreciated, so many thanks for looking at one of my prblems again…:slight_smile:

(and yes, I know the PNG is ugly in IE6, but what can one do?)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 9 Apr. 2008, 7:36 pm, atelier wrote:

I do have two nested div’s on this page. Settings for both items: “overflow:auto” Yet in IE6 the “mother” div does not grow when the “child” div does (when a large image is inserted)

Are these nested DIVs done as inline elements (click for text cursor, Insert > HTML Item) or are you drawing them on top of each other so they are Absolutely positioned child elements?

If the former, and if the child element is floated, then there’s a great trick to stop this from happening – also float the parent item. It’s like magic. If you are seeing this with absolutely positioned child elements, then I am straight out of ideas here.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for answering.

Yes, the child element is inline. Can I do this another way too, is that what you say?

code like this: (I took out the non-relavant parts like the exact code for the EE tags)

{start EE tag}

{some EE tag = image}

{some EE tag = date}

{some EE tag = title}

{some EE tag=content} {some EE tag = link}

{Some EE tag = pagination and end EEtag}


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It depends on the child elements. If they are all the same size, then
the easiest thing to do would be to draw the child as a positioned
element. Click on the parent DIV so it is selected. Then draw a
second DIV beginning and ending the drag entirely over the parent.
The parent will get a blue selection highlight as you draw,
indicating that it is the parent of the item you are drawing.

But I suspect that the images are all in different sizes, so you need
to have this parent flex to accept them as they come. The trick then
would be to do this:

Make the parent item an inline of a larger outer HTML box, and set it
to Float Left.

Next, make the child item an inline of the parent, and set it to
Float Right (as you have done).

A float inside of a float will always flex the way you need it to
(the inner float will never “peek” out of the bottom of the outer one).

Walter

On Apr 10, 2008, at 3:26 AM, atelier wrote:

Yes, the child element is inline. Can I do this another way too, is
that what you say?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So you mean that I must “wrap” the whole div id=“inhoud” with it’s content inside a larger one, and set div id=“inhoud” float left.

OK, I’ll try.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Right. Also, make note of the fact that if you are looping over a
Freeway-drawn template, you (or the Action you are using) will need
to ensure that there are either unique IDs generated for each
iteration of the template, or remove the ID property entirely.

I haven’t used Joe’s EE Actions, I would imagine that he’s thought of
this, but I wanted to point it out as something to look out for.

I have an Action that strips the ID from the element it’s attached
to. It’s called Anonymous, and it’s in my repository: <http://
freewaypro.com/actions/downloads>

Walter

On Apr 10, 2008, at 9:46 AM, atelier wrote:

So you mean that I must “wrap” the whole div id=“inhoud” with it’s
content inside a larger one, and set div id=“inhoud” float left.

OK, I’ll try.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m afraid now my page is a mess.

What did I do:
1: copy element “inhoud”
delete
place cursor inline main page
insert HTML box name: wrap
place cursor inside wrap to create inline element
paste inhoud

{EEtag open}

{EEtag image}

{EEtag date}

{EEtag title}

{EEtag content} {EEtag link}

{EEtag pagination}

{EEtag close}

result not so good…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

thanks, I use anonimous a lot ! :slight_smile:

(our posts crossed in cyberspace)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

something went wrong in typing:
What did I do:
1: copy element “inhoud”
2) delete
3) place cursor inline main page
4) insert HTML box name: wrap
5) place cursor inside wrap to create inline element
6) paste inhoud

result I’m afraid not so good.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Apr 10, 2008, at 10:01 AM, atelier wrote:

place cursor inline main page

Delete this step. Just draw a normal HTML box ON the page, click
inside that to gain a text cursor, and enter your inhoud box. Set
inhoud to float left, then click inside inhoud and insert your (float
right) graphics box.

I think you had one too many levels of float here.

Other than that, you should be good.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, I made a mistake here. Did set the wrap box float left.
Corrected it, now wrap=float none, inhoud (inside wrap)=float left and: foto (inside inhoud0 = float left.
In Safari it’s OK now again. I must wait for the service to return the result for IE6.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Apr 10, 2008, at 10:07 AM, Walter Lee Davis wrote:

Just draw a normal HTML box ON the page, click
inside that to gain a text cursor, and enter your inhoud box.

Further: note that drawing this box simply sets the top-left corner
of the resulting stack of repeating divs. This box will not have any
height, and will not push anything away below it. The stack of
repeating divs will push out of the bottom of this box for as far as
they need to go.

If you need to add a footer to this page, then you will need to use
the Magic Page DIV as you set out to do, insert your page elements as
inline to the page itself. Can you publish an example of the “not so
good” so I can see it in all its scary non-glory? This should be
possible in Freeway, as it would be fairly trivial in a text editor.

Thanks,

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for all your replies, Walter.

But I am afraid to say that this solution did not help.

You’ll hit the page here:
http://www.monumentmaker.nl/tempindex.php/mm/g_m

and the screenshot for IE6 (took me 1 hor to wait for, the service I use is terribly slow, but what to do, I do not own a PC myself) is to be found here: http://www.atelier.box.nl/haal_op/1042008.png

It’s hopeless, in IE6…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve looked at the page in Xyle scope, and I can see that you did not
end up with the structure I was hoping you would. The DIVs that have
the pale border, which contain and wrap the inline float:right image
and associated text, are not actually floated. They need to be
floated (left or right, it doesn’t matter) in order to keep their
floated contents from floating away. :sunglasses:

You did manage to get the next div up from there, the one that wraps
around the entire collection, to float left, but that’s not what’s
causing the problem for you in IE. You can leave that one the way it
is, but then select the div that creates the bordered box containing
the type and the picture, and float THAT left or right. Then (after a
dignified pause from your screenshot service) you will see the magic
that you hoped for.

Walter

On Apr 10, 2008, at 11:30 AM, atelier wrote:

Thanks for all your replies, Walter.

But I am afraid to say that this solution did not help.

You’ll hit the page here:
http://www.monumentmaker.nl/tempindex.php/mm/g_m

and the screenshot for IE6 (took me 1 hor to wait for, the service
I use is terribly slow, but what to do, I do not own a PC myself)
is to be found here: http://www.atelier.box.nl/haal_op/1042008.png

It’s hopeless, in IE6…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK. I got it.

But now the floating of the inline element causes very strange effects even in Safari…

Structure:
wrap contains inhoud=float-left contains box=float-right contains foto=float-right


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Take a look at this page, it’s precisely what I’m talking about.

http://shiny.walterdavisstudio.com/floats.html

This is hand-coded, just to make it clear what is going on. (Inline
CSS is very hard to read, I think.)

Try starting over on a new page, without any EE repetition going on.
Just draw the outer box, the repeating inline boxes, and the inline
picture boxes and text.

Then go through and set the floats. All pictures float right. All
inline boxes float left. The column should also float left, which
means it needs to be an inline of the page or of an absolutely
positioned parent layer.

Walter

On Apr 10, 2008, at 5:49 PM, atelier wrote:

OK. I got it.

But now the floating of the inline element causes very strange
effects even in Safari…

Structure:
wrap contains inhoud=float-left contains box=float-right contains
foto=float-right


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt

I did exactly as you told. (Thanks for the page)

The result can be seen here:
http://www.monumentmaker.nl/tempindex.php/mm/g_m

What did I do?

I simply copied the block “wrap” and pasted three times (after removing all the EE code). Did not change anything else, because I was pretty sure I did it like you advised me. As you can see these repeating blocks behave like we expect. To make it even more clear, I placed images of different size, just like I want it.

But under these three block is one exactly the same block with floats and all, but now “filled” with content from EE.

I really do not understand why, but this part is really a mess.
Thanks a lot for looking to this problem.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Somehow, the width is getting stripped off of your EE blocks, while
it is plainly there on the manually-drawn blocks. Does your EE Action
strip the dimensions off of things that it turns into templates, maybe?

Walter

On Apr 11, 2008, at 6:35 PM, atelier wrote:

Hi Walt

I did exactly as you told. (Thanks for the page)

The result can be seen here:
http://www.monumentmaker.nl/tempindex.php/mm/g_m

What did I do?

I simply copied the block “wrap” and pasted three times (after
removing all the EE code). Did not change anything else, because I
was pretty sure I did it like you advised me. As you can see these
repeating blocks behave like we expect. To make it even more clear,
I placed images of different size, just like I want it.

But under these three block is one exactly the same block with
floats and all, but now “filled” with content from EE.

I really do not understand why, but this part is really a mess.
Thanks a lot for looking to this problem.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Actually I do not have a clue. There just one more action that I applied there, that is your Anonimous, not quite a suspect of stripping of width…:slight_smile: For exact details of the applied EE actions I could ask Joe Muscara.

Strangely enough the effect that we see now only came up after wrapping the original content and applying a float. Almost the same set up can be seen here, where I have the content put in a table ( just because I wanted other content beside it)
http://www.monumentmaker.nl/tempindex.php/testmm

(I’m sorry to announce that I shall be offline now for at least 20 hours, hope to be able to continue after that)

best regards

Hans


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK. Now I performed another test.
On http://www.monumentmaker.nl/tempindex.php/testmm you’ll see the page.
Renders well in Safari and Firefox on Mac and in IE7. Page is validated, both HTML and CSS. More I cannot do to make it right.

Renders lousy in IE6.

PNG of the page in IE7 here: http://www.atelier.box.nl/haal_op/13-4-2008_testmm_IE7.png

PNG of the page in IE6 here: http://www.atelier.box.nl/haal_op/13-4-2008_testmm_IE6.png

What I would like to see is that this issue is solved by “adding” something in the stylesheet that looks for IE6. Why? I am not capable enough (not even with all the help I can get here) to hack my page in Freeway.

Thanks really a lot for looking at this problem.

best regards

Hans


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options