Bug in 'page' view using box model

Hi Thomas

Ok. Thanks for that. Did you see my first reply to you? I sent two messages to you.

Mark


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

Hi Mark,

either remove leading or define leading in % (Percent) instead of Pixels. This should work. As default setting it is giving me percent, so I do it in percent.

Cheers

Thomas


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

Thomas, it’s been my experience that leading in percentage fails
dramatically in Windows browsers. The only thing that is not pixels
but is cross-browser compatible is multipliers, but Freeway doesn’t
support that. Anything you enter without a unit in the “leading” box
in the Style editor it assumes is a percentage. The line-height
setting 1.1 becomes 1.1% which is assuredly not what you expected.
Naturally, you could use the Extended interface, and enter

  • Name: line-height
  • Value: 1.1

Walter

On May 23, 2011, at 11:37 AM, Thomas Kimmich wrote:

Hi Mark,

either remove leading or define leading in % (Percent) instead of
Pixels. This should work. As default setting it is giving me
percent, so I do it in percent.

Cheers

Thomas


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

@Mark

Typically that styling you’ve added to the ‘p’ tag should go in a ‘body’ tag. Unfortunately you have to create this tag manually, but that way works best whenever I build a website and is typically how it is done. ‘body’ and ‘p’ tags are important to set as they do effect every page on your site and they do not be applied as they are both globally understood tag styles.

I would also recommend setting your leading (again line-height) in a pixel based amount rather than percentages and I agree with Waltd on that.


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

On 23 May 2011, 3:47 pm, waltd wrote:

Thomas, it’s been my experience that leading in percentage fails dramatically in Windows browsers.

Hi Walter,

thanks for clarifying - yes I read this often, however I hadn’t have any problems yet.

Using extended and value-pair doesn’t effect this stairstepping so this is a just work.

However I wonder, why I never run into this?

The answer is, that I yet never came to the idea, to apply a page-wide style via inspector. If I use the style and apply all settings as written above, it’s all OK including the line-height setting “19px” and all is looking WYSIWYG.

I’m not sure what could be the advantage to apply a named style (paragraph) via inspector as basic page-wide style. So - do I miss here something?

Style and stuff is a seven seal topic to me yet and its proper use sometimes dizzying. So every pointing is more than helpful.

Cheers

Thomas


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

Dan, btw - if you create a body style and apply “px” to leading, it happens the same (stairstepping) as if you would do with a normal named style applied.

Only the p-Tag prevents you from this (assumed I understood this thread anyway)

This is just for the protocol.

Cheers

Thomas


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

Well, I think why I choose to set it in the “p” tag is so anything that is within a “p” tag will have that line-height rather then setting it in the “body” tag which forces everything to have the same line-height setting. Even the h1, h2, h3 tags etc will have that same line-height if set it in the “body” tag and I’ve never had an instance where it was universally accepted throughout.

Sure it brings on more work, but you would have to customize them anyways which is more of a benefit of starting with the “p” tag and working out since often you have more actual paragraph like text on your site versus header content.


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

How do I create a body tag?

In Edit Styles window > Tag options > there isn’t the option for a “body” tag.

Why would I want to create a body tag? I can style the p tag exactly as I want it and it gets automatically applied to all my text. Which is great, because there is a lot more body text (p tag) then headings.

If I did create a body tag (for body text), what would I apply the p tag to? Presumably it becomes redundant.

Thanks

Mark


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

Thomas

Dan, btw - if you create a body style and apply “px” to leading, it happens the same (stairstepping) as if you would do with a normal named style applied. Only the p-Tag prevents you from this (assumed I understood this thread anyway)

The problem with stair stepping only occurs if the p tag is applied to the page (using the Style Inspector)… or presumably any paragraph style.

It seems that there is no point in applying the p tag to a page, because it automatically gets applied to text anyway. I obviously applied it in error. I’m not sure why anyone would want to apply another style to a page, and if they did, would they also get the stepping?


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

While I agree with all of the discussion about P and BODY tags so far,
I cannot concur that the way you get a stair-step is exclusively
linked to this setting or its application. In a completely vanilla,
default Freeway Pro 5.5 document, you can get the stair-step by
following these steps (as I noted earlier in this thread):

  1. Draw an HTML box, double-click inside it.
  2. Insert / Graphic Item, Insert / HTML Item, Insert / Graphic Item,
    Insert / HTML item.
  3. Go back through all of those elements and set them to float left.
  4. Instant stairs.

  5. Preview in a browser.
  6. Straight top.

Walter

On May 24, 2011, at 6:40 AM, Mark wrote:

Thomas

Dan, btw - if you create a body style and apply “px” to leading, it
happens the same (stairstepping) as if you would do with a normal
named style applied. Only the p-Tag prevents you from this (assumed
I understood this thread anyway)

The problem with stair stepping only occurs if the p tag is applied
to the page (using the Style Inspector)… or presumably any
paragraph style.

It seems that there is no point in applying the p tag to a page,
because it automatically gets applied to text anyway. I obviously
applied it in error. I’m not sure why anyone would want to apply
another style to a page, and if they did, would they also get the
stepping?


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

Why would I want to create a body tag? I can style the p tag exactly as I want it and it gets automatically applied to all my text. Which is great, because there is a lot more body text (p tag) then headings.

Body tags you have create through Freeway manually, which doesn’t make much sense. You would open your styles window there and click the + and then in the TAG field you would enter in “body” (without quotes) and then go through and enter in the properties and values (font, font size, color) and then in your “p” tag you would have just the text alignment and the default leading.

I have a screencast in my store about creating a body tag:

http://danjasker.com/store/fw6Bc


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

Hi Walter

