[Pro] Mystery Blank Space

Can anyone help me figure out why I have a blank space between my header and CSS menu on this page? I don’t see any extra margin or padding, but I can’t for the life of me get that white space to go away between “sundialheaderlatest” and “navmenu”

http://dotyshepard.com/clients/peter/admin/mystery-pixels.html


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

The header image is wrapped in a

. By default paragraphs are assigned a bottom-margin.

Remove the bottom margin for that particular

and the gap should go away.

Use your browser’s Web Inspector to test it.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

Can anyone help me figure out why I have a blank space between my header and CSS menu on this page? I don’t see any extra margin or padding, but I can’t for the life of me get that white space to go away between “sundialheaderlatest” and “navmenu”


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

Todd,

Thanks for helping me figure out what’s happening. I understand what you’re saying, but I don’t know how to fix it in FreeWay.

I tried putting the “sundialheaderlatest” and “navmenu” in the same container, but that didn’t change anything. Then, I tried Walt’s Crowbar action, but I couldn’t get it to work. I’m not sure I’m applying it correctly. I read in another thread something about needing an option space at the end of the div, but every time I type that spotlight comes up and nothing is typed.

Any way I can get FW to stop wrapping this image in paragraph tags?

Doty


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

There’s a Remove Paragraph Tag action which should work.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

Any way I can get FW to stop wrapping this image in paragraph tags?


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

Here is an example with Remove Paragraph Tag action applied to the header:

http://dotyshepard.com/clients/peter/admin/mystery-pixels3.html

Same extra space and same

issue. Perhaps there’s another way to apply it??


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

Did you apply the Action to the image?

Alternatively, you could create a style with

margin-bottom: 0;

then apply the style to the

tag. Of course, that assumes you are able to access that

from within FW.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

Here is an example with Remove Paragraph Tag action applied to the header:

mystery-pixels3

Same extra space and same

issue. Perhaps there’s another way to apply it??


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

I did apply the action to the image. But, just to try something different, I put the image in a container and then applied the action to the container instead of the image. I got a slightly better result there is less white space, but it is still there.

I think I can access the

from FW. If I’m not mistaken, that’s part of the body tag. But, as that will affect the text all over the document, I’d rather not have to do that if I can help it.


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

Apply

line-height: 0;

to the parent div you just created. That’ll fix the gap.

Btw, that’s why I suggested applying a class (or id), it will only affect that one tag and not the entire website.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

I think I can access the

from FW. If I’m not mistaken, that’s part of the body tag. But, as that will affect the text all over the document, I’d rather not have to do that if I can help it.


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

Todd!!! Thank you for sticking with me until we found the secret sauce!

http://dotyshepard.com/clients/peter/admin/mystery-pixels3.html

So, just so I understand, I still need the Remove Paragraph Tags action applied to that parent div AND the

line-height: 0;

code. Is that right??

FWIW, I had to apply that line-height code to the

not the
. I have so much to learn!

Btw, I understood you wanted me to create a separate class, I just wasn’t sure if I could assess the

tag any other way.


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

Test it.

Remove the Action then look in the source code and see if the

reappears. If it does just reapply it.

It’s been a very long time but I think (?) FW by default wraps the tag in a

. But I could be mistaken.

In any case you have your solution.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

Todd!!! Thank you for sticking with me until we found the secret sauce!

mystery-pixels3

So, just so I understand, I still need the Remove Paragraph Tags action applied to that parent div AND the

line-height: 0;

code. Is that right??

FWIW, I had to apply that line-height code to the

not the
. I have so much to learn!

Btw, I understood you wanted me to create a separate class, I just wasn’t sure if I could assess the

tag any other way.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


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

I no longer need the action, just that one line of code in the right spot. Thanks again! This will be very useful to know in the future.


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

Good job.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

I no longer need the action, just that one line of code in the right spot. Thanks again! This will be very useful to know in the future.


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

I’m glad this worked out, as I watched it all day but have been too busy to reply.

Freeway wraps every inline image in paragraph tags, unless the image is placed into a heading like h1, or another text tag like the <li> tag in a list.

This is, for the most part, a good practice. As long as you understand that all text tags have some extra dimensions even when there is no text-- margin and of course, line-height (Freeway calls this “leading”).

For any text wrapped in a text tag, like <p>

p { font-size:16px; line-height:1.2; margin:1em 0; }

In the above scenario, the font itself will occupy a vertical space of 16 pixels, plus a space of 120% of the font-size, or 19.2 pixels (split evenly above and below the text), plus a space of 1em (or 1x the current font size) above and below the font/line-height space:

16px + (16px * 1.2 = 19.2px) + (16px * 2 = 18px) = 53.2 pixels

