Why would the height of an html box with text inside (text typed in the box, then styled, both in Freeway pro) look fine in preview and on the design page, but overrun the page bottom in a browser?
Yes, an online version allows for us to see how it behaves in a browser too
–
Ernie Simpson
On Fri, Jul 19, 2013 at 2:12 PM, Will email@hidden wrote:
Hello, everyone,
Why would the height of an html box with text inside (text typed in the
box, then styled, both in Freeway pro) look fine in preview and on the
design page, but overrun the page bottom in a browser?
To clarify, I’m wondering why the page in design mode looks fine, but in preview mode or in a browser, the height of the page and html/css box changes, overrunning the page.
Other pages I’ve made in the same sight view fine in design and preview mode.
the page appears fine to me – in Safari, Firefox and Chrome. It is only on
my iPad that the bottoms fail. What browser are you using?
Also, is there any reason why you have two pages for this content, and not
one?
I may not be the best answer for this, as I will inevitably suggest that
you can do this type of layout more reliably as an inline- inflow-
boxmodel-ish construction… The bottom element (FWP name “m4”) and the body
text element (FWP name “item2”) are siblings of FWP name “m1”. However, the
bottom element is before the text element in the page structure – try
maybe selecting the bottom element and menu Item > Send Backward or Item >
Send to Back and see if that helps?
As I said, in my browsers everything holds its position nicely, except for
iOS which I am at a loss to explain. Nice looking page though.
–
Ernie Simpson
On Fri, Jul 19, 2013 at 4:44 PM, Will email@hidden wrote:
To clarify, I’m wondering why the page in design mode looks fine, but in
preview mode or in a browser, the height of the page and html/css box
changes, overrunning the page.
Other pages I’ve made in the same sight view fine in design and preview
mode.
I’m wondering why the page in design mode looks fine, but in preview mode or in a browser, the height of the page and html/css box changes, overrunning the page.
I am afraid I am going to give my stock answer to this one:
This is down to how you have constructed your page and the differences in text rendering sizes in different Browsers and OS.
You can simulate how Browsers render text at different sizes in Safari.
Look at your page with Safari.
In Safari’s View Menu - enable ‘Zoom Text Only’
Now use Cmd + to increase the text size (a couple of stops should do it)
Note how your text size has increased and now overlaps the grey footer.
The real way to avoid this is to construct your page inline so that when text size grows the rest moves with it.
I tried moving the bottom element backward and to back with not luck. I’ll look into inline layout. Thanks again for your help. I see that you spent some serious time on my problem. Great to know that guys like you give so freely of your time.