In a completely vanilla, default Freeway Pro 5.5 document, you can get the stair-step by following these steps (as I noted earlier in this thread):

That’s interesting. I’ve opened a new document and don’t get this problem. I’ve also removed the paragraph style from the page and the problem has disappeared. I therefore thought the problem was linked to styles applied to pages.

Can someone from FW look into this?

The stepping makes using inflow items (visually) difficult.

Mark


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

Okay, try this, then:

Draw HTML Item, double-click inside it. Insert / HTML Item. Click on
it, make it float left. Double-click in the outer box, Insert /
Graphic Item. Click once on the Graphic Item, make it Align Left.
Double-click next to it in the outer HTML box. Insert / HTML Item.
(Instant Step Down, no way to fix it ever.)

Walter

On May 24, 2011, at 2:55 PM, Mark wrote:

Hi Walter

In a completely vanilla, default Freeway Pro 5.5 document, you can
get the stair-step by following these steps (as I noted earlier in
this thread):

That’s interesting. I’ve opened a new document and don’t get this
problem. I’ve also removed the paragraph style from the page and the
problem has disappeared. I therefore thought the problem was linked
to styles applied to pages.

Can someone from FW look into this?

The stepping makes using inflow items (visually) difficult.

Mark


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

On 24 May 2011, 7:54 pm, waltd wrote:

Okay, try this, then:

Draw HTML Item, double-click inside it. Insert / HTML Item. Click on
it, make it float left. Double-click in the outer box, Insert /
Graphic Item. Click once on the Graphic Item, make it Align Left.
Double-click next to it in the outer HTML box. Insert / HTML Item.
(Instant Step Down, no way to fix it ever.)

Walter

It’s the process of adding additional boxes later that makes this appear. Interestingly, if you only set the first insert box to float left and leave the subsequent boxes set to none you get the same effect as when you insert multiple html boxes back to back and apply float left to them all.


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

Right, but make sure in this instance that you are inserting the correct type of item. First is an HTML item and the second is a Graphic item which does cause the extra gap due to them being totally different items. If you inserted only HTML items then you would not see this gap but mixing elements causing the extra gap in the spacing.

In some instances though, again that’s some instances, you almost have to over HTML item (or over box) to make sure that the placement stays in tact. Some people in the web world call this “div-divitis” which is an over usage of HTML items within a typical box-model style web layout.


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

You can see why Freeway is doing this if you display invisibles (View > Invisibles) and take a look at the generated source code for the items.

Here’s an example showing three inline boxes; two html items and a graphic item wedged between them;

<div id="item4" class="f-x3" style="position:relative; float:left; width:100px; height:100px; background-color:#0f0; font-size:1px">
</div>
<p class="f-fp"><img src="Resources/untitl3.gif" border=0 width=100 height=100 alt="item3" style="float:left"></p>
<div id="item2" class="f-x3" style="position:relative; float:left; width:100px; height:100px; background-color:#00f; font-size:1px">
</div>

You can see the html items are standard divs but the graphic item is an image wrapped in a p tag. It is this block level item that is forcing the remaining content down the page. If the paragraph were removed, or styled as an inline item, or even floated left (rather than the enclosed graphic) then the stepping would disappear.

Personally I tend to construct any inflow layouts like this using only html items and then insert graphic items into them if needed. This provides me the flexibility of defining item dimensions as either fixed or fluid as needed.

Regards,
Tim.

On 24 May 2011, at 20:54, Walter Davis wrote:

Draw HTML Item, double-click inside it. Insert / HTML Item. Click on it, make it float left. Double-click in the outer box, Insert / Graphic Item. Click once on the Graphic Item, make it Align Left. Double-click next to it in the outer HTML box. Insert / HTML Item. (Instant Step Down, no way to fix it ever.)

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.

Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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

On May 25, 2011, at 5:52 AM, Tim Plumb wrote:

Personally I tend to construct any inflow layouts like this using
only html items and then insert graphic items into them if needed.
This provides me the flexibility of defining item dimensions as
either fixed or fluid as needed.

This is a very good idea, but it breaks the mental model of Freeway,
which doesn’t expect you to know these sorts of hidden details, or
even understand the difference between a P and a DIV. It seems to me
that if an image is positioned within a group of block-level peers, it
should either be generated as a bare image, or as a div-wrapped image,
or the P should be set to float along with its contents. In the
Freeway interface, it seems as though the DIV and IMG elements are
peers – there is no hint given of the P to come. They ought to be
treated as equals then in that case.

Walter


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

That would be hard though to program, I think, because how would it know if a graphic item was inserted into a box container or just inserted into a line of text and have the image floated left or right.

Course that’s why SP recommends the RPL action so you don’t have to know these things, although I’m finding and telling others it’s easier to just learn box-model layout design anyways.


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

Remember that Freeway layouts exist as object models, entirely removed
from any notion of HTML or the resulting DOM. Freeway does
considerable algorithmic work to dumb down this model into valid HTML
code, which is why the same layout, with one change of the HTML Level
picker, can be exported as buzzword-compliant XHTML Strict or HTML 3.2
with (gasp) font tags. No difference to you in the design view.

Not that difficult at all (IMO) to ask a fwImage instance to consider
its neighbors before deciding what sort of HTML element to become.
It’s not like this is Dreamweaver or the like.

Walter

On May 25, 2011, at 10:01 AM, Dan J wrote:

That would be hard though to program, I think, because how would it
know if a graphic item was inserted into a box container or just
inserted into a line of text and have the image floated left or right.

Course that’s why SP recommends the RPL action so you don’t have to
know these things, although I’m finding and telling others it’s
easier to just learn box-model layout design anyways.


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