So when there’s no text, the line still reserves 37.2 pixels vertically across the block. Images can also have margins and other space-reserving properties to add to this, but the wrapping text tags are just so easy to forget about in Freeway because it seems like nothing is there but the image.

###Remove Paragraph Tags Action

The Remove Paragraph Tags action is one of my oldest favorite Freeway actions, but there are a couple things to watch for when using it.

  1. Do I really need it? – It is kind of a nuclear-option, so it’s also a good idea to make sure that you’re not leaning too heavily on it. After all, CSS gives you many options… maybe there is a better way to solve your problem, whatever it is.

  2. Unintended consequences – The RPT action is applied to a container element and will remove ALL the p tags from the container… not just those surrounding the image.

Having your inline image as part of the content flow is not bad practice… and neither is having an img tag that is in the flow but “unchaperoned”. You have to weigh the merits and decide for yourself.

###Styling difficulties

As a proponent of inflow construction with Freeway, I understand first-hand the difficulty of getting a cursor to the right place… especially to apply a style to a line of text with no text in it.

But there are a couple of tricks which make the whole damn thing easier…

First, your style needs to be what we have called a paragraph style… that means a style that will apply to an entire block of type, not just a selected subsection of it. Freeway shows those styles in the Styles palette with the paragraph symbol in front of the name. This is tricky as not all style option will invoke the paragraph status of the style. Generally, you should create/edit the style with the Style Editor. There, if you invoke a property from the Paragraph portion of the Editor, then you guarantee the style will apply to whole text blocks (paragraphs).

One way to trick Freeway into seeing a style with no paragraph attributes as a paragraph style, select from the Paragraph options in the Style Editor something called Force Graphic Paragraphs-- I’ve no idea what that does, don’t care-- just make sure it is unchecked. Ninety-nine percent of the time, the style will register as a paragraph style and you can use it as such.

Then, if you can just insert your cursor just before or after the inline image, that should be good.

But, what if your inflow space is so tight that you can’t squeeze the cursor into place before or after the image? I mean, it happens a lot that way with Inflow layouts.

Well, the trick we developed for div selection in those tight circumstances works with images too. Using the element layout at left (or if you can select the image by eyeball) select the image element so that you see the corner handles on it. Now, press either the right or left arrow key ONCE… whether or not you can see it, the cursor is now resting on the block line the image occupies. Apply your paragraph style.

###The style you need in this situation

I think Todd is right about applying a style to counter this effect… in it’s simplest form it might be

.inline-image-only

line-height: 0; – as an Extended style as I think Freeway has issues with this value. Also, Freeway adds the colon and semicolon to the name/value pairs, so no need to include them.

margin-left (left indent) 0px

margin-right (right indent) 0px

margin-top (space before) 0px

margin-bottom (space after) 0px

###Other CSS ways to do this same thing

You can also target an item using CSS without having to apply any style within your construction… what this means is there are many ways to tell a browser how to make something appear with CSS code.

For example, I use the figure element for images with captions (the figcaption element within the figure element). So I can make a Tag style in Freeway like this:

figure p { line-height:0; margin:0; text-align:center; }

The beginning or “tag” part is called the style Selector… in this case “figure(space)p” tells the browser “all p tags inside of all figure elements”. No application is necessary, the browser will work it out for me.

But since I will likely have p text in the figcaption element, I need to modify the selector into something like

figure > p

which instead tells the browser “only those p tags that are direct descendants of figure elements”. Since my caption text will be nested one more level down from the figure element in the figcaption element, the browser will not apply the style there. Logical.

There are many more ways to target an element with just CSS, so you are free to decide the best way to affect your design on your page.

###I like CSS shortcut notation for margins and padding, and most everything else

Just as a note, I think it’s better form to use CSS shortcut notation when using padding or margin properties-- for the most part, anyway. There will occasionally be an exception. Freeway will write the margin property with shorthand notation as long as there is a value entered for each of the four cardinal sides of the element, including zero. Otherwise, Freeway writes the sides individually.

Top - Right - Bottom - Left

margin: 5px 10px 15px 20px; 

Top/Bottom - Left/Right

margin: 10px 20px; 

Top - Left/Right - Bottom

margin: 10px 5px 20px

Whichever seems appropriate. Also, I like no units placed on a zero value-- zero pixels is the same as zero miles… zero is zero. Sadly, there is no one at Softpress to complain to anymore. :frowning:

I know this is long and the problem is already solved, but for anyone else trying to understand the relationship between Freeway and the code it generates, I think this is helpful.


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

It’s super helpful! Even though I have to re-read it about 10 times. These are the kinds of posts I return to over and over again. Here’s hoping the FWT forum stays alive and kicking for a long time. You guys make me feel smarter than I am!

Thank you.

I know this is long and the problem is already solved, but for anyone else trying to understand the relationship between Freeway and the code it generates, I think this is helpful.


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