nested items and IE6

Freeway
21

Sorry to come back myself on this, but I asked my question also on the EE forum. One of the answers was this:

Quote:" I think you need to take the overflow: auto and position: relative out of the image parent DIV’s, and maybe consider a pure-CSS solution to table-based layout. You’ve floated: right the right container; float: left the left container…

The ugliness you’re see seeing with the images and all comes from the use of overflow: auto and relative positioning, two things which I can’t see why they’re necessary for what appears to be a relatively simple layout. end Quote

I looked in my Freeway page, but the HTML box that contains the EE code that pulls the image has in the Inspector only settings for overflow automatic, scroll, hidden and visible. No setting for “none”. How can I try out this advise? Does it make sense at all?
And what is a pure CSS solution? How do I do that in Freeway?

Post to be found here: Forums | ExpressionEngine

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

22

I disagree with this analysis. Your layout is suffering because the
width is being removed from the floated elements. Floated elements
always collapse to the width of their widest content element, unless
there is no competition for their space in the layout.

If you can’t figure out how to re-introduce the width after it’s been
removed by the conversion to EE template, then try using the
Inspector to add a Clear: both attribute to the left-floated element.
See if that property survives the transition to template. This will
force this element to be the only thing on the line. Then the fact
that it doesn’t have a width might be less of a problem.

Walter

On Apr 13, 2008, at 9:02 AM, atelier wrote:

Sorry to come back myself on this, but I asked my question also on
the EE forum. One of the answers was this:

Quote:" I think you need to take the overflow: auto and position:
relative out of the image parent DIV’s, and maybe consider a pure-
CSS solution to table-based layout. You’ve floated: right the right
container; float: left the left container…

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

23

Hi Walter

Thanks for that. I am sorry, I have very limited knowledge of coding, so maybe It was not quite clear to me what you said before… but suddenly your words made me think.

I have never set any width to the containing element that contains the image. Why? Because I wanted to be free to have 100 or 150 pix width for that image. The width of that image is done in EE, not in FW. Height is free, and also not fixed in the FW page.

So, the conversion to EE template never stripped the width of that element. To prove this, I have fixed now the width (in the FW page) to 150 pix the result can be seen http://www.monumentmaker.nl/tempindex.php/mm/testmm

rendering of the first image:

At home at Els' place.

Widht is there, and as far as I can see, IE6 still renders this not good.

What do you advise me now? Shall I try the clear settings?

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

24

This is not the element I was referring to. I meant the larger box
that contains the image and the text related to it, and which creates
the border around both of those elements.

Walter

On Apr 13, 2008, at 1:44 PM, atelier wrote:

I have never set any width to the containing element that contains
the image. Why? Because I wanted to be free to have 100 or 150 pix
width for that image. The width of that image is done in EE, not in
FW. Height is free, and also not fixed in the FW page.

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

25

That was it! I fixed the width of the box and IE6 now behaves like I want.

I thank you for you patience, and your intention to share your knowledge here. Really, I actually have no words for it…

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

26

Could anyone explain to me the function of the following classes?

.f-sp { font-size:1px; visibility:hidden }
.f-lp { margin-bottom:0px }
.f-fp { margin-top:0px }
.f-x1 { }
.f-x2 { }
.f-x3 { }

Also, do you know what triggers their usage when building a page in the Freeway interface?

Thanks to you all. I love Freeway, and often fall back on it to give me a better starting page when a client requires I build a sight in Dreamweaver.

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

27

On Jan 27, 2012, at 10:43 AM, Bill_McEntee wrote:

Could anyone explain to me the function of the following classes?

.f-sp { font-size:1px; visibility:hidden }

When an image is used as a spacer (in a table or table-based layout) this style is added so that the browser’s default font size (16px) does not force all cells to be at least that height.

.f-lp { margin-bottom:0px }

Last paragraph in any given HTML box will get this style, so that the last line may “snug up” to the bottom of the box, rather than forcing a space below based on the margin-bottom of the last line of text.

.f-fp { margin-top:0px }

First paragraph in any given HTML box. See above.

.f-x1 { }
.f-x2 { }
.f-x3 { }

I believe these are used in the IE compatibility shim, which is conditionally added to the page. Having the styles declared here first allows them to be extended by the IE script even when that script is loaded on the fly after the page has started to load.

Also, do you know what triggers their usage when building a page in the Freeway interface?

They’re all automatic, and depend on the HTML level of the page, whether you’ve elected (in the Page Inspector) to enable certain features, and your particular layout style.

Walter

Thanks to you all. I love Freeway, and often fall back on it to give me a better starting page when a client requires I build a sight in Dreamweaver.

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

28

Wow!!! Mystery solved.

Thanks Walter!!! I rely on Freeway to re-orient me when I get things too messed up in Dreamweaver, so this really helps.

I wish I could put Dreamweaver away entirely, but in the area where I live, Adobe products are required.

Best wishes from rainy, foggy Massachusetts,

Bill McEntee

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