[Pro] Child issues after styling a div with a class

I will be creating a long list of items on a shopping page, and want to be able to make global edits to the divs involved. To do this I have experimented using the extended features of the style menu to specify top and bottom margins and top border, and then applied the style to each entry’s parent div. Margins and border behave as desired.

However, some style characteristics of content in fixed dimension child and grandchild divs inside the class-styled div are altered. Specifically, items that were centered are either now flush left or bleeding left, and a right margin of one of the child elements is not being respected by the first line of type in the primary text element.

As marked in the example I’ve shared, items 1 and 3 have the parent div margins and top border styled with a class (causing problems), and items 2 and 4 with the Inspector showing how I intended things to look. FYI the div containing the tomato icon has a cyan background, showing that its position is correct but the .svg image’s position inside it is not.

Looking at the code, I don’t see any difference to the code defining the divWrapper and .svg of the image for items 1 and 2, so I don’t get why this child code is not trumping the CSS applied to the parent.

http://www.brockmanfamilyfarming.com/plant-start-test


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I am curious as to why you have added the text-indent styling to the Div itself rather than styling the text/paragraph.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

It was unintentional and now removed. Doesn’t seem to have an impact on the issue.

(It was a product of Freeway wiping out the style (class) name I specified at the point I OKed the extension items and replacing it with the first item in my style list, which happened to be a text-indent, my catching the name change and renaming the style, but not catching and removing the styling it added)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

It was unintentional and now removed. Doesn’t seem to have an impact on the issue.

It made a huge difference when I was viewing the page - have you updated the online example?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Yes. I edited the style to delete the -8px text indent and uploaded the page to the server.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Yes. I edited the style to delete the -8px text indent and uploaded the page to the server.

Still seeing the text indent in the code but it could be an agressive cache. How about changing the page name slightly to rule that out.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Added an “s” to “test”

http://www.brockmanfamilyfarming.com/plant-start-tests


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Text indent still there

The view without it

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Duplicated the style, applied it to the divs, deleted the original style, and that got rid of the aggressive cache and the problem.

Many thanks, DD, for your attention to this!

(So I take from this that any formatting of the parent div not explicitly overridden by the formatting of the child div will extend to the child div. And that a text-indent applies not just to text but also to .svg passthrough graphics.)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

(So I take from this that any formatting of the parent div not explicitly overridden by the formatting of the child div will extend to the child div. And that a text-indent applies not just to text but also to .svg passthrough graphics.)

My reckoning is that if you want to style the text in a Div then you do just that and not apply a style that can cascade to everything inside it.

As far as the svg goes if you look closely it will be wrapped in a P tag - another good reason not to use the blanket approach.

Looking at the code, I don’t see any difference to the code defining the divWrapper and .svg of the image for items 1 and 2

You need to look a bit closer - use Safari/Chrome dev tools and you can see exactly what styling is applied.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I’ve silently followed these posts, fiddling a bit with the layout. There’s a lot of extra stuff in the underlying code, presumably because of efforts to realize the layout. I think this is a weakness for users because what works in the Freeway workspace may cause Freeway to create unnecessarily complicated code for the browser… At least this is why I think there are inheritance problems here.

In monkeying around I simplified the code the layout produced and in the process made a nice example of how to use the display:table features of CSS to make grid-like structures that behave like table layouts while not using table elements and allowing for a better semantic structure.

Not everyone’s cup of tea, built with an inflow layout that is flexible and responsive.

http://cssway.thebigerns.com/workbench/css-display-tables/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

How exciting that you’ve been following this and have poured so much thought into it!

FYI I have been building it out (of course, without benefit of knowledge of CSS’s display:table capability) but look forward to looking at the Freeway file you created and diagnosing how it reduces inheritance problems.

As I venture out getting away from WYSIWYG Freeway files by creating classes applied to divs, another problem I have discovered is that FW tends to cache extended code so that when you go back to make an edit to it that will have global impact on every div that has the class applied to it, the edit doesn’t take. I sometimes need to copy the style, then delete the original and replace it with the duplicate to get it to take.

In any case, should you want to check in on how I’ve progressed, the file is at

www.brockmanfamilyfarming.com/teresas-plant-starts.

I still have a ton of items to add. For example, there will be 44 different herb plant starts for sale and 32 heirloom tomatoes (one of five sub-categories of tomato). I’m concerned that the page will get so long that FW will get wiggly.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I still have a ton of items to add. For example, there will be 44 different herb plant starts for sale and 32 heirloom tomatoes (one of five sub-categories of tomato). I’m concerned that the page will get so long that FW will get wiggly.

I think that this is a classic case where your content should be populated by a Database.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Is my “case” extremely long page length or quantity of items, or both?
How would I do this? Any software and tutorials you recommend?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I think it depends on how lazy you are. In my case, the tipping point for doing the same thing over by hand is somewhere around 4.

Walter

On Jan 23, 2016, at 6:46 AM, Peter Laundy email@hidden wrote:

Is my “case” extremely long page length or quantity of items, or both?
How would I do this? Any software and tutorials you recommend?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Not everyone’s cup of tea, built with an inflow layout that is flexible and responsive.

http://cssway.thebigerns.com/workbench/css-display-tables/

Ernie - it never ceases to amaze me how you can bend the FW will to get what you want. And it shows how important Actions are when doing it.

How much more difficult it would be without them.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

On 23 Jan 2016, 2:36 pm, waltd wrote:

I think it depends on how lazy you are. In my case, the tipping point for doing the same thing over by hand is somewhere around 4.

Walter

Good to know the threshold of items is so low for someone with your experience and coding knowledge.

Any advice on how much I’d be biting off to learn this, and pointers to content that would help down this path appreciated. I take it this would learning about and creating a MySQL database, changing Freeway page name endings from .html to .php, and using markup on divs in FW to identify what gets displayed?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Start looking at different CMS.

While a proper CMS is not strictly necessary to do what’s needed here there are many that come with useful tools that can (to varying degrees) help with some of the technical heavy-lifting, and certainly make managing the content much easier.

Todd

Any advice on how much I’d be biting off to learn this, and pointers to content that would help down this path appreciated. I take it this would learning about and creating a MySQL database, changing Freeway page name endings from .html to .php, and using markup on divs in FW to identify what gets displayed?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

And if you have CMS questions then ask them on the Freeway + CMS Slack team you joined (use the “general” channel). The people over there know plenty about using FW with a CMS.

Todd

Start looking at different CMS.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Ernie - it never ceases to amaze me how you can bend the FW will to get what you want. And it shows how important Actions are when doing it.

Thanks, Dave :slight_smile: In my view, it’s actions and the Extended user options that have made Freeway a useable tool. Without the dedication of a few avid action developers-- who seem to better understand the user base than the developer-- I suspect that Freeway would have long ago disappeared into obscurity.

That reminds me… didn’t Joe have some big-deal announcement to make by now? It’s almost February–


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options